User DocsChangelogWebsite
User Docs
Start typing to search…

Import Design System from Figma

User Documentation

1. Overview

The Import Design System feature lets you bring your Figma design tokens into Kajoo by uploading a single JSON file. Kajoo detects supported token types, shows what’s new vs. what already exists, and guides you through mapping and review before applying changes.

Who is this for? Design/engineering teams that maintain a token-driven system and want faster, safer setup across projects.

2. Prerequisites

  • A JSON export of your design tokens (see Section 4 for guide).
  • (Recommended) Figma Token Studio plugin or equivalent to export tokens to JSON.

Tip: Validate your JSON before uploading to avoid mapping issues.

3. Supported Token Types

  • Color tokens
  • Number tokens — spacing, radius, size
  • Breakpoint tokens
  • Coming soon: Font tokens (typography)

4. Exporting from Figma (Token Studio)

  1. Open your Figma file.
  2. Use Token Studio (or your preferred token plugin) to Export tokens to JSON.
  3. Include the token sets you plan to import (colors, spacing, radius, size, breakpoints).
  4. Save the JSON file locally.


5. Step‑by‑Step Import in Kajoo

Step 1 — Upload JSON

  • Go to your desire Design System click on Import Design System dropdown
  • Upload your JSON file.
  • Kajoo validates the structure and parses supported token types.
  • You’ll see detected tokens Colors, Numbers (spacing/radius/size), and Breakpoints.


Step 2 — Color Tokens

  • Review the list of detected colors.

  • Each token shows a label: New or Existing (display-only, helps you see what will be added vs. matched).

  • Optional actions:

    • Rename color tokens.
    • Change palette (select an existing palette or create a new one).
    • Edit ID (advanced) — may impact references in your code; change only if necessary.


Step 3 — Number Tokens (spacing, radius, size)

  • Same review flow as colors.
  • Verify values, rename if needed, and edit IDs only when required.


Step 4 — Breakpoints

  • Review imported breakpoints and map them to your existing breakpoint names.
  • Resolve any name collisions or duplicates.


Step 5 — Review & Import

  • Review your list of tokens.
  • If something looks off, go Back to adjust.
  • Click Import to finalize.


6. Key Benefits (What’s in it for me?)

  • Save time: Import a complete token set in minutes—no manual one-by-one setup.
  • Stay consistent: Keep projects aligned with your Figma design system.
  • Flexible control: Rename tokens, update palettes, and (optionally) edit IDs during import.
  • Reduce errors: Built-in Review step before applying changes.
  • Scales with you: Update tokens once and propagate across your projects.

Note: “New” vs “Existing” labels are display only (not editable). They help you quickly see what Kajoo detected.

7. Editing IDs — Important Notes

  • Changing a token ID is a heavy operation that may impact your codebase and any linked components.
  • Prefer renaming display names or updating palettes before editing IDs.
  • If you must change an ID, do it during import and verify references afterwards.

8. Best Practices

  • Keep token names predictable and hierarchical (e.g., brand/primary, spacing/md).
  • Avoid editing IDs unless necessary; prefer palette updates and renames.
  • Use the Review step as your final QA before applying.
  • Consider keeping a versioned backup of your token set.
  • Align breakpoint values and names across design and code to reduce confusion.

Updated about 22 hours ago