Thumbquote Config 2022
Creating a plugin doesn't have to be complicated. In my talk Demystifying Plugin Development I walk through all the steps for creating a plugin that sets a random quote as a thumbnail. Use this repo to have a look at what we covered in my talk.
No setup required
If you just want to play around with the code without any extra setup.
- Download this repo from Github
- Install the Figma desktop app
- Open a new file
- Open the Quick Actions Menu (
cmd/ctrl + /
) - Search for "Import plugin from manifest"
- Select the
manifest.json
file - To test it, search for
Thumbquote Config 2022
from the quick actions menu.
Open the code.js
file and edit it to play around with the code. I suggest using Visual Studio Code.
More advanced setup
In my talk, I show how you can use the await keyword to make your code a bit cleaner. To do this we need to install a tool that will convert our code into a format that Figma will understand. There are a couple of ways to do this, but a simple way to manage this is by installing TypeScript.
-
Install Node.js
Visit https://nodejs.org/en/download/ and download and install Node.js. This is so we can install node packages like TypeScript.
-
Install TypeScript
Using a terminal app run the following command to install TypeScript globally (Visual Studio Code has a built-in terminal. Just press
ctrl + ~
).sudo npm install -g typescript
-
Install type definitions
Run the following in the terminal. This is to avoid getting syntax highlighting errors using the Figma API.
npm install @figma/plugin-typings --save-dev
-
Edit the code.ts file
Now edit the
code.ts
file (instead ofcode.js
). -
Rebuild the file
To preview your changes, open the terminal app and run
npm run build
-
Now run the plugin
You can re-run the plugin in Figma by pressing
cmd/ctrl + P
When you're developing you can run npm run watch
instead and this will watch for any changes to your code.ts
file so you don't have to keep running the build command.
For more advice please follow the Figma API Setup Guide.
Other useful links
- MDN JavaScript First Steps - A good intro into the basics of JavaScript
- Codecadamy - A great place to level up your JavaScript, HTML and CSS skills
- Fish Shell - Provides syntax highlighting for the terminal and makes it a bit easier to use
- Figma Plugin Samples - Other Figma plugin and widget examples
- Fignite Helpers - A collection of useful functions for Figma plugins and widgets