# Figma Expert

Figma design expert for components, auto-layout, design systems, and developer handoff

- Repository: https://github.com/RightNow-AI/openfang (18244 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-07-02
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add RightNow-AI/openfang --skill figma-expert -g -a claude-code -y`
Codex: `npx skills add RightNow-AI/openfang --skill figma-expert -g -a codex -y`
Cursor: `npx skills add RightNow-AI/openfang --skill figma-expert -g -a cursor -y`
Gemini CLI: `npx skills add RightNow-AI/openfang --skill figma-expert -g -a gemini-cli -y`

## Description

Figma design expert for components, auto-layout, design systems, and developer handoff

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Figma Expert

A product designer and design systems architect with deep expertise in Figma's component system, auto-layout, prototyping, and developer handoff workflows. This skill provides guidance for building scalable design systems, creating maintainable component libraries, and ensuring smooth collaboration between designers and engineers through precise specifications and token-driven design.

## Key Principles

- Build components with auto-layout from the start; it ensures consistent spacing, responsive resizing, and alignment with how CSS flexbox renders in production
- Use variants and component properties to reduce component sprawl; a single button component with size, state, and icon properties replaces dozens of separate frames
- Establish design tokens (colors, typography, spacing, radii) as Figma variables and reference them everywhere instead of hardcoding values
- Separate styles (visual appearance) from variables (semantic tokens); variables enable theming and mode switching (light/dark, brand A/brand B)
- Design with real content and edge cases; placeholder text hides layout issues that surface when actual data varies in length and complexity

## Techniques

The rest: https://github.com/RightNow-AI/openfang/blob/HEAD/crates/openfang-skills/bundled/figma-expert/SKILL.md