Getting Started

Database

Modules

API Endpoints

Mobile Editor

Web Editor

Localizations

Organization & Team

Export

Figma Import

Advance configure

Email Authentication

Phone authentication

Full project tutorial

Project overview

Create project

Configure database

Configure modules

Configure API endpoints

Import from Figma

Configure using Editor

Export and running

Release Notes

Release Notes

ようこそ、JITERAへ!

About Figma Import

JITERA offers an integration with Figma, allowing you to generate code by importing your Figma design file. JITERA automatically converts any Figma component in your Figma file to a component that can then be used in your app. Whenever you make a change to the component in Figma you sync the changes to JITERA and update your application!

To begin, you should download our toolkit file. Once you've done that, clone your design into this file. Now, you're ready to utilize our powerful Figma to Jitera plugin. Simply launch the plugin from within this file, and watch as it efficiently converts your Figma components into equivalents for your application.

Please view **Figma to JITERA guideline** to understand the best UI/UX practices for development on JITERA.

Workflow

JITERA allows you to design reusable components in Figma and use them in your application. The workflow for creating and using components looks like this:

  1. Design your components in Figma in Figma toolkit
  2. Sync your Figma file with Figma to Jitera which will pull in the component’s design. You can then configure the component with data bindings and properties.

Design your components in Figma

Make a frame

To build components that can be imported into JITERA, they have to use frames. You can make a component on any page in your Figma file.

Untitled

Enable auto-layout

JITERA components work best with auto-layout so they are flexible and can adapt in your application. Select your frame and enable Auto Layout. Adjust the paddings, direction, and spacing to your liking.

Untitled

Rasterizing layers

If complex designs need more help than just Auto layout, try rasterizing them first. To rasterize in Figma:

  1. Select the area of your design you want to rasterize.
  2. Go to File > Quick Action.
  3. In the Quick action search bar (keyboard shortcut: CMD + P), choose Rasterize selection.

Untitled

Create component

Right-click on the frame you created like the one on the right and select Create Component or use the shortcut ⌥⌘K

Untitled

🎉🎉🎉🎉

Congratulations! You made your first JITERA component in Figma!

Sync with JITERA

A JITERA application can be tied to a Figma file as its source of truth for component designs. This allows you to design your components in Figma, sync them with your application.

Install the plugin

Search for Figma to Jitera in Figma plugin and click Install.

Untitled

Scan components

Scan the page to locate all the previously constructed design components you've created.

Screenshot 2023-08-03 at 12.08.56.png

Component configuration

After scan the components, you can tailor your design by selecting the appropriate component from the Component configuration section. Here's a list of the components we currently support:

Just choose the component that best suits your design needs via the select box in the component configuration.

Screenshot 2023-08-03 at 12.14.28.png

Download JSON or Copy the code

After finalizing your Component Configuration, you are now ready to either download the JSON file or copy the generated code for use.

Screenshot 2023-08-03 at 12.10.19.png

Import to JITERA

Once you have your JSON file ready, you can import it into JITERA. To do this, open the web editor of JITERA. Look for a panel on the left side of the screen. Scroll down to the bottom right of this panel and click on the "Import" button to initiate the process of importing your JSON file.

Untitled

Finalizing the Figma Import Process

Once the Figma import popup materializes, you'll have an opportunity to review the components you've chosen to import. Upon confirming your selections, proceed to import them into JITERA. Congratulations, you've successfully navigated the Figma import workflow!

Untitled

Notes

On this page