Custom Components

You can import your custom components into your React, Next.js, Angular, React Native, Swift, Jetpack Compose, or Gatsby Locofy projects and map them directly to the corresponding Figma components.

UIPro replaces your Figma components with your actual custom component code and automatically wires the correct props during screen generation.

At the core of this functionality is the locofy.config.json file, a configuration that acts as a bridge between your development environment and the UIPro Figma plugin.

UIPro MCP Tool

UIPro utilizes the generateComponentsConfig MCP tool during the mapping process.

This tool helps you:

Generate the configuration schema for your design components
Predict code-to-design mappings
Map code components to Figma components
Automatically save the configuration to locofy.config.json in your workspace root

Generating the Configuration File

You can generate the configuration file directly from your IDE using UIPro.

Step 1: Open Agent Chat

Ensure you are in your project's root directory. Open your agent chat in Cursor, Copilot, or another supported IDE.

Step 2: Run the Prompt

Use a prompt such as:

Create UIPro config for all components inside components folder

UIPro will:

Analyze the specified directory
Identify your custom components
Extract props, data types, and default values
Generate a locofy.config.json file in your project root

Understanding the Configuration File Structure

The generated configuration file contains a JSON object with an array of component definitions. Each component object defines how UIPro maps your code component to its corresponding Figma component.

Top-Level Component Properties

Property	Type	Description
`path`	`string`	Relative path to the component file from project root
`name`	`string`	Component class or function name
`props`	`array`	Array of prop definitions
`config`	`object`	Mapping configuration such as Figma layer name

Prop Definition Properties

Each object within the props array contains further details about the component's properties, as described in the following table:

Property	Type	Description
`name`	`string`	The name of the prop.
`dataType`	`string`	The data type of the prop, such as `string`, `number`, `boolean`, `enum`, `node`, or `object`.
`propType`	`number`	A numeric value indicating the type of prop. Common values are `1` for standard props, `4` for boolean or conditional props, and `5` for node or React element props.
`isOptional`	`boolean`	A boolean value indicating whether the prop is optional.
`expectValues`	`array`	For `enum` data types, this is an array of the expected values.
`config`	`object`	Contains mapping information for the prop, such as `layerProp` for mapping to a Figma component property or `valueMapping` for mapping prop values to Figma variants.

Custom Components Workflow

Once locofy.config.json is generated, you can follow the standard UIPro workflow.

Generate Configuration: As described above, use the agent chat in your IDE to generate the locofy.config.json file.
Open UIPro in Figma: Navigate to the UIPro plugin within your Figma design file.
Select Your Design: Choose the screen or component you wish to convert to code.
Convert to Code: Click the "Convert to Code" button in the UIPro plugin.

When UIPro encounters a component defined in locofy.config.json, it will:

Automatically map Figma layers
Map component props
Generate code using your existing custom components

Benefits of Using Custom Components

Integrating your custom components with UIPro offers several significant advantages:

Code Reusability: Leverage your existing, tested, and styled components directly in your generated code, saving time and reducing redundancy.
Design Consistency: Ensure that the final product is a pixel-perfect match to the design system and component library.
Accelerated Development: By automating the mapping of components and props, you can significantly speed up the process of turning designs into production-ready applications.
Single Source of Truth: Maintain a clear and consistent connection between your design system in Figma and your component library in your codebase.

Sample `locofy.config.json`

{
  "components": [
    {
      "path": "./src/components/button/index.tsx",
      "name": "Button",
      "props": [
        {
          "name": "className",
          "dataType": "string",
          "propType": 1,
          "isOptional": true
        },
        {
          "name": "leftIcon",
          "dataType": "node",
          "propType": 5,
          "isOptional": true,
          "config": {
            "layer": {
              "name": "icon/search"
            }
          }
        },
        {
          "name": "rightIcon",
          "dataType": "node",
          "propType": 5,
          "isOptional": true
        },
        {
          "name": "size",
          "dataType": "enum",
          "propType": 1,
          "isOptional": true,
          "expectValues": ["medium", "large"],
          "config": {
            "layerProp": "Size",
            "valueMapping": {
              "medium": ["md"],
              "large": ["lg"]
            }
          }
        },
        {
          "name": "content",
          "dataType": "string",
          "propType": 1,
          "config": {
            "layer": {
              "name": "[children]Button"
            }
          }
        }
      ],
      "config": {
        "layerName": "Button"
      }
    },
    {
      "path": "./src/components/card/index.tsx",
      "name": "Card",
      "props": [
        {
          "name": "className",
          "dataType": "string",
          "propType": 1,
          "isOptional": true
        },
        {
          "name": "showFooter",
          "dataType": "boolean",
          "propType": 4,
          "isOptional": true,
          "config": {
            "layerProp": "Footer",
            "valueMapping": {
              "true": ["Link + Timestamp"],
              "false": ["None"]
            }
          }
        },
        {
          "name": "header",
          "dataType": "node",
          "propType": 5,
          "isOptional": true,
          "config": {
            "layer": {
              "name": "Header"
            }
          }
        },
        {
          "name": "children",
          "dataType": "node",
          "propType": 5,
          "config": {
            "layerProp": "Content"
          }
        }
      ],
      "config": {
        "layerName": "Card"
      }
    },
    {
      "path": "./src/components/listing-item/index.tsx",
      "name": "ListingItem",
      "props": [
        {
          "name": "className",
          "dataType": "string",
          "propType": 1,
          "isOptional": true
        },
        {
          "name": "showSuperhostTag",
          "dataType": "boolean",
          "propType": 4,
          "config": {
            "layerProp": "showSuperHost"
          }
        },
        {
          "name": "item",
          "dataType": "object",
          "propType": 1,
          "keys": [
            {
              "name": "image",
              "dataType": "string",
              "propType": 1,
              "attr": "src",
              "config": {
                "layer": {
                  "name": "[listing01Image] listing-01-image"
                }
              }
            },
            {
              "name": "name",
              "dataType": "string",
              "propType": 1,
              "config": {
                "layerProp": "Title"
              }
            },
            {
              "name": "address",
              "dataType": "string",
              "propType": 1,
              "config": {
                "layerProp": "Location"
              }
            },
            {
              "name": "rating",
              "dataType": "number",
              "propType": 1,
              "config": {
                "layerProp": "Rating"
              }
            },
            {
              "name": "price",
              "dataType": "number",
              "propType": 1,
              "config": {
                "layerProp": "Price"
              }
            }
          ]
        }
      ],
      "config": {
        "layerName": "HomeCard"
      }
    }
  ]
}

Framework-Specific Guides

For detailed, framework-specific documentation with complete component examples and LocofyConfig setup, check out our dedicated guides:

React - Complete guide for React components with TypeScript examples
Angular - Angular components with @Input/@Output decorators and directives
React Native - Mobile components with React Native primitives
Vue - Vue 3 Composition API and Options API examples

Each guide includes:

Framework-specific configuration methods
Complete component examples with styling
locofy.config.json structure and samples
Best practices and troubleshooting tips
Advanced features and workflow guidance

Getting Started React