Figma Expert Skill: Components, Variables and Dev Mode Handoff

What is the figma-expert skill?

A single button component with size, state and icon properties should replace dozens of separate frames. That example from the SKILL.md captures its approach: fewer, smarter components, built with auto-layout and driven by variables.

It is one of the 60 bundled skills in OpenFang, an open source agent operating system. The skill is a prose briefing in one file. It contains guidance and no scripts, and it does not connect to Figma by itself.

Principles it sets out

• Build with auto-layout from the start so spacing and resizing mirror CSS flexbox.
• Use variants and component properties to prevent component sprawl.
• Store colors, type, spacing and radii as Figma variables, never hardcoded values.
• Keep styles for appearance and variables for semantic tokens and modes.
• Design with real content and edge cases, not placeholder text.

Techniques for components and handoff

• Auto-layout with padding, gap and primary axis alignment such as packed or space-between.
• Variant axes like Size (sm, md, lg), State (default, hover, disabled) and Type (primary, secondary).
• Text styles mapped to names such as heading-lg, body-md and caption.
• Smart animate between variants for micro-interaction demos.
• The Plugin API for batch renaming, palette generation and token export to JSON.
• Dev Mode for inspecting spacing, exporting assets and copying CSS, iOS or Android snippets.

Library structure and what to avoid

It recommends a cover page, a changelog page and one page per component category. It cautions against absolute positioning inside auto-layout, detached one-off instances, unnamed layers and unoptimized full resolution rasters that slow the file.

Who the figma-expert skill is for

Best for

• Designers and developers who want an agent to review or plan a Figma component library.
• Teams preparing handoff. For deeper handoff checks, see design-handoff.
• Token work that starts in Figma. See design-token for the code side.

Not for

• Editing a Figma file directly. The skill supplies guidance only, with no tool access.
• Turning designs into code. For that, see figma-implement-design.

Use it with UiChemy

UiChemy Figma to WordPress turns a Figma design into an editable WordPress page, so a tidy design file is a good starting point. Prepare the design with the habits here, then convert it. Click Get Started on uichemy.com. To script the library, see figma-generate-library.

How to install Figma Expert Skill: Components, Variables and Dev Mode Handoff

curl -fsSL https://openfang.sh/install | sh

1. Run the OpenFang installer

   Use the command above from the README. The README describes OpenFang as a single binary and lists 60 bundled skills in its skills crate, where figma-expert sits. Windows gets a PowerShell variant.

2. Bring up the agent OS

   Run openfang init, then openfang start. The README says the dashboard runs on port 4200 once the daemon is up.

3. Alternative: copy the skill

   For another agent, clone the repository and copy crates/openfang-skills/bundled/figma-expert into that agent's skill location. The README does not name an agent folder.

4. Pose a design question

   Describe a component, such as a button with size and state, and ask the agent to plan it using the figma-expert skill.

Check that it loaded

Ask the agent how to structure a button component. It should answer with auto-layout, Size and State variant axes and variables for color rather than separate frames or hardcoded values.

Read the official instructions on GitHub

Key features

• Auto-layout firstComponents start with auto-layout padding, gap and axis alignment, which keeps spacing consistent and mirrors how flexbox renders in production.
• Variants and propertiesOne component with Size, State and Type axes replaces many frames, which limits sprawl in a growing library.
• Variables as tokensColors, type, spacing and radii live as Figma variables, and styles stay separate from semantic tokens.
• Mode switchingVariable modes define light and dark sets, or brand A and brand B, and components resolve the right values per mode.
• Type scaleText styles share consistent size, weight and line-height ratios and map to semantic names such as heading-lg.
• Prototype basicsSmart animate between component variants demonstrates micro-interactions without building separate screens.
• Plugin API ideasScripts can batch rename layers, generate color palettes or export design tokens to JSON for repetitive work.
• Dev Mode handoffEngineers inspect spacing, export assets and copy CSS, iOS or Android snippets straight from the design.
• Atomic structureThe library is organized into atoms, molecules, organisms and templates, with documentation pages showing do and don't examples.
• Pitfall warningsSkip absolute positioning in auto-layout, detached instances, unnamed layers and heavy unoptimized images.

Frequently asked questions