Using Custom Code Components

When using Locofy MCP, you can map Figma components to your existing custom component library so generated screens use your real code—not generic placeholders.

This is especially useful when you already have a design system in your codebase and want Locofy to respect it when your AI assistant generates code from a Figma URL.

Working with your design team

Locofy CLI and MCP are built for developers. You handle the codebase—locofy init, locofy push, and generating code from a Figma URL. But custom components and Figma component setup also require work inside Figma, which you may not have access to or may not be familiar with.

What you do (developer)

1. Configure and push your component library from your project root (locofy init, then locofy push).
2. Define mappings in locofy.config.json—component paths, figmaComponentName, and prop names.
3. Share the config with your designer so Figma component names and properties stay aligned with your code.
4. Generate code with locofy convert or MCP once components are mapped.

What your designer does (Figma)

Ask your designer (or design lead) to complete these steps in the Figma file:

1. Open the file in Figma Design Mode — Design Mode is where layouts are created and edited. The Locofy plugin runs the full custom-component and mapping flow here. Dev Mode is for inspection only and is not sufficient for this setup.
2. Open the Locofy plugin — In Design Mode, go to Actions (⌘/Ctrl + K) → Plugins → search for Locofy.
3. Pull your pushed components — After you run locofy push, your designer clicks I have completed all the steps in the plugin so your code components appear for mapping.
4. Map components and props — Match Figma components to your code components and wire up prop mapping in the plugin (or confirm mappings you defined in locofy.config.json).
5. Structure designs correctly — Reusable UI should be built as Figma components with text, boolean, and variant properties—not flat frames. Share the Figma Components guide with your designer.

Don't have Figma access?

You can still push components and define mappings in locofy.config.json from your repo. For plugin-side mapping and design validation, coordinate with your designer—they only need to run the Locofy plugin in Design Mode on the shared Figma file. Generation via CLI or MCP only requires the Figma URL and your Locofy account's Figma connection.

MCP workflow for custom components

Your steps (terminal and IDE):

1. Set up custom components using the CLI — run locofy init, configure locofy.config.json, and locofy push. See Import components using the Locofy CLI.
2. Ask your designer to open the Locofy plugin in Figma Design Mode and click I have completed all the steps so pushed components appear for mapping.
3. Generate code via MCP — ask your AI assistant to generate from your Figma URL; Locofy uses your mapped components when building screens.

What happens during generation

Locofy replaces Figma components with your actual custom component code and wires the correct props automatically when generating screens. If a component isn't auto-mapped, use manual prop mapping to connect it.

What's next

• Figma Components — what your designer needs to structure in Figma
• Manual prop mapping — connect Figma props to code props
• Complex prop mapping (mapFn) — advanced mapping for derived and array data