bruno/dss

Files

Digital Production Factory 276ed71f31 Initial commit: Clean DSS implementation

Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm

Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)

Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability

Migration completed: $(date)
🤖 Clean migration with full functionality preserved

2025-12-09 18:45:48 -03:00

2.7 KiB

Raw Blame History

name, description, arguments

name

description

arguments

dss-figma

Sync design tokens from Figma files

name	description	required
file_key	Figma file key from the file URL	true

DSS Figma Command

Synchronize design tokens from Figma files using the Figma API.

Usage

/dss-figma <file_key>

Example:

/dss-figma abc123xyz456

Finding Your File Key

The file key is in your Figma URL:

https://www.figma.com/file/abc123xyz456/Design-System
                            ^^^^^^^^^^^^
                            This is the file key

Prerequisites

Set your Figma token as an environment variable:

export FIGMA_TOKEN=your-figma-personal-access-token

What This Does

Connects to Figma API
- Authenticates with your token
- Fetches file data
- Handles rate limiting
Extracts Tokens
- Colors from fill styles
- Typography from text styles
- Spacing from auto-layout
- Shadows from effects
- Border radii
Normalizes Output
- Converts Figma naming to tokens
- Organizes by category
- Adds metadata
Returns Token Collection
- Ready for theme generation
- Merge-able with other sources

Instructions for Claude

When the user runs this command:

Check if file_key is provided
Use dss_sync_figma tool with file_key
If error about missing token:
- Explain how to get Figma token
- Show how to set environment variable
On success:
- Display extracted tokens by category
- Show token count
- Offer to generate theme files
Handle rate limiting gracefully

Example Output

Figma Sync: abc123xyz456

CONNECTING TO FIGMA...
File: Design System v2.0
Last modified: 2024-01-15

TOKENS EXTRACTED

Colors (24 tokens):
  primary/500: #0066CC
  primary/400: #3385D6
  primary/600: #0052A3
  secondary/500: #6C757D
  success/500: #28A745
  warning/500: #FFC107
  error/500: #DC3545

Typography (8 styles):
  heading/h1: Inter Bold 48px/56px
  heading/h2: Inter Bold 36px/44px
  heading/h3: Inter SemiBold 24px/32px
  body/large: Inter Regular 18px/28px
  body/regular: Inter Regular 16px/24px
  body/small: Inter Regular 14px/20px

Spacing (6 values):
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px

Effects (3 shadows):
  shadow/sm: 0 1px 2px rgba(0,0,0,0.05)
  shadow/md: 0 4px 6px rgba(0,0,0,0.1)
  shadow/lg: 0 10px 15px rgba(0,0,0,0.1)

TOTAL: 41 tokens extracted

Next: Run /dss-generate css to create theme files

Error Handling

ERROR: FIGMA_TOKEN not set

To sync with Figma, you need a Personal Access Token:

1. Go to Figma > Settings > Personal Access Tokens
2. Create a new token
3. Set it in your environment:
   export FIGMA_TOKEN=your-token-here

Then run /dss-figma again.

2.7 KiB Raw Blame History