skills.rest
gautam-lulla
gautam-lullaCOMMUNITY
Explore all skills by this author →
GitHub

figma-to-code

Convert Figma designs into Next.js websites with a headless CMS.

Updated Jan 22, 2026
Search Tags:#automation#graphql#figma#nextjs#component-generation#cms#design-to-code
One-click install
npx skills add https://github.com/gautam-lulla/claude-skills --skill figma-to-code-gautam-lulla
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-code
Source: https://github.com/gautam-lulla/claude-skills/tree/main/f2c
Command: npx skills add https://github.com/gautam-lulla/claude-skills --skill figma-to-code-gautam-lulla

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates turning Figma designs into production-ready Next.js websites powered by a headless CMS. It eliminates manual handoffs and ensures zero hardcoded content by extracting design tokens, scaffolding content models, generating components, migrating assets to a CDN, and orchestrating a full build pipeline from design to deployment.

Core Features & Use Cases

  • Design extraction: pull exact colors, typography, spacing, and tokens from Figma.
  • CMS integration: generate content types, populate global and component content, and enable inline editing.
  • Component generation: build typed React components with CMS data attributes that render dynamic content.
  • Asset migration: export images and upload to CDN, ensuring stable asset URLs.
  • End-to-end workflows: drive 14-phase build (phase 1 through deployment) from design to production.
  • Use case: a team wants to convert a Figma design into a CMS-backed Next.js site with zero hardcoding and real-time inline editing.

Quick Start

Start by saving your project configuration, then run the f2c skill to auto-discover pages, components, and start the 14-phase build. Follow prompts to authenticate with your CMS, connect Figma, and begin the pipeline.

Frequently Asked Questions about figma-to-code

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

FAQPage Schema
How do I convert Figma designs into production-ready Next.js components?▼

You can automate Figma to Next.js conversion by running a 14-phase build pipeline that extracts design tokens, generates typed React components, and migrates assets to a CDN.

How does design-to-code automation handle CMS content generation?▼

Design-to-code automation generates flat CMS content types from Figma files and populates them with component data, enforcing a zero-hardcoded-content rule using inline editor attributes.

Does Figma to Next.js automation work with a GraphQL headless CMS?▼

Yes, Figma to Next.js automation integrates with a GraphQL-backed headless CMS to retrieve and update content, ensuring dynamic rendering without hardcoded values.

Can I migrate Figma assets to a CDN during component generation?▼

Yes, you can migrate Figma assets to a CDN during the build pipeline, which exports images and uploads them to ensure stable asset URLs for the generated Next.js site.

What is the best way to extract design tokens from Figma for a Next.js site?▼

The best way to extract design tokens from Figma is using an automated skill that pulls exact colors, typography, and spacing, then scaffolds typed React components with zero hardcoded content.

Why does Figma to code automation enforce a zero hardcoded content rule?▼

Figma to code automation enforces a zero hardcoded content rule to ensure all text and media are managed via a flat CMS data model, enabling real-time inline editing and seamless GraphQL content updates.

Related Skills

Explore More Software Engineering Skills→
EstomEstom

figma-implement-design

Translate Figma designs into frontend code with visual parity.

Community
Advanced
8400084000

verify

Verifies and debugs web-editor sandbox apps in a Next.js monorepo.

Official
Advanced
RepairYourTechRepairYourTech
6

payload-cms

Develop headless CMS projects with Payload CMS using TypeScript.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

screenshot-intake

Convert website screenshots or live URLs into structured build specifications.

Official
Advanced