mcpField
F
figma-expert

figma-expert

github.com/rightnow-aiデザイン・UI18.2k109 回インストール24 週間前に更新
リポジトリ

figma-expert について

figma-expert は、Figma を使うプロダクトデザイナーやデザインシステム設計者向けのスキルです。コンポーネントライブラリ、トークンベースの設計、プロトタイプ、エンジニアへの引き継ぎを扱います。

主な機能

  1. 01オートレイアウトのコンポーネント指針
  2. 02バリアントとコンポーネントプロパティ
  3. 03Figma 変数によるデザイントークン
  4. 04インタラクティブなプロトタイプ手法
  5. 05Dev Mode での引き継ぎ
  6. 06デザインシステムファイルの整理

活用シーン

  1. 01再利用可能なコンポーネントライブラリの構築
  2. 02テーマ対応デザインシステムの作成
  3. 03コンポーネントの動作の提示
  4. 04エンジニア向け設計仕様の準備

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rightnow-ai/openfang --skill figma-expert

インストール後、Claude Code で/figma-expertを入力して読み込まれたか確認します。

詳細

Figma エキスパート

Figma のコンポーネントシステム、オートレイアウト、プロトタイピング、開発者への引き継ぎワークフローに関する深い専門知識を持つプロダクトデザイナー兼デザインシステムアーキテクトです。このスキルでは、拡張性の高いデザインシステムの構築、保守しやすいコンポーネントライブラリの作成、そして正確な仕様とトークン主導のデザインを通じたデザイナーとエンジニアのスムーズな連携についてガイダンスを提供します。

主要な原則

  • 最初からオートレイアウトでコンポーネントを構築します。これにより、一貫した間隔、レスポンシブなリサイズ、本番環境での CSS フレックスボックスの描画方法に沿った配置が実現します
  • バリアントとコンポーネントプロパティを使ってコンポーネントの乱立を抑えます。サイズ、状態、アイコンのプロパティを備えた単一のボタンコンポーネントで、個別のフレームを何十個も作る必要がなくなります
  • 色、タイポグラフィ、間隔、角丸などのデザイントークンを Figma の変数として定義し、値を直接指定する代わりに、あらゆる場所で参照します
  • スタイル（視覚的な外観）と変数（セマンティックトークン）を分けます。変数によって、テーマ設定やモードの切り替え（ライト／ダーク、ブランド A／ブランド B）が可能になります
  • 実際のコンテンツやエッジケースを使ってデザインします。プレースホルダーテキストでは、データの長さや複雑さが変わったときに表面化するレイアウトの問題が隠れてしまいます

テクニック

  • オートレイアウトでは、柔軟なコンテナ動作を実現するために、パディング（上、右、下、左）、アイテム間の間隔、主軸の配置（詰める、両端に配置）を設定します
  • バリアントプロパティパネルを使ってコンポーネントのバリアントを作成します。サイズ（sm、md、lg）、状態（デフォルト、ホバー、無効）、種類（プライマリ、セカンダリ）などの軸を定義します
  • Figma のテキストスタイルを使って、一貫したサイズ、ウェイト、行の高さの比率を持つ文字スケールを定義し、heading-lg、body-md、caption などのセマンティックな名前を割り当てます
  • コンポーネントのバリアント間にスマートアニメートのトランジションを設定し、マイクロインタラクションを示すインタラクティブなプロトタイプを作成します
  • Figma Plugin API を活用して、レイヤーの一括リネーム、カラーパレットの生成、デザイントークンの JSON へのエクスポートなど、反復的なタスクを自動化します
  • 引き継ぎには Dev Mode を活用します。デザインから間隔を確認し、アセットをエクスポートして、CSS／iOS／Android のコードスニペットを直接コピーできます
  • デザインシステムのファイルは、カバーページ、変更履歴ページ、コンポーネントカテゴリ（ボタン、入力、ナビゲーション、フィードバック）ごとの専用ページで構成します

よくあるパターン

  • アトミックデザイン構造：ライブラリをアトム（アイコン、色、タイポグラフィ）、モレキュール（入力、バッジ）、オーガニズム（カード、ヘッダー）、テンプレート（ページレイアウト）に分けて整理します
  • テーマの切り替え：Figma の変数モードを使ってライトとダークのカラーパレットを定義します。コンポーネントはセマンティック変数を参照し、モードごとに異なる値が適用されます
  • レスポンシブコンポーネント：コンテナ幅に合わせる設定と最小／最大の制約を指定したオートレイアウトを使い、個別のモバイル用バリアントを作らずに、ブレークポイントに応じて変化するコンポーネントを作成します
  • ドキュメントページ：コンポーネントのインスタンスと使用ガイドライン、良い例／悪い例、プロパティテーブルを Figma ファイルに直接埋め込み、デザイナーが自分で確認できるようにします

避けるべき落とし穴

  • 要素をフローから意図的に外す必要がある場合を除き、オートレイアウトのフレーム内で絶対位置指定を使わないでください。レスポンシブレイアウトの利点が損なわれます
  • バリアントやプロパティで対応できる用途に、単発の切り離されたインスタンスを作らないでください。切り離されたインスタンスは、元のコンポーネントが更新されると古い状態のままになります
  • レイヤーの命名や整理を省略しないでください。Dev Mode でデザインを確認するエンジニアは、デザインとコードのコンポーネントを対応づけるために、意味のあるレイヤー名を頼りにします
  • 最適化せずに、フル解像度のラスター画像を埋め込まないでください。大きなアセットは Figma ファイルのパフォーマンスを低下させ、エクスポートファイルを不必要に重くします

コメント

Markdown 対応