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
Install
RightNow-AI/openfang/figma-expert · repository language: Rust
git clone https://github.com/RightNow-AI/openfang
cp -r openfang/crates/openfang-skills/bundled/figma-expert ~/.claude/skills/figma-expertFrequently 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)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
crates/openfang-skills/bundled/figma-expert/SKILL.md