Using Custom Code Components

When using Locofy CLI, 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 during locofy convert and Interactive Mode.

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.

CLI workflow for custom components

Your steps (terminal):

1. Install and log in to the CLI — see Quickstart.
2. Run locofy init from your project root to create locofy.config.json.
3. Configure your component library in locofy.config.json.
4. Run locofy push to upload components from your local codebase to Locofy.
5. 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.
6. Generate code with locofy convert — Locofy uses your mapped components when building screens.

For CLI command details and locofy.config.json structure, see Import components using the Locofy CLI and Configure components.

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