Your first working component

From Figma to your repo.

Start with a sample, review the code, and see it render locally. No account, API key, or model download.

Open ZeroSync in FigmaDownload starter kit

Requires Node.js 22+ and Figma Desktop. Installation needs internet. Generation and preview stay on your machine.

  1. 01

    Start the local server

    Unzip the starter kit and open a terminal in the zerosync folder.

    npm install --omit=dev && npm start

    Keep this terminal open. The plugin will show “Connected” when it finds your server.

  2. 02

    Open the plugin in Figma

    In Figma Desktop, choose Plugins → Development → Import plugin from manifest. Select plugin/manifest.json from the kit, then run ZeroSync.

  3. 03

    Create a sample and review the code

    Click Create sample frame, then Review generated code. Inspect the review notes and click Save component. The file appears in components/generated.

    Previewing does not use your allowance. Saving an unchanged file does not use another generation.

  4. 04

    See it render

    Open a second terminal in the same starter-kit folder:

    npm run preview

    Open 127.0.0.1:4173. Compare the output at different widths. After it renders, confirm It renders in my project in the plugin; this records a local usage event.

  5. 05

    Try a design update

    Edit the sample in Figma and review again. Compare the current file with the proposed code. Before replacement, ZeroSync asks you to confirm and backs up the current version in .zerosync-backups. If the file changes after review, review it again before saving.

Bring your own project

Stop the server and restart it with your app’s output directory:

npm start -- --out /absolute/path/to/project/src/components/generated

Import the generated file in your app. Your app needs React and Tailwind with the output folder included in source scanning. The bundled preview only reads files saved inside the kit.

Map your existing components and tokens →

Troubleshooting

Server offline? Keep the first terminal running and check that port 3847 is available. Run npm run doctor for package and mapping checks. For your own project, use npm run doctor -- --out /path/to/generated. These checks inspect configuration; rendering verifies the result.

Preview port 4173 in use? Run npm run preview -- --port 4174 and open the printed URL. An older plugin or server? Download the current kit, restart the server, and re-import its manifest. Keep your existing project files and mapping configuration.