Generate Figma scripts effortlessly
Readable API docs and one-click generators that super-charge your design workflow. Build powerful automation scripts with simple clicks—no coding experience needed.
What is a Figma Script?
A Figma Script is a short snippet of JavaScript you run inside Figma's Console or via custom actions in the Shortcuts plugin. It's the fastest way to automate repetitive tasks—no compile step, instant undo, AI‑friendly.
Quickly apply consistent corner radius to any element
node.cornerRadius = 8Instantly adjust text properties across selections
node.fontSize = 12Control spacing in auto-layout frames effortlessly
node.itemSpacing = 16Instant
No compile step, run immediately in Figma
Undoable
All changes support Figma's undo system
AI-Friendly
Perfect format for AI assistants to generate
Precise
Target specific elements with surgical precision
Friendly API Documentation
Figma's official API is not user-friendly for designers. This site provides an easier way to understand and use the Figma API, letting anyone generate fully runnable code with simple UI. Every designer can use Figma scripts.
🏗️Layer Types Overview
Each property in Figma can only be applied to certain layer types. Below is a quick overview of common layer types. You need to select the correct type(s) for your script to work as expected.
⚙️Layer Properties
Here are the most common Figma layer properties, grouped by category. Each code snippet changes one property of a selected node. Use the code generator below to build a complete runnable script.
Position (X / Y)
Set the x and y position
Loading...Size (Width / Height)
Resize node
Loading...Rotation
Set rotation angle (degrees)
Loading...Corner Radius
Set unified corner radius
Loading...Individual Corner Radius
Set each corner's radius
Loading...Direction (Horizontal/Vertical)
Set auto layout direction
Loading...Item Spacing
Set gap between children
Loading...Padding
Set paddings
Loading...Horizontal Resizing
Set horizontal resizing mode
Loading...Vertical Resizing
Set vertical resizing mode
Loading...Primary Axis Align Items
Align children on primary axis
Loading...Cross Axis Align Items
Align children on cross axis
Loading...Solid Fill
Set a solid fill color
Loading...Remove All Fills
Remove all fills
Loading...Stroke Color & Weight
Set stroke color and weight
Loading...Stroke Align
Set stroke alignment
Loading...Opacity
Set opacity 0-1
Loading...Blend Mode
Set blend mode
Loading...Drop Shadow
Add a drop shadow effect
Loading...Layer Blur
Add a layer blur effect
Loading...Replace Text
Change the text content
Loading...Font Size
Set font size
Loading...Font Weight
Set font weight (style)
Loading...Line Height
Set line height
Loading...Text Fill Color
Set text color
Loading...Complex Text Styling
Apply multiple text properties with font loading
Loading...🛠️Execution Templates & Helper Functions
To batch-run property changes on all selected nodes, or to use features like color parsing and loading fonts for text, use the following templates and helpers. Paste your node.xxx = xxx code into the for-loop of the template as needed.
📋Runnable Template
This template applies your property changes to all selected nodes in Figma.
Loading...🎨Helper: convertColor()
Convert hex, rgb, or hsl colors to Figma RGB object. Supports formats like #ff0000, rgb(255,0,0), hsl(0,100%,50%).
Loading...🌈Helper: convertColorWithOpacity()
Convert colors with opacity to Figma RGBA object. Handles alpha channel from rgba() and hsla() formats.
Loading...📝Helper: loadFonts()
Load fonts for text nodes before applying font-related changes. Required for text property modifications.
Loading...💡 Usage Example
Here's how to combine the template with helpers for a complete script:
Loading...