Locofy Builder Tour

Get familiar with Locofy Builder.

Accessing Locofy Builder

To access the Locofy Builder, open your design in Figma and sync your project using the Locofy plugin. When the sync is complete, you can click the “View code in Builder” to open your project in the Locofy Builder.

Builder requirements: supported screen resolutions

The Builder requires a monitor or laptop that has a screen width of at least 960px. This is required to display the left side bar, the design viewer and the right sidebar.

Sections of the Locofy Builder

Locofy Builder consists of 5 main sections:

The Top Toolbar

The top toolbar is where you manage your project and switch between the two modes of Locofy Builder.

Project details

View your project name and the type of project. The icon indicates if your project is for Web or for a Mobile App.

Edit and Preview mode

Switch between:

• Edit mode - where you will be able to select elements and make changes in the Settings Panel
• Preview mode - where you can interact with your fully functioning live prototype running on code

Viewer width

Toggle between screen sizes to view your design on different screen widths.

Collaboration and Teammates

• Invite and manage team members for your project.
• See teammates that are currently on Locofy Builder and what they are working on.

The Design Viewer

This section is where you view your design. What you see here is already running on live code, but you will not be able to interact with the elements unless you switch to Preview Mode.

Screens Gallery

Select the four-squares icon in the top left to open the Screens Gallery. View all your screens and single components at one glance and select a tab to switch to it.

Screen tabs

Switch between different screens quickly by clicking on the tabs.

Zoom level

Adjust the zoom level of the Design viewer

Main Viewer

This is where your design is displayed. As it is running on code, what you see is exactly what you get. You can click on an element in the Viewer to select it.

Selecting an element will reveal it in the Layers panel and show the available settings for it in the Settings Panel.

The Code Viewer

This section is where you can view the generated code for your design.

React Code

The panel on the left is where you view the code for your design in your selected framework.

CSS Code

The panel on the right is where you view the css code for your design.

Code Tabs

The code tabs on the top of each code panel allows you to switch between your different components to view its code.

Framework Settings

Click the gear icon to open your framework settings. You have fine-grained control over the code settings to meet your teams coding style and standards.

Export Code

To export code in your selected framework settings, click the Export Code button. Upon completing the export, a summary of your project export will be displayed.

Make Components

This section is where you can turn selected elements into reusable components and add props for dynamic content.

It consists of 3 sub-sections: Components, Props, and State Variables.

Components

For your selected element, you can convert it to a new component or into an existing component.

You can also convert it from a component back into a normal element by detaching.

Props

You can add props to your selected component. Currently you are able to add value and style props for dynamic data and styles, and also set up props for conditional rendering of any elements.

State Variables

You can add also state variables to your selected component. Currently you are able to choose among different types namely String, Number, Boolean, Object, and Array. You can also select the scope of the variable. Read more about it here.

Configure Code

This section is where you can change your project settings.

It consists of two sub-sections: Screen and Project Settings.

Screen Settings

You can modify screen settings to change title tag or meta description.

Project Settings

You can also modify project settings to customize React, styling and other settings.

Layers Panel

This section is where you can view the structure of your design.

File Explorer

The File Explorer allows you to navigate around the files easily to view the generated code as well as to select the files you want to push to Github.

Layer Panel

The Layer Panel allows you to view all the layers in your design.

The layer tree represents the structure of your design as it is in your Figma design. You can click an element in the layers panel to select it and highlight it on the Design Viewer.

Note: This section does not represent the DOM Tree, however the structure of the DOM tree and the Figma design layers tree are closely linked.

Github

The Github section allows you to connect your Github account.