Custom Components

You can now import your custom components to your React, Next.js, Angular, React Native, Swift, Jetpack Compose & Gatsby Locofy projects and map them to the respective Figma Components.

Locofy replaces your Figma components with your actual custom component code and wires the correct props automatically when generating screens.

Note: You can import custom components for mobile frameworks (React Native, Swift & Jetpack Compose) as well.

Import Custom Components

New Locofy Project

1. Run the Locofy Figma Plugin. You may view our documentation on installing the Locofy plugin from here.
2. Create a new Locofy project for React, Next.js, Angular, React Native, Swift, Jetpack Compose & Gatsby.
3. Import your custom components during project setup.

Existing Locofy Project

1. Run the Locofy Figma Plugin.
2. Select an existing Locofy project.
3. Click on the badge or Custom Components icon next to the project dropdown.
4. Import your custom components.

Importing Methods

You can import your custom components using any of the following:

1. Import using the Locofy CLI from your codebase
2. Import from a GitHub repository

Refer to our component structure guide and Figma’s component best practices.

Mapping your Custom Components to the Figma Components

Web(React, Next.js, Vue, Angular, Gatsby, HTML/CSS)Mobile(React Native, Swift, Jetpack Compose)

1. LocoAI automatically maps your custom components to their corresponding Figma components.
2. If a component is not auto-mapped or needs to be changed, use Locate Mode to map it manually.
3. You can edit or delete mappings at any time.
4. You can detach the entire custom component library if required.

Note:
If your component exposes a className prop, you can edit styling and responsiveness in the review section.
If it exposes an onClick prop, you can configure it under Actions & Interactions.

Generating Code for Screens

Select the frames you want to convert and run Locofy Lightning.

Locofy detects mapped custom components, pre-fills the correct props, and generates clean, responsive, modular code for the remaining UI.

Editing Props of Custom Components

After mapping, you can dynamically edit component props.

Steps

1. Go to Code Components & Props Review
2. Select the custom component
3. Select the instance
4. Edit style, value, or conditional props and preview changes

Note: Components with className support styling & responsiveness edits. Components with interaction props (e.g. onClick, onPress) can be configured in Actions & Interactions.