Enables Claude to professionally manipulate Figma files, manage design tokens, and build complex component architectures using industry-standard mental models.
This skill provides Claude Code with the domain-specific knowledge required to interact effectively with the Figma Plugin API via MCP. It enforces critical design best practices such as prioritizing Auto Layout over manual positioning, managing atomic design systems, and ensuring proper font loading sequences to prevent errors. Whether you are building a new component library from scratch, migrating design tokens into variables, or organizing complex page structures for developer handoff, this skill ensures Claude operates with the same precision and structural integrity as a professional UI/UX designer.
主要功能
010 GitHub stars
02Atomic design implementation for scalable and maintainable UI libraries
03Design token and variable management across multiple modes and themes
04Automated Auto Layout management using Fill, Hug, and Fixed sizing properties
05Safe text node manipulation with pre-emptive font loading protocols
06Advanced component architecture orchestration including variants and property mapping
使用场景
01Generating responsive UI components and design systems directly from text-based requirements
02Refactoring legacy Figma files to utilize modern Auto Layout and component property structures
03Automating the creation and synchronization of design tokens between code and Figma
