figma
Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and development workflows.
Summary
This skill integrates Claude Code with Figma, allowing you to access design files, extract component information, read design tokens, and translate designs into code.
- It bridges the gap between design and development workflows, enabling developers to work directly with design assets without leaving the coding environment.
Install & Usage
/plugin marketplace add <org/repo>Add the configuration to /plugin install figma@<marketplace>
/pluginUse Cases
Usage Examples
/figma get color tokens from file 'App Design'
/figma extract component 'Primary Button' from 'Main Components'
/figma translate frame 'Login Page' into React code
Security Audits
Frequently Asked Questions
What is figma?
This skill integrates Claude Code with Figma, allowing you to access design files, extract component information, read design tokens, and translate designs into code. It bridges the gap between design and development workflows, enabling developers to work directly with design assets without leaving the coding environment.
How to install figma?
To install figma: add a marketplace (/plugin marketplace add <org/repo>), then add the config to /plugin install figma@<marketplace>. Finally, /plugin in Claude Code.
What is figma best for?
figma is a plugin categorized under General. It is designed for: design. Created by Anthropic.
What can I use figma for?
figma is useful for: Extract all color tokens from a Figma file to use in a CSS theme.; Get the properties of a specific component, such as button variants and states.; Translate a Figma frame into a React component with styled-components.; List all text styles in a Figma document to align with a typography system.; Export SVG icons from a Figma file for use in a web app.; Compare two Figma frames to identify layout changes between design iterations..