Figma UI デザイン自動化

機能説明

このスキルは、Figma デザインのワークフローを自動化するために特化しており、以下を含みます。

• デザインシステムとコンポーネントライブラリの作成
• 自動デザイン稿生成
• デザインリソースのエクスポート
• デザイン仕様ドキュメントの生成
• Figma API 統合
• デザインからコードへの変換

使用シーン

• 「ログインページの Figma デザインを作成する」
• 「デザインシステムコンポーネントライブラリを生成する」
• 「Figma からすべてのアイコンをエクスポートする」
• 「Figma デザインを React コンポーネントに変換する」
• 「自動デザインレビュープロセス」
• 「デザイン仕様ドキュメントを生成する」

核心機能モジュール

1. デザインシステム

• カラーシステム: ブランドカラー、セマンティックカラー、ニュートラルカラーを定義
• フォントシステム: フォントファミリー、フォントサイズ、行の高さ、フォントの太さ
• スペーシングシステム: 統一されたスペーシング規則（4px、8px、16px など）
• コンポーネントライブラリ: ボタン、フォーム、カードなどの再利用可能なコンポーネント
• アイコンライブラリ: 統一されたアイコンの集合

2. ページデザイン

• レイアウトデザイン: レスポンシブレイアウト、グリッドシステム
• インタラクションデザイン: プロトタイプとインタラクションフロー
• モーションデザイン: トランジションアニメーションとマイクロインタラクション
• アダプティブデザイン: マルチプラットフォーム対応（Web、モバイル）

3. リソースエクスポート

• 画像エクスポート: PNG、JPG、SVG 形式
• アイコンエクスポート: SVG アイコンとアイコンフォント
• アセットエクスポート: @1x、@2x、@3x 倍率の画像
• スタイルエクスポート: CSS、SCSS 変数

4. デザインからコードへ

• コンポーネント生成: React、Vue、Angular コンポーネント
• スタイル生成: CSS、Tailwind、Styled Components
• コード規約: チームのコード規約に従う
• 型定義: TypeScript 型

デザインワークフロー

標準デザインフロー

1. 要件分析: 製品要件とユーザーシナリオを理解する
2. 情報アーキテクチャ: ページ構造とナビゲーションを計画する
3. ワイヤーフレーム: 低忠実度のプロトタイプを描画する
4. ビジュアルデザイン: デザインシステムを適用して高忠実度のデザインを作成する
5. インタラクションプロトタイプ: インタラクションとモーションを追加する
6. デザインレビュー: チームレビューとフィードバック
7. 開発への引き渡し: リソースと注釈をエクスポートする

コンポーネントライブラリ構築フロー

1. コンポーネント計画: 必要なコンポーネントタイプを決定する
2. デザイン仕様: コンポーネントのデザインルールを定義する
3. コンポーネントデザイン: 基本コンポーネントを作成する
4. バリアント管理: コンポーネントの異なる状態を定義する
5. ドキュメント作成: 使用説明と例
6. 公開と更新: バージョン管理と更新ログ

ベストプラクティス

デザイン仕様

• 命名規則: 明確なレイヤー名を使用する
• 組織構造: 合理的なページとレイヤーの組織
• コンポーネント化: コンポーネントの再利用を最大化する
• 自動レイアウト: Auto Layout を使用して効率を向上させる
• 制約設定: レスポンシブ制約を正しく設定する

コラボレーション仕様

• ファイル整理: プロジェクト、ページ、コンポーネントを明確に分類する
• バージョン管理: Figma バージョン履歴を使用する
• コメントフィードバック: コメント機能を使用してコミュニケーションする
• 権限管理: 表示および編集権限を適切に設定する
• チームライブラリ: デザインシステムとコンポーネントを共有する

パフォーマンス最適化

• レイヤー最適化: 不要なレイヤーを減らす
• エフェクト使用: 影とぼかしの使用は慎重に行う
• 画像最適化: 大きな画像を圧縮する
• コンポーネントインスタンス: コンポーネントをコピーするのではなく、コンポーネントインスタンスを使用する

デザインシステムの例

カラーシステム

const colors = {
  // 品牌色
  primary: {
    50: '#E3F2FD',
    100: '#BBDEFB',
    500: '#2196F3',  // 主色
    700: '#1976D2',
    900: '#0D47A1'
  },
  // 功能色
  success: '#4CAF50',
  warning: '#FF9800',
  error: '#F44336',
  info: '#2196F3',
  // 中性色
  gray: {
    50: '#FAFAFA',
    100: '#F5F5F5',
    500: '#9E9E9E',
    900: '#212121'
  }
};

フォントシステム

const typography = {
  fontFamily: {
    sans: 'Inter, system-ui, sans-serif',
    mono: 'Fira Code, monospace'
  },
  fontSize: {
    xs: '12px',
    sm: '14px',
    base: '16px',
    lg: '18px',
    xl: '20px',
    '2xl': '24px',
    '3xl': '30px',
    '4xl': '36px'
  },
  fontWeight: {
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700
  },
  lineHeight: {
    tight: 1.25,
    normal: 1.5,
    relaxed: 1.75
  }
};

スペーシングシステム

const spacing = {
  0: '0',
  1: '4px',
  2: '8px',
  3: '12px',
  4: '16px',
  5: '20px',
  6: '24px',
  8: '32px',
  10: '40px',
  12: '48px',
  16: '64px',
  20: '80px'
};

Figma API 使用

ファイル内容の取得

const response = await fetch(
  'https://api.figma.com/v1/files/FILE_KEY',
  {
    headers: {
      'X-Figma-Token': 'YOUR_TOKEN'
    }
  }
);
const data = await response.json();

画像のエクスポート

const response = await fetch(
  'https://api.figma.com/v1/images/FILE_KEY?ids=NODE_ID&format=png&scale=2',
  {
    headers: {
      'X-Figma-Token': 'YOUR_TOKEN'
    }
  }
);
const { images } = await response.json();

スタイルの取得

const response = await fetch(
  'https://api.figma.com/v1/files/FILE_KEY/styles',
  {
    headers: {
      'X-Figma-Token': 'YOUR_TOKEN'
    }
  }
);
const { meta } = await response.json();

デザインからコードへの変換

React コンポーネント生成

// Figma デザインから生成されたボタンコンポーネント
import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  padding: 12px 24px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background: #1976D2;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
  }

  &:active {
    transform: translateY(0);
  }

  &:disabled {
    background: #BDBDBD;
    cursor: not-allowed;
  }
`;

export const Button = ({ children, ...props }) => {
  return <StyledButton {...props}>{children}</StyledButton>;
};

CSS 変数生成

:root {
  /* Colors */
  --color-primary: #2196F3;
  --color-primary-dark: #1976D2;
  --color-success: #4CAF50;
  --color-error: #F44336;

  /* Typography */
  --font-sans: Inter, system-ui, sans-serif;
  --font-size-base: 16px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-4: 16px;
  --spacing-8: 32px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

常用プラグインおすすめ

デザイン効率

• Autoflow: 自動でフローチャートの線を作成
• Content Reel: テキストと画像をすばやく入力
• Unsplash: 無料の高品質画像
• Iconify: 大量のアイコンライブラリ

開発コラボレーション

• Figma to Code: デザインからコードへ
• Anima: React/Vue コードをエクスポート
• Zeplin: デザイン注釈とアセット
• Avocode: デザインデリバリープラットフォーム

デザインシステム

• Design System Manager: デザインシステムを管理
• Stark: アクセシビリティデザインチェック
• Contrast: コントラストチェック

統合シーン

1. 自動デザインレビュー

• デザイン仕様の遵守状況をチェック
• 色とフォントの使用を検証
• コンポーネントの一貫性をチェック
• レビューレポートを生成

2. デザインリソースの同期

• デザインリソースを自動的にエクスポート
• コードリポジトリに同期
• コンポーネントライブラリを更新
• 開発チームに通知

3. デザインドキュメントの生成

• デザイン仕様を抽出
• コンポーネントドキュメントを生成
• 使用ガイドを作成
• ドキュメントサイトに公開

4. プロトタイプテスト

• インタラクティブなプロトタイプを生成
• ユーザーフィードバックを収集
• インタラクションデータを分析
• デザイン案を反復

注意事項

• デザインファイルを整理整頓する
• 未使用のコンポーネントとスタイルを定期的にクリーンアップする
• バージョン管理を使用して重要な変更を管理する
• 開発チームと緊密に連携する
• アクセシビリティデザインの原則に従う
• パフォーマンスと読み込み速度を考慮する