--- title: Figma × Claude Codeで「デザインの保守」を誰でもできるようにするには？ というチャレンジをしてみた 2026-04-16 融ける職能 tags: author: [あんど](https://docswell.com/user/ampersand_xyz) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/Y76WL6PP7V.jpg?width=480 description: 2026/04/16 KNOTSスピンオフイベント 融ける職能 での発表資料です。 published: April 16, 26 canonical: https://docswell.com/s/ampersand_xyz/57NRWJ-2026-04-16-232230 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/Y76WL6PP7V.jpg) Figma × Claude Codeで「デザインの保守」を誰でも できるようにするには？ というチャレンジをしてみた お客様が介在するタイプの実務について、職能を超えた効率化を考える © 2025 Finatext Holdings © Finatext Group # Page. 2 ![Page Image](https://bcdn.docswell.com/page/G75M16KP74.jpg) ⾃⼰紹介 あんど（安藤 真⾐⼦） 株式会社Finatext Insuretechドメイン デザインエンジニア ‧デザインもエンジニアリングもまだまだ頑張り中… ‧趣味は個⼈開発 ‧好きなものはレトロゲームとピクセルアート ‧現在👶をビルド中 （懇親会お酒飲めませんが仲良くしてください） © Finatext Holdings © Finatext Group # Page. 3 ![Page Image](https://bcdn.docswell.com/page/9J291MWZER.jpg) AIを⽤いてデザイン作成を 効率化したり、職域を超えて デザインを扱えるするようにすることが 昨今激アツの盛り上がり © Finatext Holdings © Finatext Group # Page. 4 ![Page Image](https://bcdn.docswell.com/page/DEY4ZXLNJM.jpg) 世間ではDESIGN.mdとかが話題ですが が、お客様が存在するタイプの実務は いまのところ ⼈ to ⼈ © Finatext Holdings © Finatext Group # Page. 5 ![Page Image](https://bcdn.docswell.com/page/VJNY314V78.jpg) © Finatext Holdings © Finatext Group # Page. 6 ![Page Image](https://bcdn.docswell.com/page/YE9P95QVJ3.jpg) 業務体制はこんなかんじ Traditional… ディレクター デザイナー フロント / バックエンド お客様 エンジニア © Finatext Holdings © Finatext Group # Page. 7 ![Page Image](https://bcdn.docswell.com/page/GE8D9YG4ED.jpg) 案件ではFigmaが中⼼的に存在する ディレクター デザイナー コメント‧調整 制作‧調整 仕様確認 仕様確認 お客様 フロント / バックエンド エンジニア © Finatext Holdings © Finatext Group # Page. 8 ![Page Image](https://bcdn.docswell.com/page/LELMW4GV7R.jpg) 案件って⽣き物だから たまに発⽣するペイン © Finatext Holdings © Finatext Group # Page. 9 ![Page Image](https://bcdn.docswell.com/page/4JMY9KQNJW.jpg) たま〜〜にある修正フロー ディレクター デザイナー 修正依頼 修正依頼 フロント / バックエンド お客様 エンジニア © Finatext Holdings © Finatext Group # Page. 10 ![Page Image](https://bcdn.docswell.com/page/PJR9GX8479.jpg) ⼯数の使い⽅があんまりうれしくない 実装に対してFigmaが 後追いになる状況 デザイナー 修正 © Finatext Holdings © Finatext Group # Page. 11 ![Page Image](https://bcdn.docswell.com/page/PEXQX68ZJX.jpg) AIというやつでデザイナー⼯数を使わなくてもシュッと出来ないか…？ このペインを解決したい © Finatext Holdings © Finatext Group # Page. 12 ![Page Image](https://bcdn.docswell.com/page/3EK9W1KVED.jpg) 開発で発⽣したUI差分をFigmaにClaude Codeで 反映させられないか？ © Finatext Holdings © Finatext Group # Page. 13 ![Page Image](https://bcdn.docswell.com/page/L73W1Q3Q75.jpg) ⼿探りで挑戦してみました ClaudeCode to Figmaは実際どこまで実⽤できるのか © Finatext Holdings © Finatext Group # Page. 14 ![Page Image](https://bcdn.docswell.com/page/87DKX94WJG.jpg) 実際のページで試してみる https://www.spssi-insurance.com/brands/hugFamily/ © Finatext Holdings © Finatext Group # Page. 15 ![Page Image](https://bcdn.docswell.com/page/VJPKPZMXE8.jpg) Figma MCPを⽤いて開発⽤リソースから Claude Code to Figmaで単純にキャプチャしてみる © Finatext Holdings © Finatext Group # Page. 16 ![Page Image](https://bcdn.docswell.com/page/2EVV2W93EQ.jpg) ⾏けてそうな感じはあるものの… 背景ズレたり・画像が欠落したり … とはいえ単純なレイアウトの再現度はかなり高い © Finatext Holdings © Finatext Group # Page. 17 ![Page Image](https://bcdn.docswell.com/page/57GLRDZYEL.jpg) ⾏けてそうな感じはあるものの… ごく単純な疑似要素とかが取り込まれなかったり © Finatext Holdings © Finatext Group # Page. 18 ![Page Image](https://bcdn.docswell.com/page/4EQYV1L6JP.jpg) Claude Code to Figma 2026年4⽉時点の感触 - 指定位置までスクロールしないと表⽰されない 要素など、実装に依存してる要素の取り込みが 出来ないことがある - CSSハックを使った表現の実装がうまく取り込 めないことがある - 画像の取り込みがバグる事がある （サイズが狂ったり取り込まれないなど。実装⽅法に依存するかも） © Finatext Holdings © Finatext Group # Page. 19 ![Page Image](https://bcdn.docswell.com/page/KJ4WMRDM71.jpg) Claude Code to Figma 2026年4⽉時点の感触 - 指定位置までスクロールしないと表⽰されない 要素など、実装に依存してる要素の取り込みが 出来ないことがある まだ 単純なClaude Code to Figmaだけでは -正確に「デザイン」を再現することは難しい CSSハックを使った表現の実装がうまく取り込 めないことがある - 画像の取り込みがバグる事がある （サイズが狂ったり取り込まれないなど。実装⽅法に依存するかも） © Finatext Holdings © Finatext Group # Page. 20 ![Page Image](https://bcdn.docswell.com/page/LE1Y8QZY7G.jpg) 【figma-useによるチャレンジ】 figma-generate-designを⽤いて コンポーネント単位なら取り扱えるか？ © Finatext Holdings © Finatext Group # Page. 21 ![Page Image](https://bcdn.docswell.com/page/GEWGZM91J2.jpg) Claude Code to Figmaでコンポーネントを取り込む © Finatext Holdings © Finatext Group # Page. 22 ![Page Image](https://bcdn.docswell.com/page/47ZL1Q9XJ3.jpg) Claude Code to Figmaでコンポーネントを取り込む © Finatext Holdings © Finatext Group # Page. 23 ![Page Image](https://bcdn.docswell.com/page/YJ6WL6KPJV.jpg) 取り込んだコンポーネントをターゲットに figma-generate-designをさせる © Finatext Holdings © Finatext Group # Page. 24 ![Page Image](https://bcdn.docswell.com/page/GJ5M16PPJ4.jpg) やれそう © Finatext Holdings © Finatext Group # Page. 25 ![Page Image](https://bcdn.docswell.com/page/9E291M6Z7R.jpg) やれはした © Finatext Holdings © Finatext Group # Page. 26 ![Page Image](https://bcdn.docswell.com/page/D7Y4ZX9NEM.jpg) しかし多分⼤⽅の予想通り、 ちょっと凝った（AIフレンドリーではないよう な）形になると厳しい © Finatext Holdings © Finatext Group # Page. 27 ![Page Image](https://bcdn.docswell.com/page/VENY31LVJ8.jpg) ある案件のコンポーネントの⼀部 © Finatext Holdings © Finatext Group # Page. 28 ![Page Image](https://bcdn.docswell.com/page/Y79P954VE3.jpg) Code to Figmaで最初に取り込んだ⾒た⽬はこう CSSトリックや画像での表現が全滅してたり、行高さが怪しい © Finatext Holdings © Finatext Group # Page. 29 ![Page Image](https://bcdn.docswell.com/page/G78D9YQ47D.jpg) figma-generate-designで少しずつ再現 具体的にどの部分をどう再現してくれ、ということをプロンプティング © Finatext Holdings © Finatext Group # Page. 30 ![Page Image](https://bcdn.docswell.com/page/L7LMW4XVJR.jpg) figma-generate-designで少しずつ再現 具体的にどの部分をどう再現してくれ、ということをプロンプティング © Finatext Holdings © Finatext Group # Page. 31 ![Page Image](https://bcdn.docswell.com/page/4EMY9KLNEW.jpg) figma-generate-designで少しずつ再現 かなりにじり寄ることに成功 © Finatext Holdings © Finatext Group # Page. 32 ![Page Image](https://bcdn.docswell.com/page/PER9GXK4J9.jpg) が、Figma MCPのツールコールの壁 これを踏む時点でもう実⽤レベルから遠い © Finatext Holdings © Finatext Group # Page. 33 ![Page Image](https://bcdn.docswell.com/page/P7XQX6LZEX.jpg) びっくりするほど⾝も蓋もない 【今のところの結論】 めっちゃ頑張れば⾃動化 出来なくもなさそうだが、 ⼈間がやったほうが早くて安い © Finatext Holdings © Finatext Group # Page. 34 ![Page Image](https://bcdn.docswell.com/page/37K9W1LV7D.jpg) 他、試してうまくいかなかったこと AIフレンドリーを前提にしていないFigmaに 対して、figma-generate-designで調整を試みる → 構造把握だけでコンテキストを使い潰し失敗 figma-generate-designでの画像挿⼊ → Code to Figmaと異なり、対応しているAPIがない © Finatext Holdings © Finatext Group # Page. 35 ![Page Image](https://bcdn.docswell.com/page/LJ3W1Q6QJ5.jpg) 2026年4⽉ 時点での総括 - AIによって職能の壁を乗り越えていこうと思う場 合、初⼿からAIを⼊れることを前提にしていないと 難しい - しかしクライアントワークにおいては”AIの都合”を どこまで勘案するのが得か、という話も出てくる - 忘れてはいけないのはAIは「道具」であるというこ と。うまく使う。振り回されない。 © Finatext Holdings © Finatext Group # Page. 36 ![Page Image](https://bcdn.docswell.com/page/8JDKX9VWEG.jpg) 何度も重ねて⾔いますが、 あくまでも現時点での話。 AIの進歩は⾮常に早く 本当にいつ常識が塗り替わるかわからない ⽇々の情報のキャッチアップが⼤事なのは勿論 地道な研究を続けることも⼤事 © Finatext Holdings © Finatext Group # Page. 37 ![Page Image](https://bcdn.docswell.com/page/VEPKPZVX78.jpg) ⾏った挑戦については 前提を整えれば話が変わるかもしれない AIフレンドリーな 構造をもったFigma ディレクター デザイナー フロント / バックエンド お客様 エンジニア © Finatext Holdings © Finatext Group # Page. 38 ![Page Image](https://bcdn.docswell.com/page/27VV2WZ37Q.jpg) ⾏った挑戦については 前提を整えれば話が変わるかもしれない AIフレンドリーな 構造をもったFigma この前提を成し遂げようとすると デザイナー ディレクター 先に職能を融かさないといけない🐓🥚 フロント / バックエンド お客様 エンジニア © Finatext Holdings © Finatext Group # Page. 39 ![Page Image](https://bcdn.docswell.com/page/5JGLRD4Y7L.jpg) ⼀緒に壁を融かしてくれる ⼈を募集しています！！ Finatext ホールディングスグループでは⾏動指針に 「AI+」を掲げ、グループ全体でのAIイネーブルメ ントを進めています。 デザイン領域だけではなく、業務進⾏やエンジニ アリングについてもAIファーストにした改⾰や研究 が⽇々進められています。 今の時代だから出来る、デザイン‧業務‧エンジ ニアリングの融合に興味がある‧変⾰のための挑 戦をしてみたい、という⽅はぜひカジュアル⾯談し ましょう‼ © Finatext Holdings © Finatext Group 選考について詳しくはこちら！ # Page. 40 ![Page Image](https://bcdn.docswell.com/page/47QYV1G6EP.jpg) © Finatext Holdings © Finatext Group