eval()
RIP calculators!💀 Do math and code right on the canvas.
Plugin Preview
About this plugin
Calculators are dead. 💀 Do math and run code right on the canvas inside Figma files! ✨ Select a text layer, frame or group and run the plugin, the result of the last line expression will be printed on canvas below the expression.
Send the plugin link to your friends: https://figma.fun/eval 🔗
Copy examples below, paste them as separate text objects in your file and run the plugin.
Evaluate an expression (RIP calculators 💀)
75 + 69 * 5
Generate a random number [0-100]
Math.round(Math.random() * 100)
Count all layers in the file (don't run in large files!)
figma.root.findAll(n => true).length
Tips:
- You can select multiple objects to run at once but each layer will run in a separate function and the variables won't be shared across.
- The code is written in JavaScript.
- You can access all Figma API methods within the code.
- Write code in text blocks, code blocks, stickies and shapes with text (last three only in FigJam).
- Select groups or frames to run all the code inside. Except for output nodes, which would be updated with the new calculation result.
- If you want to see output, the last line in the text box should be an expression that returns a value (examples:
5 + 5
,myfunc()
,x
) and not a statement (such asconst p = 4
). - Add
//
at the beginning of the text node so it's treated as a comment and doesn't produce a result. - Add
=
at the end of the expression so the result is printed in the same text, for example:5 + 5 =
would be turned into5 + 5 = 10
. - The node with code can be hidden or transparent and the result would be still printed visible. This is useful if you want to not clutter the file with code.
- If your code throws an error, it will be printed in red.
- The plugin works similar to notebooks in Python or other interpreted languages.
Tips, questions and feedback are welcome in the comments!
Plugin Details
Version | 6 |
---|---|
Created | July 12, 2022 |
Last Updated | June 28, 2024 |
Category | editing & effects plugins |
Creator | Gleb |
Stats | 162 installs, 45 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- main:code.js
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the editing & effects plugins category.