Where do I find my Figma File Key?

The File Key is the unique alphanumeric string found in the URL of your Figma file, located between 'file/' and the file name.

How do I authenticate the Figma skill?

You must generate a Personal Access Token in your Figma Account Settings and export it as an environment variable named FIGMA_ACCESS_TOKEN.

Does this skill help generate React components?

Absolutely. It can extract raw node data from Figma which can then be processed to generate React components styled with Tailwind CSS.

Can I export icons automatically with this skill?

Yes, the skill provides specific workflow patterns for batch exporting components as SVGs or PNGs using the Figma API.

Figma Design Integration

Name: Figma Design Integration
Author: johnlindquist

byjohnlindquist

•

Design Tools

Extracts design tokens, component specifications, and assets from Figma to automate frontend development workflows.

The Figma Design Integration skill bridges the gap between design and development by providing programmatic access to Figma files directly within your coding environment. It enables developers to extract design tokens like colors and typography, export components as SVGs, and inspect layout properties for precise implementation. By leveraging the Figma API and CLI tools, this skill automates the retrieval of design data, ensuring your code stays in sync with the design system and accelerating the conversion of visual mockups into production-ready code.

Key Features

0118 GitHub stars

02Export components and icon sets directly as SVG or PNG assets

03Automate design-to-code synchronization with custom CLI scripts

04Inspect Figma nodes for detailed CSS properties and layout specifications

05Extract design tokens including color palettes and typography styles

06Generate React and Tailwind CSS code from live Figma design data

Use Cases

01Batch exporting and optimizing icon libraries for web projects

02Syncing a design system's tokens with a frontend codebase automatically

03Generating boilerplate UI components based on precise Figma dimensions and spacing

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add johnlindquist/claude figma

For use in Claude.ai and ChatGPT

Download Skill