skills.rest
timi-ty
timi-tyCOMMUNITY
Explore all skills by this author →
Website𝕏@glasses_0_0_manGitHub

figma

Connects AI coding agents to the Figma REST API for querying design specs and exporting assets.

Updated Mar 6, 2026
Search Tags:#frontend#css#figma#rest api#design to code#ui implementation#design specs
One-click install
npx skills add https://github.com/timi-ty/agent-forge --skill figma-timi-ty
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/timi-ty/agent-forge/tree/main/skills/figma
Command: npx skills add https://github.com/timi-ty/agent-forge --skill figma-timi-ty

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Frontend developers constantly switch between Figma and their editor to check colors, spacing, and layout values. This Skill links a Figma file to your project so the AI agent fetches exact design specs directly through the Figma REST API, eliminating manual inspection and guesswork during UI implementation. ## Core Features & Use Cases - Credential Provisioning: Validates and stores your Figma Personal Access Token, then links a file or team to the project via CLAUDE.md. - Design Spec Queries: Browse pages, frames, and nodes to get CSS-ready properties including flex layout, typography, fills, strokes, shadows, and border radius. - Asset Export: Download any node as PNG or SVG at configurable scale for icons and images. - Use Case: While implementing a billing page, the agent queries the linked Figma file, finds the matching frame, extracts exact padding, font sizes, and hex colors, then writes code that matches the design while following the codebase's existing component patterns. ## Quick Start Ask your agent to set up Figma for this project and paste your Figma file URL when prompted.

Frequently Asked Questions about figma

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I connect Figma to my AI coding agent?▼

Run the setup flow by asking the agent to set up Figma, then provide a Personal Access Token with File content and File metadata read scopes. Paste a Figma file or team URL, and the file key is written to your project's CLAUDE.md.

How to get CSS values from a Figma design programmatically?▼

Use the query helper's node command with a node ID to receive simplified design specs. Output includes flex layout, padding, gap, fonts, hex colors, gradients, box-shadows, and border radius as CSS-ready properties instead of raw Figma API JSON.

Does this Figma integration work with Claude Code and Cursor?▼

Yes, the skill supports both Cursor and Claude Code. It detects the host platform and resolves the appropriate skill install path, using the same ~/.figma/.env credentials file and query helper in both environments.

Why am I getting Figma API rate limit errors?▼

Figma rate limits hit hardest on Starter-plan workspaces where files sit in Drafts. The helper retries 429 responses with exponential backoff up to 3 times, but fails fast if the required wait exceeds 60 seconds. Move the file to a Professional team project.

Can I export images and icons from Figma via the API?▼

Yes, the download-image command exports any node as PNG or SVG at a configurable scale, defaulting to 2x PNG. It fetches a pre-signed URL from the Figma images endpoint and writes the file to your specified local path.

Related Skills

Explore More Software Engineering Skills→
AradotsoAradotso
3

figma-flutter-mcp-design-to-code

Extract Figma design tokens, components, and screens into structured Flutter guidance.

Official
Intermediate
Chinmay-23-cpuChinmay-23-cpu

design-taste-skill-pack

Select and apply predefined UI styles across frontend projects.

Community
Advanced
kaneshinkaneshin

UI Development Workflow

Build UI components matching design mocks with Playwright visual validation.

Community
Advanced
ChatAndBuildChatAndBuild
1

figma-create-design-system-rules

Generate custom design system rules for Figma projects via the Figma MCP server.

Official
Advanced