Quickstart

This guide walks you through how to go from a design file to working frontend code using Locofy. While Locofy already handles converting your UI into structured code, it also provides tools to refine and extend that output, including AI-assisted editing through Agent Mode and controls for customizing components, layouts, and interactions.

In just a few minutes, you’ll understand how to generate code from your designs, enhance it, and export it into your development environment.

Step 1: Create your Locofy account

To use Locofy, you’ll need an account that connects your design plugin, projects, and code exports into a single workflow.

Go to Locofy.ai homepage (opens in a new tab) and click Get Started. You can sign up using Google, GitHub, SAML SSO, or email, and then complete the onboarding steps (name, role, and how you plan to use Locofy).

Step 2: Open your design tool and run Locofy

Locofy works directly inside your design tool by reading your design structure — such as frames, layers, and components — and preparing it for code generation. Instead of exporting assets manually, you run Locofy as a plugin on top of your design file.

Step 3: Create or select a project

Before you start, you need to create a project in Locofy.

When you open the Locofy plugin, you’ll see a project selector. From here, you can create a new project:

1. Click on "Select project" field.
2. Click on "Create new" & enter your project name.
3. Select your framework from the following options:
   • Web: React, Next.js, HTML/CSS, Gatsby, Vue, Angular
   • Mobile: Flutter, React Native, Swift, Jetpack Compose
4. Select your preferred UI library such as Material UI, Chakra UI, Ant Design, and Bootstrap for web projects and React Native Kitten for mobile projects.
5. (Optional) If you have existing code components for your web projects, you can map them to respective Figma Components. You can read more here (opens in a new tab).

Step 4: Convert your first design

To generate code, start by selecting the part of your design you want to convert.

Locofy works based on your selection, not the entire file.

1. Select a Frame or a specific section of your UI (e.g. a screen, navbar, or component)
2. Once selected, click Convert to Code in the Locofy plugin. This runs Locofy’s Lightning flow, which handles the automated conversion process.

Note: You can select up to 5 designs at a time

What happens during Lightning flow

During Lightning flow, Locofy proceNow let's move on to the next step. Follow the same process as the last, but make it crisp and concise.sses your design and prepares it for development by:

• Analyzing layout structure (frames, auto layout, grouping)
• Applying responsiveness rules
• Tagging elements (buttons, inputs, images, etc.)
• Detecting reusable components
• Generating code-ready structure and preview

After this step, you’ll see a live preview inside the plugin along with the generated structure.

Great — next step is where we shift from “generated output” to making it actually usable. This is where Agent Mode fits naturally.

Step 5: Enhance your output using Agent Mode

After Lightning generates your UI preview, use Agent Mode to quickly refine your code with natural language prompts & Agent Mode works on top of the pixel-perfect Lightning code, every change builds on a solid foundation. The live preview also updates instantly see so you can quickly validate changes visually.

You can use it to:

• Fix responsiveness (“stack this row into a column on small screens and keep touch targets at least 44px”)
• Improve accessibility (“add proper labels for these icon-only buttons and ensure focus order makes sense”)
• Support dark mode (“add a dark theme for this screen with readable contrast on backgrounds and text”)

You can read more about Agent Mode here.

Step 6: Export your project

Once you are satisfied with the generated and enhanced output, the next step is to export your project from Locofy. This is where your design moves from a preview inside the plugin to an actual development-ready workflow.

At this stage, Locofy gives you multiple ways to export depending on how you want to work with the code.

The sections below explain when each export option fits best.