Agent skill

figma-to-tailwind

Figma MCPで取得したデザイン変数をTailwind CSS標準クラスに変換する。Figma MCPのコード生成後やデザイン実装時に自動起動。

View SKILL.md on GitHub Repository
Stars 232
Forks 15

Install this agent skill to your Project

npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/crearize/figma-to-tailwind

SKILL.md

Figma Variables → Tailwind CSS 変換スキル

このスキルは、Figma MCPで取得したデザイン変数（Variables）を、Tailwind CSS標準クラスに自動変換するためのガイドです。

いつ使用するか

以下の状況で、このスキルを自動的に適用してください：

  1. Figma MCPでデザインを取得した後

    • mcp__figma-mcp__get_design_contextやmcp__figma-mcp__get_variable_defsを実行した直後
    • Figma MCPが生成したコードにvar(--spacing-*)やvar(--width-*)などの変数が含まれている場合

  2. デザイン実装中

    • コンポーネントのスタイリング時
    • レイアウト調整時
    • Figma変数を使用しているコードを発見した場合

  3. コードレビュー時

    • px-[var(--spacing-4)]のようなFigma変数の直接使用を発見した場合
    • インラインスタイルでstyle={{ fontSize: 'var(--h4-font-size)' }}のような記述を発見した場合

変換手順

ステップ1: マッピングファイルを確認

frontend/lib/figma-tailwind-map.tsを参照して、Figma変数がTailwind標準クラスに変換可能か確認します。

typescript
import {
  spacingMap,
  widthMap,
  heightMap,
  borderRadiusMap,
  typographyMap,
  figmaVarToTailwindClass,
  isStandardTailwindClass
} from '@/lib/figma-tailwind-map'

ステップ2: 変換ルールの適用

スペーシング（spacing）

typescript
// ❌ Figma MCPが生成したコード
<div className="px-[var(--spacing-4,16px)] py-[var(--spacing-2,8px)] gap-[var(--spacing-3,12px)]">

// ✅ Tailwind標準クラスに変換
<div className="px-4 py-2 gap-3">

変換マッピング:

  • spacing/1 → 1 (4px)
  • spacing/2 → 2 (8px)
  • spacing/3 → 3 (12px)
  • spacing/4 → 4 (16px)
  • spacing/1-5 → 1.5 (6px) ※カスタム
  • spacing/2-5 → 2.5 (10px) ※カスタム

サイズ（width/height）

typescript
// ❌ Figma MCPが生成したコード
<div className="w-[var(--width-w-4,16px)] h-[var(--height-h-5,20px)]">

// ✅ Tailwind標準クラスに変換
<div className="w-4 h-5">

ボーダー半径（border-radius）

typescript
// ❌ Figma MCPが生成したコード
<div className="rounded-[var(--border-radius-rounded-md,8px)]">

// ✅ Tailwind標準クラスに変換
<div className="rounded-md">

タイポグラフィ（typography）

typescript
// ❌ Figma MCPが生成したコード（インラインスタイル）
<h1 style={{
  fontFamily: 'var(--h4-font-family)',
  fontSize: 'var(--h4-font-size)',
  fontWeight: 'var(--h4-font-weight)',
  lineHeight: 'var(--h4-line-height)',
}}>

// ✅ Tailwind標準クラスに変換
<h1 className="text-h4">

// または Tailwind標準で代用可能な場合
<p className="text-sm">  // body2と同等 (14px/20px)
<p className="text-base">  // body1と同等 (16px/24px)

実装済みのカスタムクラス:（tailwind.config.tsで定義済み）

  • text-h4: 24px/32px/bold
  • text-h5: 20px/28px/bold
  • text-title: 18px/28px/bold
  • text-body1: 16px/24px/normal
  • text-body2: 14px/20px/normal
  • text-body3: 12px/16px/normal

注意: 新規デザイン変換時は必ずFigma MCPのHEX/px値を確認し、既存クラスと比較すること。名前の類似性だけで判断しない。

ステップ3: カラーの扱い

カラーはFigma MCPから届くHEX値を確認して、適切に変換します。

typescript
// ❌ Figma独自変数の直接使用は禁止
<div className="bg-[var(--base-primary)]">
<div className="text-[var(--base-foreground)]">

// ✅ 正しい実装
// 1. まずFigmaのHEX値と既存のshadcn/ui変数を比較
//    --base-primary: #00a0e9 = --primary: #00a0e9 → 同じ色！
<div className="bg-primary text-primary-foreground">

// 2. shadcn/uiにない独自色の場合はtailwind.config.tsに追加
//    --base-dark-primary: #006cab → shadcn/uiにない
//    → tailwind.config.tsに 'dark-primary': '#006cab' を追加
<div className="text-dark-primary">

重要な原則:

  • 名前の類似性だけで判断しない - 必ずHEX値を確認する
  • Figma MCPからはHEX形式で届くので、既存のshadcn/ui変数(HSL形式)と比較
  • 同じ色なら既存の変数を使用（例: bg-primary）
  • 異なる色ならtailwind.config.tsにカスタム定義を追加

ステップ4: 標準にない値の対応

マッピングにない値を発見した場合：

  1. tailwind.config.tsに追加

    typescript
    theme: {
  extend: {
    spacing: {
      '13': '52px',  // 新しいカスタム値
    }
  }
}

  2. figma-tailwind-map.tsに追加

    typescript
    export const spacingMap: Record<string, number | string> = {
  // ... 既存のマッピング
  'spacing/13': 13,  // 新しいマッピング
}

  3. 実装で使用

    typescript
    <div className="px-13">

禁止事項

❌ Figma変数の直接使用

typescript
// 禁止
<div className="px-[var(--spacing-4)]">
<div className="gap-[var(--spacing-2,8px)]">
<div style={{ width: 'var(--width-w-4)' }}>

❌ カスタムユーティリティクラス

css
/* globals.cssに以下を追加するのは禁止 */
.w-spacing-2 {
  width: var(--spacing-2);
}

.header-base {
  height: var(--height-h-16);
}

❌ インラインスタイルの乱用

typescript
// 特別な理由がない限り禁止
<div style={{
  fontSize: 'var(--h4-font-size)',
  padding: 'var(--spacing-4)'
}}>

実装例

Before（Figma MCPが生成）

tsx
export default function Main() {
  return (
    <div className="bg-[var(--base/background-gray,#f6f8f9)] border-[var(--base/border,#edeef1)] border-b-0 border-l-[var(--border-width/border,1px)]">
      <div className="bg-[var(--base/background,#ffffff)] h-[64px] px-[var(--spacing/4,16px)] py-0">
        <div className="gap-[var(--spacing/2,8px)]">
          <div className="rounded-[var(--border-radius/rounded-md,8px)] size-[28px]">
            <Icon className="size-[16px]" />
          </div>
          <div className="gap-[var(--spacing/3,12px)]">
            <div style={{
              fontFamily: 'var(--h5-font-family)',
              fontSize: 'var(--h5-font-size)',
              fontWeight: 'var(--h5-font-weight)',
              lineHeight: 'var(--h5-line-height)',
            }}>
              サポート
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

After（Tailwind標準クラスに変換）

tsx
export default function Main() {
  return (
    <div className="bg-muted border border-l border-b-0">
      <div className="bg-background h-16 px-4 py-0">
        <div className="gap-2">
          <div className="rounded-md size-7">
            <Icon className="size-4" />
          </div>
          <div className="gap-3">
            <div className="text-h5">
              サポート
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

チェックリスト

変換時に以下を確認してください：

  • var(--spacing-*)をpx-*, py-*, gap-*等に変換
  • var(--width-*)をw-*に変換
  • var(--height-*)をh-*に変換
  • var(--border-radius-*)をrounded-*に変換
  • インラインスタイルのフォント指定をtext-*クラスに変換
  • カラーはCSS変数のまま保持
  • 標準にない値はtailwind.config.tsに追加
  • カスタムユーティリティクラスを作成していない

参照ドキュメント

  • 変換マッピング: frontend/lib/figma-tailwind-map.ts
  • Tailwind設定: frontend/tailwind.config.ts
  • 開発ガイド: documents/development/coding-rules/frontend-rules.md セクション12

注意事項

  • このスキルはFigma MCPのコード生成後に自動的に適用されるべきです
  • 変換後のコードは必ずLintとBuildチェックを行ってください
  • 疑問がある場合は、必ずfigma-tailwind-map.tsを参照してください
  • カラー定義は例外として、常にCSS変数を使用してください

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

aiskillstore/marketplace

perigon-backend

Perigon ASP.NET Core + EF Core + Aspire conventions

232 15
Explore
aiskillstore/marketplace

perigon-agent

Pointers for Copilot/agents to apply Perigon conventions

232 15
Explore
aiskillstore/marketplace

perigon-angular

Angular 21+ standalone/Material/signal conventions for Perigon WebApp

232 15
Explore
aiskillstore/marketplace

fastapi-mastery

Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.

232 15
Explore
aiskillstore/marketplace

context7-efficient

Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.

232 15
Explore
aiskillstore/marketplace

browser-use

Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.

232 15
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results