Widget Code Generator by Figma

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.

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:

1. Design the input field using the Text layer type.
2. Generate code for the text layer using the plugin.
3. Locate the opening and closing Text tags for that node and replace them with Input.
4. Add props for onTextEditEnd, placeholder and value 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)