skills.rest
bacoco
bacocoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-expert

Guide Figma design systems with component architecture and developer handoff workflows.

Updated Mar 13, 2026
Search Tags:#components#figma#design systems#design tokens#auto-layout#developer handoff
One-click install
npx skills add https://github.com/bacoco/openfang-fork --skill figma-expert-bacoco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-expert
Source: https://github.com/bacoco/openfang-fork/tree/main/crates/openfang-skills/bundled/figma-expert
Command: npx skills add https://github.com/bacoco/openfang-fork --skill figma-expert-bacoco

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenges of creating and maintaining scalable design systems in Figma, ensuring consistency, efficiency, and smooth collaboration between design and development teams.

Core Features & Use Cases

  • Component Design: Guidance on building robust, auto-layout-driven components and leveraging variants for reduced complexity.
  • Design System Architecture: Best practices for organizing files, establishing design tokens, and implementing theming.
  • Developer Handoff: Optimizing for Dev Mode and ensuring clear specifications for engineers.
  • Use Case: A team needs to establish a new design system for a large application. This Skill provides the foundational knowledge and techniques to build a maintainable and scalable component library in Figma from the ground up.

Quick Start

Use the figma-expert skill to learn how to configure auto-layout for responsive components.

Frequently Asked Questions about figma-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a scalable design system in Figma from scratch?▼

Build a scalable design system by utilizing Figma variants, variables, and auto-layout to establish design tokens, organize files, and maintain a robust component architecture.

What is the best way to configure auto-layout for responsive Figma components?▼

Configure auto-layout for responsive components by applying padding, spacing, and alignment rules, ensuring your Figma components adapt dynamically to different content lengths and screen sizes.

How does Figma Dev Mode improve developer handoff workflows?▼

Figma Dev Mode improves developer handoff by providing engineers with clear specifications, inspectable code snippets, and component details directly within the design environment.

Can I use Figma variables and variants for design system theming?▼

Use Figma variables and variants for design system theming to manage visual states, reduce component complexity, and ensure consistent styling across large applications.

What are design tokens and how do I implement them in Figma?▼

Design tokens are visual design decisions stored as data, implemented in Figma using variables to maintain styling consistency across components and streamline developer handoff.

Related Skills

Explore More Design & Creative Skills→
Fr-e-dFr-e-d
157

architecture-extract

Analyze project directory structures to generate architectural summaries.

Community
Basic
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
BENYEKHLEF-AnouarBENYEKHLEF-Anouar

designer-ui

Generate atomic-design UI assets and HTML mockups from wireframes.

Community
Advanced