Widget Code Generator by Figma
Beta features can change during the beta period. You may experience bugs or performance issues during this time. Learn more about beta features →
Before you start
Who can use this feature
Supported on any team or plan.
This plugin is for Figma Design only. You must use the Figma Desktop app to develop widgets.
The Widget Code Generator plugin for Figma Design allows you to design FigJam widgets and easily translate your designs into code. This Figma plugin generates code that you can copy and use to create a widget interface. In order to add functionality to your widget, you’ll need to edit the generated code. Learn how to build widgets →
In order to use generated code from the plugin, you need to:
- Setup your widget development environment. Check out the setup guide here →
- Install the Widget Code Generator from the Figma Community. Learn how to find and install plugins →
Run the plugin
Once you have Widget Code Generator installed, you can run it a few different ways:
- Right-click on the canvas > Plugins > Select Widget Code Generator
- From the desktop app, open the Plugins menu at the top then select Widget Code Generator
After selecting the plugin, the Widget Code Generator modal will pop up.
Generate code
The Widget Code Generator can only generate code one layer at a time, including all of the children in the layer tree. Select an individual layer while the plugin is running to see the generated code in the modal.
If changes are being made to a layer, the generated code won’t automatically update. After making changes to a layer, hit the ‘Refresh’ button to get the most updated code for your component.
When preparing to generate code for your design, make sure that you are only using characters A-Z and 0-9 in your layer names and that none of your components have reserved names that are used for Figma component types(ie. frame, rectangle).
Instance nodes
When you generate code for a design containing an Instance node, the code for all layers of that instance will not be included. Instead, a tag representing the instance will be shown. This reduces duplication when you use several instances of the same component, and makes your generated code more readable. If your design includes several instances of a component named MyComponent
, the generated code will look like this:
export function MyDesign() {
return <Frame>
<MyComponent/>
<MyComponent/>
<MyComponent/>
</Frame>
}
If you copy-paste this into your editor and try to run it, it will not compile because MyComponent
will be undefined.
To fix this, select MyComponent
in Figma and generate code for that instance. To go to the main component, right-click on the individual layer then select Go to main component. You can also click on the Go to main component link that appears in the warning message at the top of the modal.Â
Create inputs
Since there’s no way to mark a component as an Input in Figma, the Design→Code plugin can’t generate <Input/>
tags.
If your widget design contains an input:
- Design the input field using the Text layer type.
- Generate code for the text layer using the plugin.
- Locate the opening and closing
Text
tags for that node and replace them withInput
. - Add props for
onTextEditEnd
,placeholder
andvalue
to make your input functional.
Render images
To render an image in a widget, the image must be externally hosted or passed in as a data URI. Since we don’t know where your image will come from, we can’t generate complete code for an Image
tag. Instead, you will receive something like:
<Image src="<Add image URL here>"/>
Complete the code with the correct image source and it will be visible in your widget!
What’s not supported
The following features are supported in Figma Design, but aren’t supported in Widgets yet and therefore cannot be generated:
- Masks
- Local fonts you’ve uploaded to Figma (not Google fonts)
- Multiple text styles in one node (plugin will generate the first style)
- Layer names with characters outside of A-Z and 0-9
- Nodes with a width or height of less than 1px will be rounded up to 1px
- Gradient strokes (supported in widgets but the plugin currently doesn’t generate code for it)