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 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
- 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
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.
- 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.
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:
- Radio
- Drop down
- Checkbox
- 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.
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.
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.
- Understand widgets in Creator
- Create a widget by uploading file
- Create a widget from Figma