figma-expert
Figma Expert teaches you to architect maintainable design systems through component best practices, auto-layout configuration, and design tokens. Learn how to structure libraries atomically, implement theme switching with variables, and streamline handoff to developers using Dev Mode and precise specifications.
Figma Expert guides you through building scalable design systems using components, auto-layout, and developer handoff best practices.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-02
Figma Expert guides you through building scalable design systems using components, auto-layout, and developer handoff best practices. Figma Expert teaches you to architect maintainable design systems through component best practices, auto-layout configuration, and design tokens. Learn how to structure libraries atomically, implement theme switching with variables, and streamline handoff to developers using Dev Mode and precise specifications.
Use it when
- Figma Expert guides you through component creation by starting with base components—atomic building blocks like buttons, inputs, and icons.
- Figma Expert teaches you to use Dev Mode for precise handoff workflows: enable Dev Mode to give engineers read-only access.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
RightNow-AI/openfang/figma-expert · repository language: Rust
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are figma design system best practices?
Figma Expert covers foundational practices for building maintainable design systems: organize components hierarchically using atomic design principles, establish clear naming conventions for layers and components, implement auto-layout for responsive scaling, and document your system thoroughly. Use design tokens and variables to centralize decisions around spacing, typography, and color, enabling consistent theming and mode switching across your library.
How do you build components in Figma?
Figma Expert guides you through component creation by starting with base components—atomic building blocks like buttons, inputs, and icons. Use auto-layout to define flexible sizing and spacing rules. Create component variants to handle different states (hover, active, disabled) and properties (size, color, icon). Structure instances hierarchically so changes to main components propagate automatically, reducing maintenance overhead and keeping your design system synchronized.
How can I improve designer-to-engineer collaboration through Dev Mode?
Figma Expert teaches you to use Dev Mode for precise handoff workflows: enable Dev Mode to give engineers read-only access to specifications, measurements, and code snippets without design file editing. Organize components with clear naming and documentation so developers can self-serve. Use design tokens and variables to communicate theming logic, and leverage Figma's inspection tools to surface exact spacing, typography, and color values automatically.
What is figma theme switching with light and dark modes?
Figma Expert explains theme switching by using design tokens and variables to define color palettes for each mode. Create variable sets for light and dark themes, then bind component properties to these variables. When you switch modes in Figma, all instances automatically reflect the new palette. This approach lets you preview both themes instantly and ensures developers receive consistent token mappings for implementation.
How do you set up a scalable design system in Figma?
Figma Expert covers scalable system setup through layered organization: start with atomic components (buttons, inputs), combine them into molecules (form fields, cards), then compose pages and templates. Use auto-layout and constraints for responsive behavior. Implement design tokens for typography, spacing, and color. Structure your Figma file with clear naming, separate library files by domain, and use Dev Mode to enable team self-service and reduce bottlenecks.
What are figma component variants and how do they work?
Figma Expert teaches component variants as a way to consolidate related states and options into a single main component. Define variant properties (e.g., size, state, color) and create instances for each combination. Variants reduce file clutter, make updates faster, and simplify handoff—developers see all options in one place. Use component properties alongside variants to enable dynamic switching and ensure consistency across your design system.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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
(truncated - see the full file via the links below)
File tree — 1 file
crates/openfang-skills/bundled/figma-expert/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build and maintain scalable design systems with Figma components and auto-layout”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill provides a structured approach to translating Figma designs into production code, covering component extraction, design token mapping, and asset handling. It includes MCP server setup for direct Figma access and quality assurance practices to keep designs and code synchronized throughout development.
Figma Designer transforms design files into comprehensive product requirements by extracting design tokens, component specifications, and layout details. It analyzes Figma projects through MCP server integration and generates structured documentation including color palettes, typography systems, spacing scales, and component props ready for development.
This skill bridges design and development by automating the Figma-to-code pipeline. It covers extracting design tokens from Figma Variables, mapping Auto Layout to CSS Flexbox/Grid, documenting component specifications, and validating production UI against Figma designs using visual regression.
Figma Design equips you with plugin development capabilities, component systems, auto layout controls, and design token management based on the official Figma Plugin API. Automate repetitive design tasks, create responsive frames with constraints, build interactive prototypes, and integrate Figma workflows into agent-based systems.
This skill provides expert guidance on managing Jira projects end-to-end, from structuring issues hierarchically to planning sprints based on team velocity. It covers workflow setup, JQL querying for reporting, and best practices for keeping backlogs groomed and teams aligned on deliverables.
This skill connects to your Figma file via the REST API to map its structure—pages, screens, components, instances, and design tokens—into an interactive knowledge graph. The result appears as a searchable, explorable dashboard within your existing environment.