{"enrichment":{"faq":[{"a":"Figma is a cloud-based design tool that enables you to create UI and product designs collaboratively. Figma lets you build interfaces, wireframes, and high-fidelity mockups in a shared workspace. The skill teaches you how to leverage Figma's full capabilities\u2014from sketching initial concepts to refining detailed designs\u2014while fetching design context, screenshots, and assets directly from your projects to inform development work.","q":"How to use Figma for UI and product design?"},{"a":"Figma provides real-time collaboration, allowing multiple team members to work on the same design file simultaneously. You can share projects, leave comments, assign tasks, and track changes across your team. Figma's file-sharing and version-control capabilities ensure everyone stays aligned on design decisions and project progress.","q":"What collaboration features does Figma offer for team projects?"},{"a":"Yes, Figma supports both prototyping and wireframing workflows. You can create interactive prototypes with transitions and animations, and build wireframes to map out user flows and layout structures. Figma's prototyping tools let you test interactions before handing off designs to development, ensuring your design intent translates accurately into production code.","q":"Can Figma be used for prototyping and wireframing?"},{"a":"Figma components and design systems allow you to create reusable design elements that maintain consistency across projects. You can build a library of components, define typography and color scales, and establish design tokens. This skill covers managing these systems so your team respects project conventions and accelerates design-to-code workflows.","q":"How do you build and manage design systems in Figma?"},{"a":"Figma integrates with development and design workflows through plugins, APIs, and handoff features. You can export assets, inspect code-ready specifications, and connect Figma to your development tools. This skill teaches you how to translate Figma designs into production code while maintaining alignment with your design system and project conventions.","q":"How does Figma integrate with development workflows?"},{"a":"Figma best practices include organizing files logically, using components and styles consistently, documenting design decisions, and establishing clear handoff processes. The skill covers tips for version control, file sharing, automation, and collaborative workflows that help teams work efficiently and ensure designs translate smoothly from concept to production.","q":"What are Figma best practices for design workflows?"}],"shadow_tags":["design-collaboration","ui-prototyping","vector-graphics","team-workflow","design-systems","interactive-mockups","component-library","design-handoff","collaborative-editing","design-tooling"],"summary_rewrite":"This skill teaches you how to leverage Figma for UI and product design work, including fetching design context, screenshots, and assets from your Figma projects. It covers the complete workflow for translating Figma designs into production code while respecting your project's design system and conventions."},"gist":{"api_url":"https://skillfed.io/api/skills/tech-leads-club/agent-skills/figma.json","as_of":"2026-07-24","description":"Figma helps you fetch design context, assets, and screenshots to translate UI designs into production code. npx skillfed install tech-leads-club/agent-skills/figma","install":{"manual":["git clone https://github.com/tech-leads-club/agent-skills","cp -r agent-skills ~/.claude/skills/figma"],"primary":"npx skillfed install tech-leads-club/agent-skills/figma","version":"c80c5f59"},"kind":"skill","mirror_url":"https://skillfed.io/tech-leads-club/agent-skills/figma.md","similar":[{"id":"openai/skills/figma","name":"Figma","publisher":"openai/skills","url":"https://skillfed.io/openai/skills/figma"},{"id":"PracticalSwan/agent-skills/figma","name":"figma","publisher":"PracticalSwan/agent-skills","url":"https://skillfed.io/PracticalSwan/agent-skills/figma"},{"id":"foryourhealth111-pixel/Vibe-Skills/figma-implement-design","name":"figma-implement-design","publisher":"foryourhealth111-pixel/Vibe-Skills","url":"https://skillfed.io/foryourhealth111-pixel/Vibe-Skills/figma-implement-design"},{"id":"tech-leads-club/agent-skills/figma-implement-design","name":"Figma Implement Design","publisher":"tech-leads-club/agent-skills","url":"https://skillfed.io/tech-leads-club/agent-skills/figma-implement-design"},{"id":"openai/skills/figma-create-design-system-rules","name":"Figma Create Design System Rules","publisher":"openai/skills","url":"https://skillfed.io/openai/skills/figma-create-design-system-rules"}],"title":"Figma by tech-leads-club: Learn how to use Figma for UI and product design \u2014 SkillFed","use":{"when":["Figma provides real-time collaboration, allowing multiple team members to work on the same design file simultaneously.","Yes, Figma supports both prototyping and wireframing workflows."]},"what":{"lead":"Figma helps you fetch design context, assets, and screenshots to translate UI designs into production code.","rest":"This skill teaches you how to leverage Figma for UI and product design work, including fetching design context, screenshots, and assets from your Figma projects. It covers the complete workflow for translating Figma designs into production code while respecting your project's design system and conventions."}},"id":"tech-leads-club/agent-skills/figma","install":{"mode":"external","repo":"https://github.com/tech-leads-club/agent-skills"},"links":{"html":"https://skillfed.io/tech-leads-club/agent-skills/figma","md":"https://skillfed.io/tech-leads-club/agent-skills/figma.md","repo":"https://github.com/tech-leads-club/agent-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":448,"language":"TypeScript","last_updated":"2026-07-24","license":"NOASSERTION","name":"Figma","publisher":"tech-leads-club","stars":4951},"relations":{"similar":[{"id":"letta-ai/skills/figma"},{"id":"openai/skills/figma"},{"id":"PracticalSwan/agent-skills/figma"},{"id":"foryourhealth111-pixel/Vibe-Skills/figma-implement-design"},{"id":"tech-leads-club/agent-skills/figma-implement-design"},{"id":"openai/skills/figma-create-design-system-rules"},{"id":"PracticalSwan/agent-skills/figma-implement-design"},{"id":"openai/skills/figma-implement-design"},{"id":"Aradotso/mcp-skills/figma-mcp-server"},{"id":"modu-ai/moai-adk/moai-design-tools"}]},"slug":{"owner":"tech-leads-club","repo":"agent-skills","skill":"figma"},"version":"c80c5f59"}