Figma Navigator

This skill provides quick access to the RegelRecht (RR) Figma design system structure and helps with Figma-related tasks.

Figma File Info

• •File Key: 5DyHMXUNVxbgH7ZjhQxPZe
• •File Name: RR-Components
• •URL: https://www.figma.com/design/5DyHMXUNVxbgH7ZjhQxPZe/RR-Components

Quick Lookup

For component IDs and structure, read the reference file:

.claude/skills/figma-navigator/reference.md

This contains all component node IDs, pages, variants, and implementation details.

Workflows

1. Find a Component's Figma ID

1. •Check reference.md for the component
2. •Use the node ID directly with the Figma MCP tool

Example:

mcp__figma-with-token__get_figma_data(fileKey: "5DyHMXUNVxbgH7ZjhQxPZe", nodeId: "20-27")

2. Get Component Details

When you need current properties, variants, or layout info:

mcp__figma-with-token__get_figma_data(
  fileKey: "5DyHMXUNVxbgH7ZjhQxPZe",
  nodeId: "<component-node-id>"
)

The MCP tool returns:

• •Component variants and their node IDs
• •Layout properties (padding, gap, sizing)
• •Text styles and colors
• •Border radius and strokes

3. Compare Figma vs Implementation

1. •Get component specs from Figma using node ID from reference.md
2. •Read the implementation file (listed in reference.md)
3. •Compare:
   • •Token usage (should match Figma variables)
   • •Sizing (min-height, padding, gap)
   • •Variants (all Figma variants should be implemented)
   • •States (disabled, focused, hover)

4. Download Component Images

For pixel comparison or assets:

mcp__figma-with-token__download_figma_images(
  fileKey: "5DyHMXUNVxbgH7ZjhQxPZe",
  nodes: [
    { nodeId: "<node-id>", fileName: "component-name.png" }
  ],
  localPath: "/path/to/save"
)

5. Find Specific Variant

Each component set contains multiple variants. The variant node IDs follow patterns:

• •Button variants: Inside component set 20:27
  • •Specific variant: style=accent-filled, size=m = 20:28
  • •Pattern: style={style}, size={size}, is-disabled={bool}

Use get_figma_data on the component set to see all variants.

Rate Limits

The Figma MCP can hit rate limits. If you get errors:

1. •Wait 60-120 seconds
2. •Use cached info from reference.md when possible
3. •Open Figma in browser as fallback

Token Hierarchy

The design system uses three token layers:

Primitives (--primitives-*)  → base values (colors, space, opacity)
Semantics (--semantics-*)    → meaningful tokens (buttons, controls, focus)
Components (--components-*)  → component-specific tokens

Always use semantic tokens when available. Only use primitives when no semantic exists.

Key Design Tokens

Controls (sizing)

• •--semantics-controls-xs-min-size: 24px
• •--semantics-controls-s-min-size: 32px
• •--semantics-controls-m-min-size: 44px

Focus Ring

• •--semantics-focus-ring-thickness: 2px
• •--semantics-focus-ring-color: #0f172a

Disabled State

• •Use calc(var(--primitives-opacity-disabled, 38) / 100) for opacity

Tips

1. •Start with reference.md - Don't search Figma from scratch
2. •Use node IDs with colons - Format is 123:456 or 123-456 (both work)
3. •Component sets vs components - Component sets (like 20:27) contain multiple variant components
4. •Check asymmetric padding - Figma sometimes uses different top/bottom padding

Storybook Integration

The project uses @minbzk/storybook web components. When implementing UI, always use these components instead of custom HTML/CSS.

Storybook Docs: https://minbzk.github.io/storybook

Available Web Components

Figma → Storybook Mapping

When converting Figma designs to code:

Components NOT in Storybook

These components don't exist in Storybook and require custom CSS:

Usage in HTML

<!-- Import web components -->
<script type="module" src="/main.js"></script>

<!-- Use components -->
<rr-button variant="accent-filled" size="m">Primary Button</rr-button>
<rr-button variant="accent-outlined" size="m">Secondary Button</rr-button>
<rr-icon-button variant="neutral-tinted" size="s">
  <svg>...</svg>
</rr-icon-button>

Installation

npm install @minbzk/storybook

Requires GITHUB_TOKEN with read:packages scope for npm registry access.