Create a widget from Figma | Zoho Creator Help

Create a widget from Figma

1. What Does This Page Cover?

Learn how you can create widgets using your existing Figma design from Zoho Creator - Widgets Kit. This kit comes with comprehensive usage instructions and supported components for Creator widgets.
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

To create a widget from a Figma design In Creator, you must start with the Zoho Creator - Widgets Kit. This UI kit contains details of supported components, their syntaxes, important steps and guidance on how to use those components, and other additional information.
  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

In the UI kit,
  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

1. Navigate to the Settings page of the app in which you need to embed your widget.
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.
2. Select Widgets. The Widgets page will appear.
3. Click the Create button if you're creating a widget for the first time. Otherwise, click the New Widget button at the top-right.



4. The Create Widget pane will appear. Click the Import from Figma option.



5. Enter a name for your Widget.
6. Paste your Figma Frame URL and Figma Access Token
  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.

7. Click Create. The created widget will be added to the Widgets page.
  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.
8. Add the designed widget to your page. 

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.
  1. Understand widgets in Creator
  2. Understand importing from Figma
  3. Create a widget by uploading file

    Zoho CRM Training Programs

    Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

    Zoho CRM Training
      Redefine the way you work
      with Zoho Workplace

        Zoho DataPrep Personalized Demo

        If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

        Zoho CRM Training

          Create, share, and deliver

          beautiful slides from anywhere.

          Get Started Now


            Zoho Sign now offers specialized one-on-one training for both administrators and developers.

            BOOK A SESSION









                                        You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.




                                            Manage your brands on social media

                                              Zoho Desk Resources

                                              • Desk Community Learning Series


                                              • Digest


                                              • Functions


                                              • Meetups


                                              • Kbase


                                              • Resources


                                              • Glossary


                                              • Desk Marketplace


                                              • MVP Corner


                                              • Word of the Day


                                                Zoho Marketing Automation

                                                  Zoho Sheet Resources

                                                   

                                                      Zoho Forms Resources


                                                        Secure your business
                                                        communication with Zoho Mail


                                                        Mail on the move with
                                                        Zoho Mail mobile application

                                                          Stay on top of your schedule
                                                          at all times


                                                          Carry your calendar with you
                                                          Anytime, anywhere




                                                                Zoho Sign Resources

                                                                  Sign, Paperless!

                                                                  Sign and send business documents on the go!

                                                                  Get Started Now




                                                                          Zoho TeamInbox Resources



                                                                                  Zoho DataPrep Resources



                                                                                    Zoho DataPrep Demo

                                                                                    Get a personalized demo or POC

                                                                                    REGISTER NOW


                                                                                      Design. Discuss. Deliver.

                                                                                      Create visually engaging stories with Zoho Show.

                                                                                      Get Started Now









                                                                                                            Wherever you are is as good as
                                                                                                            your workplace

                                                                                                              Resources

                                                                                                              Videos

                                                                                                              Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                              eBooks

                                                                                                              Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                              Webinars

                                                                                                              Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                              CRM Tips

                                                                                                              Make the most of Zoho CRM with these useful tips.



                                                                                                                Zoho Show Resources