2020—Present
Figma Scripting Playground helps designers learn JavaScript, explore the Figma API, and start making their own tools
CONTENTS
What
Project history
Live embed*
What
The script itself
A description of the script
Diagrams explaining the script
Test layers
Project history
The API, the plugin, and the sharing problem.
Figma plugins launched on August 2019. This sentence in the introductory blog post jumped out at me:
Our internal motto is: “If you can code a webpage with basic HTML and JavaScript, you can build a Figma plugin”.
"I know basic HTML and a little JavaScript", I thought. I looked into plugin development, but the workflow—TypeScript, building and not just designing an interface, etc.—didn’t seem fun or convenient and learning JavaScript wasn’t a priority, so I filed this away as a “get around to it someday” project.
The plugin
The following month a plugin called Scripter launched. It lets you experiment with the Figma API without having to write a plugin or muck around in the console—you can just type code into the plugin window, run it, and see what happens. I got the plugin and started noodling around… learning basic JavaScript and the Figma API.
Writing scripts was fun, but sharing them was not.
You have to explain the plugin
You need to convince people to download the plugin
Explain the scripts, sending people test files, etc… such a drag.
The file
October rolled around. I made a scripting playground file so I can have a single place to collect scripts to eventually share w/ people. The file has onboarding instructions, code snippets, notes, and test layers.
The file has an onboarding section
Each
The file has kept this format and has continue to grow
Sister project
Design System Starter Kit is a collection of building blocks.
Figma Scripting & Plugin Playground is a collection of small tools to manipulate building blocks.
DSSK is to nouns as FSP is to verbs