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 https://www.locofy.ai (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).

Once your account is set up, it becomes the central layer that:

• connects your design tool (via the plugin)
• stores your projects in Builder
• enables exports to GitHub, ZIP, MCP, and other integrations

Make sure you’re logged into the same account when using the plugin and Builder to avoid sync issues later in the workflow.

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.
   • React, Next.js, Gatsby: Material UI, Chakra UI, Ant Design, and Bootstrap
   • Vue: Vuetify
   • React Native: React Native Paper, UI Kitten
   • Flutter: Material UI
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 running Lightning, you’ll get a working preview of your UI in Locofy. At this stage, the code is generated, but it may still need refinement depending on your design complexity and intended behavior.

This is where Agent Mode comes in.

Agent Mode lets you improve and modify your generated UI using natural language, without manually editing every element or structure. As you make changes, you’ll immediately see the updated result in the live preview. This makes it easy to iterate quickly and validate changes visually.

Agent Mode works on top of Lightning-generated code, which means your starting point is already a pixel-accurate, structured representation of your design. This ensures that any refinements you make are applied on a solid, production-ready foundation.

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”)

It works directly on top of your generated code, so you can iterate quickly without restarting the flow. 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.