What is the figma-expert skill?
The figma-expert skill is a single SKILL.md bundled with OpenFang. It frames an AI coding agent as a product designer and design systems architect, with principles on auto-layout, variants, variables and styles, plus handoff techniques, four patterns and four pitfalls. It reads Figma guidance only and calls no Figma tools.
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 | shRun 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.
Bring up the agent OS
Run
openfang init, thenopenfang start. The README says the dashboard runs on port 4200 once the daemon is up.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.
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.
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
What is the figma-expert skill?
It is a short SKILL.md in the RightNow-AI/openfang repository. It briefs an AI coding agent as a product designer and design systems architect, covering auto-layout, variants, variables, type scales, prototyping, the Plugin API and Dev Mode handoff.
Does the skill connect to my Figma file?
No. The SKILL.md is written guidance, with no scripts or tool configuration, so it cannot read or edit a file. For live file access you need a separate Figma connection. This page does not cover any particular connector or its setup.
How do I install the figma-expert skill?
The README installs OpenFang with a curl command and says skills are compiled into the binary. To use only this skill, clone the repository and copy the figma-expert folder from crates/openfang-skills/bundled into your agent's skill location.
How does the skill suggest organizing a Figma library?
It suggests atoms, molecules, organisms and templates, plus a cover page, a changelog page and one page per component category such as buttons, inputs, navigation and feedback. Documentation pages hold usage guidance, do and don't examples and property tables.
What does it say about variables and styles?
Keep them separate. Styles describe visual appearance, while variables hold semantic tokens and enable modes such as light and dark. Components should reference variables everywhere instead of hardcoded values, so a mode switch resolves automatically.
Which AI agents can use the figma-expert skill?
The skill is written for OpenFang, which injects SKILL.md content at runtime. The repository lists no other supported agents. Claude Code, Cursor or Codex may load a copied folder if they accept skills, so confirm in their documentation.
What license does the repository use?
GitHub lists the openfang repository as Apache-2.0, while the README badge and comparison table say MIT. This page follows the GitHub metadata. Check the LICENSE file in the repository before you reuse the skill in your own project.