Figlet
Play with the Figma developer platform, follow interactive tutorials and share code examples
Plugin Preview
About this plugin
Figlet is a sandbox-like environment with a built-in editor that allows you to play with and learn how to use the Figma developer platform right inside Figma.
Important: This plugin requires you to create a Figlet account so it can save your data and preferences to the cloud.
Features
- Create figlets: small code examples using the Figma developer APIs
- Play with Figma APIs inside an editor (see limitations below)
- Follow interactive tutorials that teach you about the developer platform
- Browse community published figlets and publish your own
- Star your favourite figlets so you can check them out later
Editor
You can play with the Figma developer platform and its APIs using Figlet's editor. When you create a new figlet you're shown an editor and a new "code.js" file is created.
Running code
To run code, press the "play" icon in the bottom right-hand corner of the plugin window, or press Cmd/Ctrl + Enter.
To improve the editor experience, the editor positions the viewport on the newly created nodes. When you re-run your code, these nodes are removed from the canvas. This wouldn't happen in the real world. You can disable these in the settings section.
Showing a UI window
You can show a UI window by adding a UI file to your figlet and calling it using figma.showUI(__html__)
inside the "code.js" file. To add a UI file, click on the dropdown with the folder icon above the editor, and select "ui.html +".
Profile
When you publish your figlets to the community, your name appears next to your figlet. You can set your name in the settings section.
Settings
Editor
- Center viewport on run: Viewport is centered on any nodes created by the code
- Remove nodes on re-run: Any nodes created are removed before the code is run again
- Show toolbar in UI window: A toolbar is shown in the UI window when
figma.showUI()
is used
Plugin
- Remember window state: Remember the last page that was open when closing and re-opening the plugin
Limitations
Because of the nature of Figlet being a plugin, there are some limitations that restrict you from using certain features. These include but may not be limited to:
figma.widget
figma.fileKey
figma.parameters
figma.codegen
figma.teamLibrary
(not available yet)figma.payments
(disabled for now)figma.textreview, figma.on('textreview'...)
(disabled for now)
These limitations however do not prevent you from writing and sharing code that contains these methods.
Privacy Policy
When you create a Figlet account, some of your personal information is collected for the purpose of using the plugin. An account is needed so that your data can be backed up and you can share your content with the community.
Only your email address, full name, your avatar and any figlets you create are collected. Your data is never shared with anyone else and is only used for the purpose of managing your account and sharing figlets with other Figlet users.
Your data is stored for as long you have a Figlet account.
Plugin Details
Version | 58 |
---|---|
Created | March 9, 2023 |
Last Updated | February 10, 2025 |
Category | Software development |
Creator | Gavin McFarland |
Stats | 405 installs, 154 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:main.js
- Network Access:
The plugin requires network access so users can access domains during development. It connects to Supabase for data storage and Figma for retrieving user avatars.
- Editor Types:figma
- Allowed Domains:
- *
- http://localhost:3748Dev
- ws://localhost:9001Dev
More Like This
Discover other plugins in the Software development category.