Figma デザインを自動マークアップさせた記録と肌感 / 20260425-nagaoka-tech-junction-1

2026/04/25 Nagaoka Tech Junction #1 で話した資料です

Transcript

1. Figma デザインを 自動マークアップ させた記録と肌感 2026/04/25 Nagaoka Tech Junction #1 girigiribauer
2. 自己紹介 2024年10月まで長岡にアパートを借りていた 花火はアパートから観てた勢 今は新潟市在住（元名古屋民） オンラインでは X(Twitter) から離れ、完全に Bluesky の民となった @girigiribauer.com 2
3. ウオロク大好き勢 3
4. 今日言いたいこと Figma デザインを自動マークアップさせるには、以下の3つが必要 金 （Figma MCP / AI にお金が必要） Agent Skill の育成 マークアップ脳で Figma デザインする力 4
5. 今日言いたいこと 今日話すのは2026/03に試した時点でのお話です、ご了承ください 理解が追いついてない部分もあり不正確な部分もあります 5
6. 本編 6
7. 自動マークアップの夢 昔からマークアップ（HTML作成）は自動化されると思っていた もうちょっと先の未来だと思っていた マークアップをガッツリやらなくなって久しいが、自動化してみた くなった 7
8. 今回の題材 某まとめサイト、話が長くなるので今回は割愛（時間あるなら軽く） 5ページ前後の PC/SP レイアウトのあるレスポンシブサイト 題材としてちょうどよさそうでは？ 8
9. 前提となる材料を用意する 自動マークアップの「材料」は Figma のデザインデータ そのうちデザインデータすら自動で作れる日がすぐ来そうだが、今 回は自分で用意 Claude Design も試してみたけど、時間の問題かも？ 9
10. 対象のデザイン (1/4) 10
11. 対象のデザイン (2/4) 11
12. 対象のデザイン (3/4) 12
13. 対象のデザイン (4/4) 13
14. 必要なもの1: 金 14
15. 必要なもの1: 金 自動で書くのはAIなので当然お金が要る 加えて Figma MCP を使えるようにする必要がある 15
16. MCP とは AI と外部ツールをつなぐ共通規格のこと AI が自分で判断して使える ツール（機能） が提供される GitHub MCP リポジトリへのアクセス、PR作成 Slack MCP 過去のやり取りの取得 SQLite / DB MCP データベースへのクエリ実行 人間がコマンドを叩かなくても AIが空気（文脈）を読んで勝手に使 ってくれる のが最大の特徴 16
17. Figma MCP とは 公式の Figma MCP と コミュニティ版の Figma MCP がある 公式版は Figma 側がサーバーを用意してくれている（細かい仕組み は知らなくても良い） コミュニティ版は自分で MCP サーバーを動かし、そこから Figma API を叩く → 実態は普通にAPIを使っているだけなので、Figma APIの利 用制限 がそのまま適用される 17
18. 試してみた スターター（無料）プラン だと、 API でも MCP でも 月6回まで 無理 環境構築の接続確認だけで 終了 18
19. Figma プロプランの契約が必要 ノード（オブジェクト）単位のアクセスには Figma の有料プランが 必要 元々必要性は感じていたのでプロプラン・フルシートを契約 AIからは 何度も繰り返し呼ぶ ことになる API で取得する Figma のノードはまあまあでかい 階層を考えずに取得すると 数MB単位の JSON になることも 19
20. 必要なもの2: Agent Skills 20
21. 必要なもの2: Agent Skills AIに「Figma を見ていい感じに組んで」と丸投げしても、一発では 絶対に理想通りにならない AIが確実にタスクを遂行するための 作業手順書 が必要 21
22. Agent Skills とは Markdown 形式で特定の場所に配置することで、AIに定型的な手順 として認識させるための仕組み 「〇〇して」と頼んだとき、どういう手順で動くかをあらかじめ定 義しておく 条件分岐や繰り返し処理も書けるので、プログラミングコードのよ うに手順を組む こともできる 手順書の品質がそのまま出力品質になる 22
23. 人間がやるように分解する 人間がマークアップするとき、最初から細部を書きはじめたりしな い まず全体構造を把握する 共通パーツ（ヘッダー・カラム等）を先に作る ページ固有の差分を後から埋めていく この 手順の言語化 がスキルの核心 言語化されていないと AI は毎回違う順序で動く → 品質がバラつく 23
24. 自作 figma-impl スキル スキル自体よく分からない状態から、AIに相談しつつ作り始める スキル自体もテキストファイルなので、AIに修正させる Anthropic が用意してるベストプラクティスを参照させたりも した 細かい装飾は雑になりやすいので、厚めにフォローする スキルは 使いながら育てていく 必要がありそう 24
25. 自作 figma-impl スキル (1/3) 25
26. 自作 figma-impl スキル (2/3) 26
27. 自作 figma-impl スキル (3/3) 27
28. 失敗と改善の繰り返し AI に走らせてみて、失敗した穴を手順書で塞ぐ ことの連続だった 情報収集だけを行う Sub Agent に処理を分割する手順を追加し たりやめてみたり MCP でノードを画像として取得し、視覚的に確認させる手順 を 追加したり スキルは改善途中だけど、10数回でページ完成まで辿り着けた 28
29. 3つ目に必要なもの: マークアップ 脳で Figma デザインする力 29
30. 3つ目に必要なもの: マークアップ 脳で Figma デザインする力 肝心の レスポンシブの意図が伝わり切っていない Figma の作りを考えずに自動マークアップさせると、たまに position: absolute でレイアウトされたりする 人間やAIから品質の高いドキュメントは、検索エンジンやAIから見 ても セマンティック である必要がある 30
31. Figma デザイン上で意図を伝える そのノードが何なのか？を Figma のレイヤー上で命名する Figma の Auto Layout 機能 を使い、要素間の間隔を定義する Figma のデータ構造が、そのまま HTML/CSS の構造になる 31
32. 改善してみた section という名前をつ ける 子要素は上下方向に 30px で並べる 32
35. Figma 上でマークアップしてる？ 入力が Figma デザイン、出力が HTML/CSS の1対1の関係 究極的には Figma 上でマークアップしながらデザインする という 頭の動かし方が必要になってくる もしかして自動マークアップには デザインとマークアップの両方が できる人間 が求められるのでは？ 35
36. これからの『作る人』はどうなる のか？ ただマークアップするだけの作業は消滅する マークアップが正しいかどうか理解・判断する力は求められそう？ それも Agent Skills で言語化されたら消えそう 求められる能力が前工程にどんどんシフトしそう 作業としてのデザインも言語化されたら消えそう 36
37. まとめ 37
38. まとめ Figma で自動マークアップするには、マークアップを理解しながら デザインすることが求められる Agent Skills を作るには プロセスを言語化する力 が求められる 人間は、言語化できないことをどんどんやっていこう 38
39. 参考URL https://www.figma.com/ja-jp/pricing/ https://developers.figma.com/docs/rest-api/rate-limits/ https://developers.figma.com/docs/figma-mcp-server/plans- access-and-permissions/ https://developers.figma.com/docs/figma-mcp-server/remote- server-installation/ https://github.com/glips/figma-context-mcp 39