Reuse what your team already built

Your components. Your tokens.

Turn a Figma instance into an import from your existing React library. Start with one component, then share the mapping file through Git.

This starter mapping uses descendant text as component children. Change children to “layers” or “none” in the JSON for other components.

Your configuration

{
  "colors": {
    "#1f6feb": "primary"
  },
  "spacingScale": true,
  "radiusScale": true,
  "components": {
    "Button": {
      "import": "@/components/ui/button",
      "name": "Button",
      "children": "text",
      "props": {
        "variant": "default"
      }
    }
  }
}

The file is generated in your browser. Form values are not submitted to a server. Website visit analytics are separate from local generation.

Connect it to your project

  1. Save zerosync.config.json in your project root, output folder, or an ancestor of that folder. The closest file wins.
  2. Check that the import path, component props, and Tailwind tokens exist in your app. Mapping does not create a component library.
  3. Review a frame again in ZeroSync. It reloads your config on each preview and save, and reports invalid mappings.
  4. Commit the config to Git. Teammates can start the server with their own output path and reuse the same conventions.
Need help connecting your project? →

Map Figma properties to React props

Extend a component mapping with propertyMap. Keys match Figma property names, including names with Figma’s generated suffix. Unmapped values are omitted when you provide a values table.

{
  "components": {
    "Button": {
      "import": "@/components/ui/button",
      "name": "Button",
      "children": "text",
      "propertyMap": {
        "Style": {
          "prop": "variant",
          "values": {
            "Primary": "default",
            "Secondary": "secondary"
          }
        },
        "Disabled": {
          "prop": "disabled"
        }
      }
    }
  }
}

Props support strings, numbers, and booleans. Event handlers, named slots, and application behavior need manual implementation. Use children: “none” for components that render their own content, or “layers” to retain nested generated layers.

Validate it on your team’s actual screens

A team pilot can evaluate five mappings and three representative frames against your current implementation workflow.

Explore a team pilot →