···

    Widget Code Generator by Figma

    🚧  Widget Code Generator is currently in open beta

    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.

    Download the Figma Desktop app ->

    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:

    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.

    WCG_Modal.png

    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.

    wcg-codegen-1.gif

    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.

    codegen-refresh.gif

    Note

    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. 

    Instance_Nodes.png

    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)

    Related Videos

    See more