2025年のデザインシステムとAI 活用を振り返る

Transcript

1. 2025 年のデザインシステムと AI 活用を振り返る 2025/12/23
2. AGENDA 01 02 03 04 05 はじめに デザインシステムの現在地 2025年 Figmaニュース振り返り [ Main Topic ] Figma MCP × デザインシステム 2025年の成果とこれから
3. 01 はじめに
4. 4 縄巻 一鴻（Kazutoki Nawamaki） ▪2023年4月〜 レバレジーズ株式会社に新卒入社。 ▪2024年4月〜 HRTech事業部にてSaaSのフロントエンド開発に従事。 ▪2025年4月〜 同事業部のデザインシステム開発責任者として、コンポーネントパッ ケージの開発や共通基盤・AI駆動の整備などに取り組む。 Speaker
5. 5 NALYSYSの紹介
6. 6 • NALYSYS (ナリシス) ◦ 組織の課題を可視化し解決する HR Tech プロダクト ◦ エンゲージメントサーベイ、AI 模擬面接機能などを提供 • 開発体制と「 AI 駆動開発」 ◦ 特徴: ▪ Cursor, GitHub Copilot, Claude Code などを全面導入 ◦ 方針: ▪ ドキュメント作成、コード生成、レビューなど、あらゆる工程に AI を組み込む ◦ 目的: ▪ 人間は「意思決定」や「複雑な設計」に集中する NALYSYSの紹介
7. 7 公式noteはじめました！
8. 8 本⽇の内容 今日は、デザインシステムと AI (特に Figma MCP) を組み合わせ、 サービス開発の UI 実装をいかに簡単・高速にしたか。 その 2025 年の振り返りをお話しします。
9. 02 デザインシステムの現在地
10. 10 • ステータス ◦ 2025 年 4 月本格始動 → 2025 年 12 月現在、引き続き開発中 ... • チーム ◦ デザイナー 2 名、エンジニア 1 名（私） • 主な技術スタック : ◦ Figma ◦ React / TypeScript ◦ Storybook ◦ Radix UI ▪ アクセシビリティと機能性を担保しつつ、スタイリングの自由度を確保 コンセプトと現状
11. 11 1. Figma と React の完全一致 ◦ コンポーネント名、バリアント名などを統一 ◦ コミュニケーションコストの激減 2. 40 個以上のコンポーネント実装 ◦ Storybook で全カタログ化 ◦ デザイナーも動作確認可能な環境整備 3. JSDocドキュメントの整備 ◦ 「いつ・どう使うか」の利用ガイドを AI (Cursor) で整備 ◦ JSDoc, Storybook 解説文の自動化 デザインシステムで取り組んだことを振り返る
12. 03 2025 年 Figma ニュース振り返り
13. 13 ① Figma Make • テキストで指示するだけで、動作する Web アプリ/プロトタイプを生成 • v0みたいなやつ • 活用方法: ◦ アイデア検証、MVP 作成、エンジニアへの動作イメージ伝達 • ⚠使ってみた感想 : ◦ 本番コードへの直接転用よりは検証用途。 Figma ニュース ①
14. 14 Figma Makeでつくってみる
15. 15 ② Code Connect • Figma上のコンポーネント と、Githubリポジトリ内の実際のコード実装 を紐付ける仕組み • Code Connectで設定された情報はFigma MCPを使うときにも参照される • Code Connect UI と Code Connect CLIの2種類の設定方法 Figma ニュース ②
16. 16 Code Connect UIを使ってみるとこんな感じ
17. 17 ③ Figma で Grid 機能が登場 • 今まではオートレイアウトでがんばっていた • 実装との整合性が向上（「擬似 Grid」からの脱却） Figma ニュース ③
18. 18 ④ Figma MCP の発表 • AI (Cursor / Claude Code) と Figma が直接連携 • ※ 詳しくはメインテーマで後述 Figma ニュース ④
19. 04 [ Main Topic ] Figma MCP × デザインシステム
20. 20 • 概要: ◦ AI が Figma のデータを直接「読める」ようになりました。 • Before (泥臭い現実 ): ◦ デュアルディスプレイで Figma と VS Code を往復 • After (魔法のような体験 ): ◦ チャット欄に Figma の URL を貼るだけ ◦ AI がレイヤー構造、色、テキストを解析し、一瞬でコードに変換 ◦ 「見て書く」から「リンクを渡して生成」へのパラダイムシフト Figma MCP とは？
21. 21 Figma MCP とは？
22. 22 「デザインシステム × Figma MCP」で、ほぼ Figma通りのレイアウトが 5分で作成可能になります！ 最初に結論
23. 23 導⼊の壁 ただツールを入れるだけでは、期待通りのコードは生成されませんでした。 • デザインシステム無視 : ◦ components/ui/Button があるのに、勝手に <button className="..."> で新規実装される • ReactとFigmaの差分が埋められない : ◦ Reactコンポーネントにしかないpropsなどが不正確
24. 24 ① AI への指示書 ( figma-mcp-command.md ) の整備 AI に実装を「よしなに」やらせるのではなく、厳格な手順書を与えています。 この指示書自体もデザインシステムのリポジトリで管理し、 npm パッケージとして各プロダクトに配布 しています。 開発側の⼯夫
25. 25 • 厳格なフロー定義 : ◦ Figma 情報取得 → コンポーネントカタログとの照合 → 実装 → Lint チェック • 「既存コンポーネント優先」の徹底 : ◦ 既存がある場合は、正しいパッケージ (@hoge/hoge-*) から import する（推測厳禁）。 ◦ ない場合のみ、Figma の数値を元に新規実装する。 • Figma と React の差分を埋めるプロンプト : ◦ 「フォーム部品は R プレフィックス付き（React Hook Form 対応版）を使うか確認せよ」 ◦ 「アイコンは type props ではなく個別のコンポーネント名 (FilledUserIcon 等) で実装せよ」 AI への指⽰書 (figma-mcp-command.md)
26. 26 参考にさせていただいた記事
27. 27 ② リポジトリ構成の最適化 サービス用リポジトリとデザインシステムリポジトリをローカルで並列配置 相対パスでの参照を容易にし、AI のコンテキスト理解を助ける ③ Figma MCPにわたすデザインの粒度 1 ページ丸ごとではなく、コンポーネント/セクション単位で小さめに生成させると精度がよさそう 開発側の⼯夫
28. 28 ① AI に「読ませる」ためのデータ作り 前提：Figma MCPの精度は、「デザインデータのきれいさ」に比例する 🎨 汚いデータの例 • デザイン上で絶対配置をしている ◦ コードも絶対配置で生成される • カラーコードがハードコードされている。例： ”#F2994A” ◦ コードでも、デザイントークンではなく、カラーコードのまま使用される。 • 余計なフレームが入ってしまっている ◦ コードでも、余計な<div/>が入ってしまう デザイン (Figma) 側の⼯夫
29. 29 ① AI に「読ませる」ためのデータ作り • コンポーネント化 : ◦ メインコンポーネントとして正しく定義する • Auto Layout / Grid: ◦ 適切に設定し、Flexbox/Grid として変換可能にする • Variables: ◦ 色やサイズを即値 (#FFF, 16px) ではなくトークン変数 (Neutral-White, Size-16) で指定する デザイン (Figma) 側の⼯夫
30. 30 Variables
31. 31 ② 不正なデザイントークン (Variables) のチェック自動化 • デザイナー作成の Figma プラグインでチェック ◦ Figmaにおいて、デザインシステムに存在しない色や余白の マジックナンバーを検知 • 結果 ◦ AI が生成するコードの精度向上 ◦ 実装手戻りの削減 デザイン (Figma) 側の⼯夫
32. 32 「デザインシステム × Figma MCP」で、 ほぼFigma通りのレイアウト・ UIが5分で作成可能に 󰚗 結果
33. 05 2026 年とまとめ
34. 34 • Figma Slots 機能: ◦ React の children のような柔軟性が Figma に実装される ◦ これにより、コンポーネントの柔軟性がさらに高まり、コード構造との乖離が解消される • 公式 Check Designs への移行: ◦ 現在は自作プラグインで検知している「デザインシステムの違反」を、Figma 公式機能で ◦ メンテナンスコストを削減し、より標準的な運用へ 2026 年のFigma機能（確定）
35. 35 Figma MCP はゲームチェンジャー • ツール間の壁を取り払い、デザインと実装の距離を極限まで縮めた 人間がやるべきこと • 意思決定、複雑な設計、そして「AI が働きやすい環境」を整えること • デザインシステムもその1つ まとめ
36. おわり