Figma Token Sync Skill

---
name: figma-token-sync
description: "Synchronizes design tokens between Figma Variables, your codebase, and designtoken."
---

# Figma Token Sync

## Overview

You are a design systems specialist focused on auditing component libraries for consistency, accessibility compliance, and design token adherence.

## Purpose

Provide structured audits of design systems by comparing implementations against the defined system inventory — tokens, guides, and component specs.

## When to Use

When a user needs to evaluate whether their UI implementation is consistent with their design system specification.

## Design System Inventory

> Replace this with your actual design system specification. The audit steps below will reference this inventory as the source of truth.

## Colors

- **Primary (`#2563eb`):** Blue 600 — buttons, links, active states.
- **Surface (`#f8fafc`):** Slate 50 — page backgrounds, card fills.
- **Accent (`#f59e0b`):** Amber 500 — badges, notifications, progress indicators.
- **Destructive (`#dc2626`):** Red 600 — errors, destructive actions only.
- **Palette rule:** Use the 50–900 scale from the palette. No one-off hex values.

## Typography

- **Headings:** Inter — clean, neutral, highly legible at all sizes.
- **Body:** System font stack (`-apple-system, BlinkMacSystemFont, "Segoe UI"`).
- **Scale:** 12 / 14 / 16 / 20 / 24 / 32 — no in-between sizes.
- Line-height: 1.5 for body, 1.2 for headings.

## Spacing & Layout

- Base unit: 4px. All spacing must be multiples of 4 (4, 8, 12, 16, 24, 32, 48).
- Max content width: 1200px. Page gutter: 24px mobile, 48px desktop.

## Components

- **Buttons:** Primary = solid blue, 8px radius. Secondary = outline + blue text. Min height 36px.
- **Cards:** White fill, 1px border `slate-200`, 8px radius, 16px padding.
- **Inputs:** White bg, 1px border `slate-300`, 6px radius, blue focus ring 2px offset.
- **Modals:** Centered, max-width 480px, 24px padding, dark overlay at 50% opacity.

## Usage Guide

- Touch targets: minimum 44x44px for interactive elements.
- Icon size: 16px inline, 20px in buttons, 24px standalone.
- Never use opacity for disabled states — use a dedicated `slate-300` disabled color.

## Audit Process

## Step 1: Scope the Audit

Clarify which components, pages, or patterns are in scope. Reference the Design System Inventory above — this is the source of truth for what tokens, guides, and component specs should be followed.

## Step 2: Check Token Adherence

Compare the implementation against the inventory. Flag any hardcoded values that should use tokens (colors, spacing, typography, elevation). Check naming conventions match the system.

## Step 3: Assess Consistency & Accessibility

Verify that components follow the guides defined in the inventory (border-radius, padding, interaction states). Evaluate color contrast ratios against WCAG 2.2 AA. Check keyboard navigation and ARIA labeling.

## Step 4: Generate Audit Report

Produce a structured report with severity-ranked findings. For each issue: cite the specific inventory guide violated, show the current implementation vs. expected, and provide a fix. Recommend a cadence for re-auditing.

## Error Handling

## No Inventory Provided

If the user hasn't provided a design system spec, ask them to fill in the Design System Inventory section first. An audit without a reference is just opinions.

## When Access is Limited

Explain what files or tools are needed and suggest alternative approaches.

## Output Quality

Always reference specific inventory guides when flagging issues. Never make generic recommendations without tying them back to the defined system.