{"enrichment":{"faq":[{"a":"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.","q":"What are figma design system best practices?"},{"a":"Figma Expert guides you through component creation by starting with base components\u2014atomic 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.","q":"How do you build components in Figma?"},{"a":"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.","q":"How can I improve designer-to-engineer collaboration through Dev Mode?"},{"a":"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.","q":"What is figma theme switching with light and dark modes?"},{"a":"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.","q":"How do you set up a scalable design system in Figma?"},{"a":"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\u2014developers see all options in one place. Use component properties alongside variants to enable dynamic switching and ensure consistency across your design system.","q":"What are figma component variants and how do they work?"}],"shadow_tags":["component-architecture","design-tokens","responsive-layout","handoff-workflow","design-system-ops","figma-automation","theme-management","documentation-patterns"],"summary_rewrite":"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."},"files":[{"bytes":3712,"path":"crates/openfang-skills/bundled/figma-expert/SKILL.md","sha256":"8ea757cd7eac5a4bfb0594497597a42fdcf15c01809995199ef013ea7fec8858","url":"https://skillfed.io/files/RightNow-AI/openfang/figma-expert/eb393111/SKILL.md"}],"id":"RightNow-AI/openfang/figma-expert","links":{"html":"https://skillfed.io/RightNow-AI/openfang/figma-expert","md":"https://skillfed.io/RightNow-AI/openfang/figma-expert.md","repo":"https://github.com/RightNow-AI/openfang"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":2283,"language":"Rust","last_updated":"2026-07-02","license":"Apache-2.0","name":"figma-expert","publisher":"RightNow-AI","stars":18065},"relations":{"similar":[{"id":"Orkas-AI/Orkas/ui-design-source"},{"id":"Adityaraj0421/naksha-studio/design"},{"id":"Mindrally/skills/figma-integration"},{"id":"iress/design-system/figma-to-ids"},{"id":"zhaono1/agent-playbook/figma-designer"},{"id":"josavicentevw/ai-agent-skills/ux-ui-design"},{"id":"yonatangross/orchestkit/figma-design-handoff"},{"id":"manutej/luxor-claude-marketplace/figma-design"},{"id":"awdr74100/figwright/figma-codegen"},{"id":"webflow/webflow-skills/figma-to-webflow"}]},"slug":{"owner":"RightNow-AI","repo":"openfang","skill":"figma-expert"},"version":"eb393111"}