Custom Components

You can now import your custom components to your React, Next.js, Angular & Gatsby locofy projects and map them to the respective Figma Components. Locofy will replace your Figma components with the custom component code with the correct props as you generate code for your screens.

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 of React, Next.js, Angular or Gatsby framework.
3. Import your Custom Components.

Existing Locofy Project

1. Run the Locofy Figma Plugin. You may view our documentation on installing the Locofy plugin from here.
2. Select the existing locofy project of React, Next.js, Angular or Gatsby framework.
3. Click on the Badge or the custom components icon next to the project dropdown.
4. Import your Custom Components.

Importing

Your can import your custom components using one of the following

1. Import using Locofy CLI from your codebase
2. Import from a Github respository.
3. Import from a public or private Storybook.

Note: You may view our documentation on how to structure components in code and this documentation on how to structure your Figma components.

Mapping your Custom Components to the Figma Components

1. LocoAI automatically maps your custom components to the Figma components.
2. If any custom components are not mapped automatically or you want to change the mapped component, you can use the Locate mode to map your custom component to the requisite figma component.
3. You can also update the custom components mapping by either editing or deleting the mapping.
4. You can detach the entire custom component library should you want to as well.

Generating Code for the requisite screens

You can now select the frames you want to convert to code and run Locofy Lightning on them

Locofy automatically detects the custom components in your designs and pre-fills them with the appropriate props. It also generates the code for the remaining UI and makes the design interactive, responsive and modular with repeated code components.

Editing Props of Custom Components

After mapping of custom components you can also edit props dynamically, be it style props, value props or conditional props. To edit props:

1. Go to Code Components & Props review.
2. There select the component which you want to edit.
3. Select the instance you want to edit.
4. Edit the properties of the custom components and view the updated preview.

Note: If you have className prop for your custom components then you can editing the Component's Styling & Responsiveness in the review section. Furthermore, if your component has an onClick prop you can configure it in the Actions & Interactions review section.