1. What Does This Page Cover?

Before you proceed to create a widget from Figma:

1. Click here to learn more about importing your design frame from Figma.
2. This kit also contains sample form templates that you can choose from and start customizing immediately.
3. If you're using the UI kit for the first time, familiarize yourself with the kit's capabilities and its components.

2. Availability

Creating a widget from Figma:

1. Is available only for paid plans of Creator.
2. Can only be created, uploaded, and managed by the super admin, admins, and developers, while other users can access the page the widgets have been added to.
3. Is available in the United States (.com), Europe (.eu), India (.in), Australia (.au), and Canada (.ca) data centers.

3. Setting Up Widget Creation using Figma

3.1 Figma Widget Creation Flow

3.2 See How To Convert a Figma design into a Creator Widget

3.2 Steps to Create a Widget from Figma

Prerequisites

1. You must have access to a Figma account.  If you don't have one, you can create a new one.
2. You must have access to a Figma design file that you want to use and create a widget from.
3. You need to generate the access token in your Figma account and copy it.
   

Step1: Access the Zoho Creator - Widgets kit

1. Access Figma and sign in with your Figma credentials.
2. View the kit in your Figma account (refer to Step 2: Design Your Widget File in the kit).
3. Read the instructions in the Points to Note section inside the UI kit to get an overview and know the general guidelines to use this UI kit.
   

Step 2: Design Your Widget in Figma

1. Follow the instructions in Step 1: Get Started With Our Kit and Step 2: Design Your Widget File to get started with using the kit to create your own Figma design.
   
2. Customize each component's properties as required.

1. Be sure to follow the mentioned syntax in the UI kit for each component that you’ve used in your design frame.  You need to specify their syntaxes in the layer name of each c.
2. Use frames to create your design. These frames can act as like a single page in an application design. Learn More
3. The design layers in your Figma file should be designed in the suggested syntax or structure as in the UI kit.

Step 3: Review Your Design 

1. Review the components you've added in your design.
2. Next, follow Step 3: Review and Convert into a Widget in the UI kit to convert your Figma design into a widget. 
   

Step 4: Create Widget in Creator

You can also create widgets directly from the page builder. Refer to Step 3: Review and Convert into a Widget in the UI Kit for more detailed instruction.

1. Ensure that you copy the link to a specific page or frame within the Figma file.
2. Click here to learn how to generate a personal access token in Figma.
   

1. This widget will appear as a drag-and-drop element in page builder for all the pages present in the application.
2. Creator uses your personal access token to connect to your Figma frame with Can view (read-only) access, and doesn't make any changes inside your Figma file.
   

4. Things to Know

1. You can design your widget only using the supported components from the UI kit to interact with the widgets.
2. The components you've used in your design must have their syntax as specified as mentioned in the UI kit for the widget to work properly in Creator.
3. Ensure that the components added to the page inside your Figma file are contained within a frame, and that they're from the list of supported components that our UI kit has provided.
4. If the above step is not followed, the widget creation in Creator might fail. When this happens, ensure to detach the instance before using the frame to generate the widget.
5. Creator doesn't retain the Figma files and access token that you provide. These files are only processed in-memory to generate the widget and will be downloadable as a .zip folder.
6. By allowing Zoho Creator to use Figma’s public API on your behalf to generate the required widget, you also agree to Figma’s developer terms and conditions as applicable.
7. Any direct changes to the design file and its components in Figma will require re-uploading the modified file for the widget to work as required. 
8. Google fonts are used in your Figma design. If you've used a custom font, ensure to store that font's TTF or OTF file in Assets -> Fonts folder inside your widget's .zip folder.
   

5. Limitations

1. The images you've used in the Figma design file should not exceed 5MB.
2. Background:
   
1. Multiple color fills are not supported for the frame and components' background.
3. Border:
   
1. Multiple borders are not supported in the Stroke section.
   
2. Borders (stroke) will be applied center to the shape path.
   
3. You cannot use gradient fill to apply colors.
   
4. Refer to this section for other limitations applicable to Creator widgets in general.

6. Related Topics

1. Understand widgets in Creator
2. Understand importing from Figma
3. Create a widget by uploading file