Design System Importer

Import your team's design system to build consistent, on-brand apps. Plugin for the Auto Engineer CLI that syncs shared styles, components, and tokens from design tools or code.

Installation

This is a plugin for the Auto Engineer CLI. Install both the CLI and this plugin:

npm install -g @auto-engineer/cli
npm install @auto-engineer/design-system-importer

Configuration

Add this plugin to your auto.config.ts:

export default {
  plugins: [
    '@auto-engineer/design-system-importer',
    // ... other plugins
  ],
};

Commands

This plugin provides the following commands:

• import:design-system - Import a design system from Figma

Available Importers

• Figma – Import components directly from Figma. Use our Auto plugin to export design tokens.
• Code – (coming soon) Import tokens and components from an existing codebase.
• NPM Package – (coming soon) Import a published design system as a dependency.

Figma Importer

Import your design system directly from Figma and integrate it into your local project.

Prerequisites

• Figma Personal Access Token
• Professional Figma Plan (or higher)

Setup

1. Generate a personal access token
   Follow these instructions from Figma.

2. Get your design system file ID
   Open your Figma file and copy the part of the URL after /design/

3. Configure environment variables

   • FIGMA_PERSONAL_TOKEN – The token from your Figma account
   • FIGMA_FILE_ID – The ID of the design file (found in the Figma URL after /design/)

4. Publish your components in Figma
   Right-click anywhere → Actions → Search for "Publish changes to library".

   (Optional) If you're using a public design system, you may need to move the file into one of your own Figma projects first.

5. Export tokens with the Auto plugin

   • Install the Auto plugin
   • Run it inside your Figma file
   • Click "Export Tokens"
   • Save the exported file inside the .context folder of your output directory

6. Run the importer

   auto import:design-system