figma-expert

figma-expert is a skill for Claude Code, Codex from RightNow-AI/openfang. It costs 22 tokens per session (705 once invoked), scanned A, original, Apache-2.0.

A guide to designing in Figma, a collaborative tool for creating interfaces and prototypes. It covers reusable components, responsive layouts, design tokens, and developer handoff.

In plain words
What is it for?
Creating component libraries, responsive interface layouts, light and dark themes, prototypes, and specifications for implementation.
Why use it?
It helps keep screens consistent as a product grows and exposes layout problems with real content. It also gives developers clearer specifications to build from.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Creating component libraries, responsive interface layouts, light and dark themes, prototypes, and specifications for implementation.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/rightnow-ai/openfang/figma-expert
About the project

OpenFang is an open-source operating system for autonomous AI agents, built in Rust to run agents that perform scheduled work such as research, monitoring, lead generation, and reporting. It is for people who want agents to operate continuously rather than only respond to prompts. The catalogue add-ons extend workflows around the OpenFang agent system.

RightNow-AI/openfang · 18,170 stars · on GitHub · openfang.sh

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add RightNow-AI/openfang --skill figma-expert
Clone the repo
git clone --depth 1 https://github.com/RightNow-AI/openfang

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for figma-expert

README.md
[![agentmods](https://agentmods.dev/badge/skills/rightnow-ai/openfang/figma-expert/github.svg)](https://agentmods.dev/skills/rightnow-ai/openfang/figma-expert)
Your own site
<a href="https://agentmods.dev/skills/rightnow-ai/openfang/figma-expert"><img src="https://agentmods.dev/badge/skills/rightnow-ai/openfang/figma-expert/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for figma-expert

Your own site · 80×15
<a href="https://agentmods.dev/skills/rightnow-ai/openfang/figma-expert"><img src="https://agentmods.dev/badge/skills/rightnow-ai/openfang/figma-expert.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 22 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 705 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00022 $0.00705
Opus 5 $0.00011 $0.00352
Sonnet 5 $0.00004 $0.00141
Haiku 4.5 $0.00002 $0.00071

Measured 10d ago against content hash 8ea757cd7eac, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

figma-expert scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

Copies of this mod

2 near-identical copies found in the catalogue:

crates/openfang-skills/bundled/figma-expert/SKILL.md · 40 lines

How it starts

The opening of the file, as written. The whole thing — 40 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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

  • Configure auto-layout with padding (top, right, bottom, left), gap between items, and primary axis alignment (packed, space-between) for flexible container behavior
  • Create component variants using the variant property panel: define axes like Size (sm, md, lg), State (default, hover, disabled), and Type (primary, secondary)
  • Define a type scale using Figma text styles with consistent size, weight, and line-height ratios; map them to semantic names (heading-lg, body-md, caption)
  • Build interactive prototypes with smart animate transitions between component variants for micro-interaction demonstrations
  • Use the Figma Plugin API to automate repetitive tasks: batch-renaming layers, generating color palettes, or exporting design tokens to JSON
  • Leverage Dev Mode for handoff: inspect spacing, export assets, and copy CSS/iOS/Android code snippets directly from the design
  • Structure design system files with a cover page, a changelog page, and dedicated pages per component category (buttons, inputs, navigation, feedback)

Read the full file on GitHub · 40 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 10d ago First seen · 40 lines · 22 tokens per session scan A 8ea757cd7eac

Subscribe to this mod's changes

figma-expert is a skill published in the GitHub repository RightNow-AI/openfang (18,170 stars, last pushed 2mo ago), licensed Apache-2.0. It adds 22 tokens to every session and 705 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

qiaomu-mondo-poster-design

An AI-assisted design tool for creating posters, book covers, album covers, and similar images in the Mondo style, known for bold colors, simple compositions, and symbolic imagery.

nexu-io/nexu · 247 tokens

architecture-diagram

Generate dark-themed SVG diagrams of software systems and cloud infrastructure as standalone HTML files with inline SVG graphics. Semantic component colors (cyan=frontend, emerald=backend, violet=database, amber=cloud/AWS, rose=security, orange=message bus), JetBrains Mono font, grid background. Best suited for…

moltis-org/moltis · 163 tokens

创建主题

A set of rules for creating or changing frontend visual themes through configuration. It covers colors, interface components, effects, backgrounds, naming, accessibility, and how preset themes are registered.

jianchen08/Agent-os-open · 83 tokens

baoyu-infographic

A toolkit for creating pictures and text banners from ordinary keyboard characters, called ASCII art. It supports local command-line tools and some free online services for text, images, and related artwork.

moltis-org/moltis · 70 tokens

excalidraw

Create hand-drawn style diagrams using Excalidraw JSON format. Generate .excalidraw files for architecture diagrams, flowcharts, sequence diagrams, concept maps, and more. Files can be opened at excalidraw.com or uploaded for shareable links.

moltis-org/moltis · 58 tokens

popular-web-designs

54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.

moltis-org/moltis · 66 tokens