figma-spacing-system について
figma-spacing-systemは、Figmaのスペーシングとレイアウトのトークン体系を作るデザインスキルです。一貫した尺度、レスポンシブグリッド、コンポーネント規則、Figmaでの実装手順を扱います。
主な機能
- 014pxまたは8pxを基準とするスペーシング尺度
- 02モバイル、タブレット、デスクトップのグリッド定義
- 03一般的なコンポーネントのスペーシング規則
- 04Figma変数の設定と実装ガイド
- 05トークンの一貫性とレスポンシブレイアウトの確認
活用シーン
- 01Figmaデザインシステムのスペーシングトークン定義
- 02レスポンシブなレイアウトグリッドの文書化
- 03共有トークンに沿ったコンポーネント間隔の統一
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/figma-spacing-systemを入力して読み込まれたか確認します。
詳細
Figma のスペーシングシステムスキル
デザインシステムの一貫性を保ち、開発者への引き継ぎを明確にする基盤となる、完全なスペーシングおよびレイアウトトークンシステムを作成します。
必要な入力
- プラットフォーム（iOS／Android／Web／マルチプラットフォーム）
- ベースユニット（4px／8px — 既定値は8px）
- デザインシステム名（トークンの命名に使用）
- コンポーネントの密度（コンパクト／標準／ゆったり）
- グリッド要件（または「プラットフォーム標準から導出」）
出力構成
1. ベースユニット
根拠とともに[4px または 8px]を指定します。すべての値はその倍数である必要があります。
2. スペーシングスケール
| トークン | 値 | 用途 |
|---|---|---|
| spacing.none | 0px | 意図的にスペースをなくす |
| spacing.xs | 4/8px | アイコンのパディング、狭いラベル |
| spacing.sm | 8/12px | コンパクトな内部コンポーネントのパディング |
| spacing.md | 12/16px | 標準的な内部コンポーネントのパディング |
| spacing.lg | 16/24px | セクションのパディング、カード内部 |
| spacing.xl | 24/32px | コンポーネント間 |
| spacing.2xl | 32/48px | セクション間の区切り |
| spacing.3xl | 48/64px | ページ単位の区切り |
| spacing.4xl | 64/96px | ヒーローセクション |
3. レイアウトグリッド
モバイル（375px）：4列、マージン [value]、ガター [value]
タブレット（768px）：8列、マージン [value]、ガター [value]
デスクトップ（1440px）：12列、マージン [value]、ガター [value]、コンテンツの最大幅 [value]
4. コンポーネントのスペーシング規則
| コンテキスト | トークン | 例 |
|---|---|---|
| ボタンの水平方向のパディング | spacing.md | 左／右 |
| ボタンの垂直方向のパディング | spacing.sm | 上／下 |
| カード内部のパディング | spacing.lg | 全辺 |
| 入力欄のパディング | 垂直方向は spacing.sm、水平方向は spacing.md | |
| アイコンとラベルの間隔 | spacing.xs | |
| セクション間の間隔 | spacing.xl |
5. Figma での実装
- 各トークンを視覚的に説明する SPACING ページを作成します
- Resources > Variables > Number コレクションを作成し、Spacing という名前を付けます
- Auto Layout のパディング／間隔の値に変数を適用します
- トークン名をそのまま、または Tokens Studio を通じてエンジニアと共有します
6. 避けるべきアンチパターン
- スケールにない値（13px、22px） — 最も近いトークンに丸めます
- トークンではなく、コンポーネントに絶対ピクセル値を使用する
- 同じ製品内で4pxと8pxのベースユニットを混在させる
品質チェック
- すべてのトークン値がベースユニットの倍数である
- スケールが xs から 4xl までを網羅している
- 関連するすべてのブレークポイントについてグリッドが定義されている
- コンポーネントの規則が一般的な判断を網羅している
- Figma での実装手順が含まれている
アンチパターン
- 任意の値でスペーシングスケールを作成しないでください — スケールは一貫した数学的比率に従う必要があります（例：4pxをベースにした8-4-2システム）
- Figma での実装手順を示さずにスペーシングトークンを定義しないでください — トークン名だけでは実用できません
- コンポーネントレベルのスペーシング規則を考慮しないスペーシングシステムを作成しないでください — グローバルトークンとコンポーネントでの使用方法の両方を文書化する必要があります
- グリッドの定義を省略しないでください — グリッドシステムのないスペーシングは、レイアウトの基盤に関するドキュメントとして不完全です
- レスポンシブな動作を無視したスペーシングシステムを作成しないでください — ブレークポイントに応じたスペーシングの調整方法を定義してください
例となるトリガーフレーズ
- 「Figma のデザインシステム用にスペーシングシステムを作成して」
- 「Figma 用のスペーシングトークンを定義して」
- 「[product] 用のグリッドとスペーシングスケールを設定して」
- 「デザインシステムではどのスペーシング値を使うべき？」
- 「Figma ファイルのレイアウトの基盤づくりを手伝って」
コメント
Markdown 対応