Figma基礎

Figmaは、ブラウザベースのデザインツールです。デザイナーと開発者の協業を支援します。

なぜFigmaが必要なのか

従来のデザインツールの課題

問題のあるワークフロー:

デザイナー → Photoshop/Sketch → 画像エクスポート → 開発者
問題点:
- デザインの共有が困難
- リアルタイムでの協業ができない
- デザインの変更が追跡しにくい
- 開発者への情報伝達が不十分

Figmaの解決:

デザイナー ↔ Figma（リアルタイム共有） ↔ 開発者
メリット:
- デザインの共有が容易
- リアルタイムでの協業が可能
- デザインの変更が追跡しやすい
- 開発者への情報伝達が充実

メリット:

リアルタイム協業: 複数人での同時編集
開発者向け機能: コードの自動生成、スペーシング情報
バージョン管理: デザインの変更履歴
コンポーネントシステム: 再利用可能なデザインコンポーネント

Figmaの主要機能

1. コンポーネント

マスターコンポーネント: 再利用可能なデザイン要素
インスタンス: マスターコンポーネントのコピー
バリアント: コンポーネントのバリエーション

2. デザイントークン

カラー: ブランドカラーの定義
タイポグラフィ: フォントスタイルの定義
スペーシング: 間隔の定義

3. 開発者向け機能

コードの自動生成: CSS、Swift、Android XML
スペーシング情報: マージン、パディングの数値
アセットエクスポート: 画像、アイコンのエクスポート

開発者向けの使い方

1. デザインの確認

デザインファイルの閲覧: ブラウザで直接確認
コメント機能: デザイナーとのコミュニケーション
バージョン履歴: デザインの変更を追跡

2. スペックの確認

サイズ情報: 要素の幅、高さ、間隔
カラー情報: HEX、RGB、HSL値
フォント情報: フォントファミリー、サイズ、行間

3. アセットのエクスポート

画像のエクスポート: PNG、SVG、JPG
アイコンのエクスポート: SVG形式
バッチエクスポート: 複数アセットの一括エクスポート

実践例: デザインからコードへの変換

// Figmaから取得したデザイントークン
const designTokens = {
  colors: {
    primary: '#3b82f6',
    secondary: '#6b7280',
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
  },
  typography: {
    fontFamily: 'Inter',
    fontSize: {
      sm: 14,
      base: 16,
      lg: 18,
    },
  },
};

// デザイントークンをコードに適用
function Button({ variant = 'primary', children }) {
  const styles = {
    backgroundColor: designTokens.colors[variant],
    padding: `${designTokens.spacing.md}px ${designTokens.spacing.lg}px`,
    fontFamily: designTokens.typography.fontFamily,
    fontSize: designTokens.typography.fontSize.base,
  };

  return <button style={styles}>{children}</button>;
}

まとめ

Figmaのポイント：

リアルタイム協業: 複数人での同時編集
開発者向け機能: コードの自動生成、スペーシング情報
バージョン管理: デザインの変更履歴
コンポーネントシステム: 再利用可能なデザインコンポーネント

Figmaは、デザイナーと開発者の協業を支援する強力なツールです。