Figma Scripting Playground helps designers learn JavaScript, explore the Figma API, and start making their own tools


  1. What

  2. Project history

  3. Live embed*


  • 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