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