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
- Is only available for paid plans of Creator.
- 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.
- Is available in the United States (.com), Europe (.eu), India (.in), Australia (.au), and California (.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
- You must have access to a Figma account. If you don't have one, you can create a new one.
- You must have access to a Figma design file that you want to use and create a widget from.
- 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
- Form Container
- Rating field
- Choice fields
- Textbox
- Tabs
- Buttons
- Refer the UI kit to learn about the syntaxes for each component.
- This kit also contains sample form templates that you can choose from and start customizing immediately.
- 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:
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
- You can design your widget only using the supported components from the UI kit to interact with the widgets.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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
- The images you've used in the design file should not exceed 5MB.
- Background:
- Multiple color fills is not supported for the frame and components' background.
- Border:
- Multiple borders are not supported in the Stroke section.
- Borders (stroke) will be applied center to the shape path.
- You cannot use gradient fill to apply colors.
- Refer to this section for other limitations applicable to Creator widgets in general.
12. Related Topics
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 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 Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
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.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
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 ...
New to Zoho LandingPage?
Zoho LandingPage Resources