Skip to content
Get packs

Figma Expert

Guides an agent to design Figma components, auto-layout, tokens and developer handoff

Source Download skill
Repository
RightNow-AI/openfang
Stars
18,243
Licence
Apache-2.0
Files
1 file

What it does

This is a set of written design guidelines that tells an AI agent to think like a product designer and design systems architect when working on Figma files. Once installed, the agent gives advice and structures its work around auto-layout, reusable component variants, design tokens stored as Figma variables, and clean handoff to engineers. It contains no code to run; it only shapes the agent's guidance.

Great for

  • Product designers building or cleaning up a Figma component library
  • Design system owners who want consistent variants, tokens and naming
  • Designers preparing files for developer handoff in Dev Mode

Skip it if

  • People who need the agent to actually edit a Figma file: the skill only provides guidance and does not connect to Figma, so it cannot make changes by itself
  • Anyone expecting Figma Plugin API code to be generated and run automatically; the file only mentions the API in passing

Try asking

  • “Help me restructure my button component with size, state and icon variants”
  • “Set up light and dark theme modes using Figma variables for my design system”
  • “Review my Figma file for layer naming and auto-layout issues before handoff”
  • “Outline a Figma page structure for a new component library with a changelog page”
Step-by-step guide: how to use Figma ExpertInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the Apache-2.0 licence and an attribution note.

    figma-expert.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip figma-expert.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip figma-expert.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent a description of your existing file or component so it can tailor advice rather than giving generic principles.
  • Ask for specific outputs such as a variant axis table or a token naming scheme, which the guidance is well suited to producing.
  • Verify any specific Figma menu locations or API calls yourself, since the skill text does not include version-specific details.

What's inside

  • SKILL.md

Redistributed unmodified from RightNow-AI/openfang under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.