🔥
まとめ: Schema 2025: Design systems for a new era
⚠️ 本記事は ChatGPT（GPT-5） が執筆支援しています。
ChatGTP Atlasでブログを確認しながらメモったものとこちらに載せてます
Figma Schema 2025 – デザインシステムは「静的なルール」から「生きたシステム」へ
2025年10月、Figma 公式イベント 「Schema 2025」 で、デザインシステムに関する大規模アップデートが発表されました。
テーマは 「AI時代のデザインシステム」
従来の「ガイドライン集」ではなく、AI × コード × デザインをつなぐ“動くシステム” に変わります。
🚀 1. Extended Collections（複数ブランドを簡単に管理）
- 1つのデザインシステム → 複数ブランドへ派生できる
- 親システムの更新はそのまま反映されるが、上書きも可能
例: コアシステムから Aブランド / Bブランド向けテーマを作成
🧩 2. Slots（コンポーネントに追加できるインスタンス拡張）
- dettach (コンポーネントを壊す) が不要
- インスタンスに要素を追加できる
- システムとの接続は維持される
「リストに項目を追加したい…」が壊さずできるように。
🛠️ 3. Check designs（デザインのLinting）
- 「この色ってどの変数？」を自動で判別して提案
- デザイン → コードの トークン対応がミスなく進む
⚡ 4. パフォーマンス改善（最大 90% 高速化）
- 変数変更・モード切替が 30〜60%高速化
- 状態切替が 3500ms → 350ms
大規模 DS でも操作が軽くなった
🧑💻 5. Code Connect UI（コードとのつながりが最短に）
- GitHub と直接接続
- AI が最適なコードファイルを提案
- コンポーネントとコードを簡単にリンクできる
🤖 6. Figma MCP Server（AI がデザインシステムを守る）
- AI コーディングに デザインシステムのルールを適用
- FigJamから AI のワークフローを構築できる
- 個人ユーザーでも利用可能に
🛠️ 7. Figma Make × デザインシステム
AIがアプリを生成する「Make」でもデザインシステムを活用可能に。
| 機能 | 内容 |
|---|---|
| Make kits | Figma ライブラリから React & CSS を生成し Make に使える |
| npm imports | 既存の React デザインシステムを import 可能 |
コード版 DS がある企業も、Figma 上の DS もどちらでも使える。
⭐ その他のアップデート
| 機能 | 内容 |
|---|---|
| Variables import/export（ネイティブ対応） | JSON / DTCG 形式でやりとり可能に |
| Modes の上限増加 | Professional: 10 / Organization: 20 |
| 変数作成 UI 改善 | 作成時に全コレクションが見える & フルスクリーン化 |
📌 結論：デザインシステムは「生きる」フェーズへ
デザイン × コード × AI をつなぐ基盤がデザインシステムになる
- 「壊れる問題」や「複雑さ」が解決され、
- AIが DS に沿ったコード生成まで可能に。
Figma デザインシステムは
作る → 配る → 使う → コードにつなぐ → AI が守る
という新しい循環に突入しました。
Discussion