Quickstart - Import from URL

Import from URL is the fastest way to get started with Locofy. Instead of installing the Figma plugin, paste a Figma design URL directly into the Locofy dashboard and generate frontend code in just a few clicks.

This workflow is ideal when you want to quickly convert designs into code without setting up additional tools or switching between multiple applications.

Paste a Figma URL → Convert to Code → Edit with Agent Mode → Export

Step 1: Create your Locofy account

Go to Locofy.ai and click Get Started. You can sign up with Google, GitHub, or email, then complete onboarding (name, role, and how you plan to use Locofy).

Your Locofy account connects your projects, generated code, and Builder workspace in one place.

Step 2: Open the dashboard

1. Go to your Locofy Dashboard.
2. Scroll to Start with Figma URL - 1 frame at a time.

Step 3: Generate your first screen

Paste the URL of your Figma file or frame and click Convert To Code. Locofy imports the design and starts conversion.

1. Paste your Figma design URL into the input field—for example, a link to a specific frame or screen.
2. Click Convert To Code to start generation.
3. (Optional) Click How to get Figma design URL if you need help copying the right link from Figma.
4. (Optional) Click Use a sample screen instead to try Locofy with a pre-built design.

If Locofy doesn't have access to the file yet, your browser opens so you can log in to Locofy and allow Figma access. Once connected, conversion continues automatically.

Locofy reads the linked design, analyzes layout and structure, and produces developer-friendly frontend code using its Large Design Models (LDMs). During this process, Locofy understands important design concepts such as:

• Components
• Design systems
• Variables
• Layout structures
• Responsive patterns
• Visual hierarchy

This helps generate frontend code that is much closer to how developers actually build applications.

Step 4: Review your project in Builder

When generation finishes, open your project in Locofy Builder—either from the success screen or your project list in the dashboard.

Locofy Builder gives you a live preview of your running generated code. As you make changes, both the code and preview update automatically in real time, so you can quickly iterate and validate changes before exporting.

From Builder you can:

• Visual Mode — review components, props, project settings, and structure. See Visual Mode.
• Agent Mode — refine and improve code using natural language prompts. See Agent Mode.
• Responsive preview — resize the preview to check layouts across breakpoints.

If you are new to Builder, start with the Builder tour for a walkthrough of the interface.

Step 5: Export options

Once you are happy with the generated output, export your code using the workflow that works best for your team.

Supported export options also include code downloads and supported web and native mobile frameworks, giving you the flexibility to continue development using your preferred tools.

When to use Import from URL

Import from URL is recommended when:

• You want the fastest path from design to code
• You don't want to install the Figma plugin
• You already have access to a Figma file URL
• You want to quickly experiment with Agent Mode and AI-powered refinement workflows
• You want to generate, edit, and export code entirely from within Locofy

What's next

Prefer working inside Figma or Penpot? See the Plugin quickstart instead.