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

Figma デザインを自動マークアップさせた記録と肌感 2026/04/25 Nagaoka Tech Junction #1 girigiribauer

自己紹介 2024年10月まで長岡にアパートを借りていた花火はアパートから観てた勢今は新潟市在住（元名古屋民）オンラインでは X(Twitter) から離れ、完全に Bluesky の民となった @girigiribauer.com
2

ウオロク大好き勢 3

今日言いたいこと Figma デザインを自動マークアップさせるには、以下の3つが必要金（Figma MCP / AI にお金が必要） Agent
Skill の育成マークアップ脳で Figma デザインする力 4

今日言いたいこと今日話すのは2026/03に試した時点でのお話です、ご了承ください理解が追いついてない部分もあり不正確な部分もあります 5

本編 6

自動マークアップの夢昔からマークアップ（HTML作成）は自動化されると思っていたもうちょっと先の未来だと思っていたマークアップをガッツリやらなくなって久しいが、自動化してみたくなった 7

今回の題材某まとめサイト、話が長くなるので今回は割愛（時間あるなら軽く） 5ページ前後の PC/SP レイアウトのあるレスポンシブサイト題材としてちょうどよさそうでは？ 8

前提となる材料を用意する自動マークアップの「材料」は Figma のデザインデータそのうちデザインデータすら自動で作れる日がすぐ来そうだが、今回は自分で用意 Claude Design も試してみたけど、時間の問題かも？ 9

対象のデザイン (1/4) 10

必要なもの1: 金 14

必要なもの1: 金自動で書くのはAIなので当然お金が要る加えて Figma MCP を使えるようにする必要がある 15

MCP とは AI と外部ツールをつなぐ共通規格のこと AI が自分で判断して使えるツール（機能）が提供される GitHub MCP
リポジトリへのアクセス、PR作成 Slack MCP 過去のやり取りの取得 SQLite / DB MCP データベースへのクエリ実行人間がコマンドを叩かなくても AIが空気（文脈）を読んで勝手に使ってくれるのが最大の特徴 16

Figma MCP とは公式の Figma MCP とコミュニティ版の Figma MCP
がある公式版は Figma 側がサーバーを用意してくれている（細かい仕組みは知らなくても良い）コミュニティ版は自分で MCP サーバーを動かし、そこから Figma API を叩く → 実態は普通にAPIを使っているだけなので、Figma APIの利用制限がそのまま適用される 17

試してみたスターター（無料）プランだと、 API でも MCP でも月6回まで無理環境構築の接続確認だけで
終了 18

Figma プロプランの契約が必要ノード（オブジェクト）単位のアクセスには Figma の有料プランが必要元々必要性は感じていたのでプロプラン・フルシートを契約 AIからは何度も繰り返し呼ぶことになる
API で取得する Figma のノードはまあまあでかい階層を考えずに取得すると数MB単位の JSON になることも 19

必要なもの2: Agent Skills 20

必要なもの2: Agent Skills AIに「Figma を見ていい感じに組んで」と丸投げしても、一発では絶対に理想通りにならない AIが確実にタスクを遂行するための作業手順書が必要 21

Agent Skills とは Markdown 形式で特定の場所に配置することで、AIに定型的な手順として認識させるための仕組み「〇〇して」と頼んだとき、どういう手順で動くかをあらかじめ定義しておく条件分岐や繰り返し処理も書けるので、プログラミングコードのように手順を組む
こともできる手順書の品質がそのまま出力品質になる 22

人間がやるように分解する人間がマークアップするとき、最初から細部を書きはじめたりしないまず全体構造を把握する共通パーツ（ヘッダー・カラム等）を先に作るページ固有の差分を後から埋めていくこの手順の言語化がスキルの核心言語化されていないと
AI は毎回違う順序で動く → 品質がバラつく 23

自作 figma-impl スキルスキル自体よく分からない状態から、AIに相談しつつ作り始めるスキル自体もテキストファイルなので、AIに修正させる Anthropic が用意してるベストプラクティスを参照させたりもした細かい装飾は雑になりやすいので、厚めにフォローするスキルは
使いながら育てていく必要がありそう 24

自作 figma-impl スキル (1/3) 25

失敗と改善の繰り返し AI に走らせてみて、失敗した穴を手順書で塞ぐことの連続だった情報収集だけを行う Sub Agent に処理を分割する手順を追加したりやめてみたり MCP
でノードを画像として取得し、視覚的に確認させる手順を追加したりスキルは改善途中だけど、10数回でページ完成まで辿り着けた 28

3つ目に必要なもの: マークアップ脳で Figma デザインする力 29

3つ目に必要なもの: マークアップ脳で Figma デザインする力肝心のレスポンシブの意図が伝わり切っていない Figma の作りを考えずに自動マークアップさせると、たまに position:
absolute でレイアウトされたりする人間やAIから品質の高いドキュメントは、検索エンジンやAIから見てもセマンティックである必要がある 30

Figma デザイン上で意図を伝えるそのノードが何なのか？を Figma のレイヤー上で命名する Figma の Auto Layout 機能
を使い、要素間の間隔を定義する Figma のデータ構造が、そのまま HTML/CSS の構造になる 31

改善してみた section という名前をつける子要素は上下方向に 30px で並べる 32

Figma 上でマークアップしてる？入力が Figma デザイン、出力が HTML/CSS の1対1の関係究極的には Figma 上でマークアップしながらデザインする
という頭の動かし方が必要になってくるもしかして自動マークアップにはデザインとマークアップの両方ができる人間が求められるのでは？ 35

これからの『作る人』はどうなるのか？ただマークアップするだけの作業は消滅するマークアップが正しいかどうか理解・判断する力は求められそう？それも Agent Skills で言語化されたら消えそう求められる能力が前工程にどんどんシフトしそう作業としてのデザインも言語化されたら消えそう
36

まとめ 37

まとめ Figma で自動マークアップするには、マークアップを理解しながらデザインすることが求められる Agent Skills を作るにはプロセスを言語化する力が求められる人間は、言語化できないことをどんどんやっていこう
38

参考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

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

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

More Decks by girigiribauer

Other Decks in Technology

Featured

Transcript