August 31, 2023
Hosted by Free Association // Kyle Truscott
This package contains the simple Button Explorer
widget presented during the live webinar. Feel free to use this code as a starting point for your journey into building design tools.
The code is an extension of the out-of-the-box widget that Figma will create for you. It uses TypeScript and NPM, which are both normal tools for creating javascript based apps.
- Download Visual Studio Code: https://code.visualstudio.com/.
- Install the Node JS language runtime: https://nodejs.org/en/download/
- Note: you may already have this on your computer
- Unzip this folder to your computer's hardrive.
- From the Figma desktop app, use the
Widgets > Development > Import widget from manifest...
item to locate themanifest.json
file contained within this folder.
- Open Visual Code Studio
- Use the
File > Open Folder...
menu item to locate this folder to open it. - Use the
Terminal > Run Task...
menu item, and locate thenpm: install
item- This will download all the required pieces of software needed for the widget to work
- Use the
Terminal > Run Build Task...
menu item, and locate thenpm: watch
item- As you modify files, VS Code will regenerate the widget code for you
- Test a variety of fonts all at once
- See loadFontAsync
- Generate a color palette from 3-4 starting colors by systematically increasing/decreasing brightness
- See chroma.brighten() and chroma.darken()
- Compose the buttons within a dialog box alongside other text content
- Create an input field that lets you enter a hex value directly
- See Input