Iterative Development - MCP

Locofy MCP lets you bring updated Figma designs into an existing codebase without regenerating your frontend from scratch.

As designs evolve, use Locofy MCP with your AI coding assistant to update a specific section or an entire screen while preserving the code and functionality you've already built.

This guide covers how to use Locofy MCP for iterative frontend development.

Before you start

Make sure you have:

• A Locofy account
• Access to the Figma design you want to implement
• Locofy MCP configured with your AI coding assistant
• An existing project that you want to update

If you haven't set up MCP yet, see Installing MCP. Once connected, your coding assistant can use Locofy's design-aware tools directly from your project.

Note: Use Agent mode in your AI coding assistant—not Ask or Edit mode—so the MCP tools can run and merge code into your existing project.

When a Figma design has changed

Consider a page that has already been implemented in your application.

Since the original implementation, the Figma design has been updated. For example, the latest design might include:

• An updated header
• Different spacing or styling
• Changes to an existing component
• A new section
• A redesigned layout

Your existing implementation may also have changed since it was originally generated. You might have added API integrations, state management, interactions, accessibility improvements, or other application logic.

Instead of generating a new project, use Locofy MCP to bring the latest design into your existing implementation.

Update an entire screen

If most of the screen has changed, ask your coding assistant to implement the latest version of the complete Figma screen.

Step 1: Open your existing project

Open the project you want to update in your MCP-compatible AI coding environment.

Run the application and confirm that the existing screen is working correctly before making the update.

Note: Commit your current changes before proceeding so you can easily review or revert the design update if necessary.

Step 2: Copy the updated Figma URL

Open the latest version of the design in Figma and copy the URL for the screen you want to implement.

Step 3: Ask your coding assistant to update the screen

Provide the Figma URL to your coding assistant and ask it to use Locofy to update the existing implementation.

For example:

Use Locofy to update the existing implementation of this screen based on the latest Figma design: [Figma URL].

Preserve the existing functionality and components where possible and merge the latest design changes into the current implementation.

Your coding assistant can use Locofy MCP to access the Figma design while also working with the context available in your existing codebase.

Step 4: Review the implementation

Once the update is complete, review the generated changes before accepting them.

Check:

• Which files were modified
• Whether existing components were preserved or reused
• Whether application logic remains intact
• Whether unrelated parts of the application were changed
• Whether the implementation matches the latest Figma design

Run the application again and compare the updated screen with Figma.

Update only part of a screen

You don't always need to update an entire screen.

If the designer has changed only one part of the page, use Locofy MCP to implement the updated section while leaving the rest of the implementation unchanged.

For example, imagine an existing page contains:

Header → Hero → Features → Pricing → Footer

The latest Figma design adds a new testimonials section between the Hero and Features sections.

Instead of updating the entire page, ask your coding assistant to implement only the new section.

Step 1: Copy the Figma URL

Copy the Figma URL that contains the updated section.

When possible, reference the specific frame or section you want to implement.

Step 2: Describe the update

Tell your coding assistant which part of the design should be implemented and where it belongs in your existing application.

For example:

Use Locofy to implement the new Testimonials section from this Figma design: [Figma URL].

Add it between the existing Hero and Features sections. Preserve the existing Header, Hero, Features, Pricing, and Footer implementations.

Being specific about the scope helps your coding assistant understand which parts of the existing implementation should remain unchanged.

Step 3: Review the targeted changes

Review the resulting code changes and verify that only the intended part of the application was updated.

Then run the application and compare the new section against the Figma design.

Merge design changes with existing code

Your codebase may contain functionality that isn't represented in Figma.

For example, after the initial UI was implemented, your team may have added:

• API integrations
• Application state
• Event handlers
• Form validation
• Analytics
• Accessibility improvements
• Routing
• Business logic
• Custom components

When asking your coding assistant to implement a design update, provide clear instructions about anything that should be preserved.

For example:

Update the UI to match the latest Figma design using Locofy. Preserve the existing API integration, state management, event handlers, and application logic.

For more targeted updates, you can be even more specific:

Update only the visual implementation of the Header based on the latest Figma design. Keep the existing navigation logic, authentication state, and event handlers unchanged.

Your coding assistant can then combine the design context provided through Locofy MCP with the context from your existing project.

Reuse existing components

When working with an established codebase, you may already have components that can be used to implement the updated design.

Instead of creating duplicate components, ask your coding assistant to preserve and reuse existing components where appropriate.

For example:

Implement the updated design using Locofy and reuse components that already exist in the project wherever possible. Avoid creating duplicate components when an equivalent implementation already exists.

If your project uses custom components that you've configured with Locofy, those can also provide additional context during code generation. See Using Custom Code Components.

After the update, review the implementation to make sure it follows your project's existing component structure.

Review changes before merging

Always review generated changes before merging them into your codebase.

We recommend checking:

• Visual accuracy — compare the implementation against the latest Figma design
• Component reuse — confirm existing components haven't been unnecessarily duplicated
• Existing functionality — test interactions, forms, navigation, and other application behavior
• Responsive behavior — verify the updated UI across the breakpoints supported by your application
• Code changes — review the diff to ensure unrelated files or sections haven't been modified
• Application state and APIs — confirm existing integrations continue to work as expected

If additional changes are required, continue refining the implementation with your coding assistant.

Refine the implementation

After bringing in the design update, you can continue using your AI coding assistant to refine the result.

For example:

The desktop implementation looks correct. Now make sure the updated section works correctly across the existing mobile and tablet breakpoints.

Keep the current implementation, but update the new section to use the existing Card component from our component library.

Because you're working inside your existing development environment, design implementation and code refinement can remain part of the same workflow.

For more prompt patterns, see Improve code quality.

Repeat the workflow as your design evolves

You can repeat this process whenever your Figma design changes.

For small updates:

Updated Figma section → Locofy MCP → Existing code → Targeted update

For larger redesigns:

Updated Figma screen → Locofy MCP → Existing code → Screen update

This allows your frontend implementation to evolve alongside your designs without treating every Figma update as a new code generation task.

Best practices

Commit your existing work first

Create a commit before implementing a design update. This makes it easier to review exactly what changed and revert the update if necessary.

Prefer targeted updates

If only one section has changed, update that section instead of unnecessarily updating the entire screen.

Clearly define what should be preserved

Tell your coding assistant about existing business logic, APIs, components, interactions, or other functionality that shouldn't be replaced.

Reuse existing components

Ask your coding assistant to check the existing project for suitable components before introducing new ones.

Review the diff

Treat AI-generated updates like any other code change. Review the implementation before merging it.

Validate the result

Run the application after every significant update and verify both visual accuracy and existing functionality.

What's next