Import widget file from Figma | Zoho Creator Help

Import widget file 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, 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 only available 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 in which the widgets have been added.
  3. Is available in the United States (.com), Europe (.eu), India (.in), Australia (.au), and Canada (.ca) data centers.

3. Overview

Figma is a design tool and editor that helps you visualize and create customized prototypes for your intended designs. Figma also offers a variety of UI design kits that contain a comprehensive set of UI components, templates, text styles, color styles, fonts, and other core ingredients that you need to quickly create highly realistic designs across devices. They also include style guides on how to use the supported components in each kit.

4. Importing Figma Files in Creator

You can create widgets in Creator by importing your existing Figma design from our Figma UI Kit. This kit comes with detailed usage instructions and supported components applicable to Creator widgets. The designed file can be accessed as a widget by copying the frame URL and access token from your design and pasting them into Creator's widget builder.  This ability to create widgets from Figma files directly helps bridge the gap between design and development and quickly create efficient widgets with minimal effort.

5. 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.
 To know more about the kit, click here.

6. Components supported by the UI kit

The following components are supported in the UI Kit and their respective syntaxes are given below. These syntaxes must be used in the layer names for the respective components.
  1. Form Container
  2. Rating field
  3. Choice fields
  4. Textbox
  5. Tabs
  6. Buttons
  1. Refer the UI kit to learn about the syntaxes for each component.
  2. This kit also contains sample form templates that you can choose from and start customizing immediately.
  3. You can rename the used components. However, refrain from renaming the syntax or changing layers. Ensure that they don't override the syntax or structure that has been defined for the same.
    For example, "the following syntax, zc_input?linkname=<name>"  is meant to render the text element as an input box. If you rename it with some other term, the component will not work as expected. Similarly, changing layers will affect the functionality of your  designed widget.

Form container

You can use the form container when you want users to fill out form fields and submit data. Also, you can place fields and button components in form containers.
Ensure all fields and buttons are placed directly inside a form component. This means they cannot be used outside of a form.

Rating

A rating field allows your users to provide a rating or score to express their opinion or evaluation of a particular product, service, or experience. This field typically comprises a set of predefined options, often represented as stars, with each option corresponding to a different level of satisfaction.
Tip: You can use this field to collect product reviews, event feedback, and more.

Slider

A slider field in a form allows users to interactively pinpoint a value from a predefined range by moving the slider handle along the track. 

Choice fields

These fields enables your users to select a value from a predefined set of choices that are displayed in a menu. The types of choice fields include:
  1. Radio
  2. Drop down
  3. Checkbox
  4. Multi select

Text box

You can insert a text box element to enter the required content within the detail view. For example, you can use the text element to display a heading before starting sections or to add a note or disclaimer.

Tab

This component enables you to reorganize your data into distinct, switchable tabs and provide a well-organized display to your users. For example, in the above image, the tab named Product Management is placed in the Workitem module, which has three tabs: Design, Development, and Testing, all within a container. 

Button

Buttons are simple components on a user interface that are meant to let users interact with your page. Here, you can add a button to perform an action, pre-configured by you. 

7. See How It Works

After downloading and importing the Zoho Creator - Widgets kit, you can design the Figma file as required. When you're done, import the design in Creator's widget builder and view the customized design as a widget. Learn How


8. Use Cases

Case 1: Usage of additional components
Let's assume you’ve created a Home Services application. This application has a form called Feedback Details, which is used to collect customer feedback upon completion of the services provided. You require a rating field that enables users to provide a score depicted as stars or numerical values, with each option corresponding to a different level of satisfaction or quality. You can easily create a customized design for your feedback form by including the rating field (by using the suggested syntax in the UI kit) and upload the required widget in your Creator application. Users can then access your widget (form) and assign a rating, usually on a scale of 1 to 5 stars, indicating their satisfaction with the customer service. This in turn will help your business identify areas for improvement and address any issues.
Case 2: Wizard form structure
Let's assume that you've created a Contacts Management application in Creator. This application has a Contact Details form, in which your consumers must enter their required data. You may not be able to convey the precise depth and context of your requirements in the conventional form style. However, you can add switchable tabs, modify the dropdown menu, and construct your form like a wizard using our UI kit in Figma and import the customized design into Creator as a widget. This way, you can quickly and effectively establish the form's purpose and context, along with an enhanced user experience.

9. Navigation Guide to Create Widgets using Figma File

Navigate to the Settings page of the application in which you need to embed your widget and select the Import from Figma option. Next, upload your Figma design. Learn How


10. 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 es 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 that you Detach the instance before using the frame to generate the widget.
  5. 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.
  6. 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.
  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.

11. Limitations

  1. The images you've used in the design file should not exceed 5MB.
  2. Background:
    1. Multiple color fills is 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.

12. Related Topics

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

    Access your files securely from anywhere

      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









                                                                                                              • Related Articles

                                                                                                              • 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 widget by uploading file

                                                                                                                This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. Before creating a widget, you need to have the Command Line Interface installed. Learn more Note: For internal hosting, the ...
                                                                                                              • Sample widget

                                                                                                                This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. Sample Widget: Playground We shall learn to add a sample widget into your Creator application. The procedure is as follows: ...
                                                                                                              • Extract contents of a ZIP file and email the extracted files

                                                                                                                Requirement   Use Deluge to extract a ZIP file and email the extracted files with the click of a button. Use Case   An HR management application contains three forms: Add Employee, Employee Payslips, and Download My Payslips. The Add Employee form ...
                                                                                                              • Import users

                                                                                                                To import users: Click the Users option under the Manage section in the left pane. Click the More button. Choose the Import Users option from the drop-down. The import users pane will appear. Here, you can also bulk import users from a file provided ...
                                                                                                                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