So we’re a month into this quarantine and needless to say I’ve been going a little crazy.

I have a lot of designer friends that love Figma, and I’ll be the first to admit I have become more adept at Sketch than anything else when it comes to design. I am also a developer, and with all of the free time I have thanks to the outbreak, I decided to make something stupid. So I thought, what the hell—I’m going to learn Figma plugin development.

Consider this as a boilerplate for creating a Figma plugin in React/Redux. I’ve developed it in the simplest way I know how to make it consumable for a Figma plugin newbie like myself.

I’m passing a single boolean from my store called ‘showDoom’ into my app, and my single component <ShowDoomComponent /> shows when the boolean is true, which it is. Simple.

Make sure once the window appears that you click inside it so your keys register in Doom, and not Figma. Remember, you’re not doing anything productive right now.

The controls are simple, use the arrow keys to move around. Control is to shoot, and spacebar is to open doors & toggle switches.

The code itself is developed in Typescript, which is the language the Figma plugin development page recommends.

Some things I learned developing this App:

I’m used to just compiling create-react-app like a lazy bum to get all my dependent files, but things work a little differently with Typescript, like you need to install React, React-Redux, and Redux as @types.

npm install — save-dev @types/react @types/react-dom @types/redux

I spent a good 45 minutes pulling my hair wondering why my imported modules weren’t working, and that was it.

Also If you want to use react-redux and regular ole’ react / node modules inside of a Typescript app, make sure you update the following jsconfig.json to accept the following conditions:

{

“compilerOptions”: {

“target”: “es6”,

“jsx”: “react”,

“moduleResolution”: “node”,

“allowSyntheticDefaultImports”: true

}

}

Your manifest.json holds the plugin information that Figma will read when you install it. Make sure you point your main and ui paths to the distribution files:

{

“name”: “Doom React Redux”,

“id”: “738168449509241862”,

“api”: “1.0.0”,

“main”: “dist/code.js”,

“ui”: “dist/ui.html”

}

If you’re confused by the rogue conan.gif in the src folder. So am I. Pay no attention to it.

You can read more about how Redux or React works in literally any number of articles on the internet—this is just to show how you could pass store data into your app.

If you have any questions, you can @ me on twitter. https://twitter.com/caseofbase87

NOW GO FORTH AND SLAY SOME DEMONS or just microwave another quesadilla while you’re quarantined.

❤

~ C