@auto-engineer/design-system-importer

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

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

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

• 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/)

• 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.

• 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

• Run the importer

  auto import:design-system