Figma × Claude Codeで「デザインの保守」を誰でもできるようにするには？というチャレンジをしてみた 2026-04-16 融ける職能

>100 Views

April 16, 26

スライド概要

2026/04/16 KNOTSスピンオフイベント融ける職能での発表資料です。

あんど

@ampersand_xyz

スライド一覧

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

Figma×MCPでデザインシステム開発を加速させたい

あんど 27.7K

確実に鮮度が高い社内情報を得るために人間はどうするべきかを考える

あんど 13.9K

開発業務でAIの活きるシーン、活きないシーン

あんど 5.1K

AIの台頭でデザインとフロントエンドの垣根は融合しつつあるのか？

あんど 3.1K

失敗の科学に学ぶ開発組織の心理的安全性

あんど 2.5K

2024:07:31 スタディスト Remote engineer meetup

あんど 1.3K

各ページのテキスト

⾃⼰紹介あんど（安藤真⾐⼦）株式会社Finatext Insuretechドメインデザインエンジニア ‧デザインもエンジニアリングもまだまだ頑張り中… ‧趣味は個⼈開発 ‧好きなものはレトロゲームとピクセルアート ‧現在👶をビルド中（懇親会お酒飲めませんが仲良くしてください） © Finatext Holdings © Finatext Group

AIを⽤いてデザイン作成を効率化したり、職域を超えてデザインを扱えるするようにすることが昨今激アツの盛り上がり © Finatext Holdings © Finatext Group

世間ではDESIGN.mdとかが話題ですがが、お客様が存在するタイプの実務はいまのところ⼈ to ⼈ © Finatext Holdings © Finatext Group

業務体制はこんなかんじ Traditional… ディレクターデザイナーフロント / バックエンドお客様エンジニア © Finatext Holdings © Finatext Group

案件ではFigmaが中⼼的に存在するディレクターデザイナーコメント‧調整制作‧調整仕様確認仕様確認お客様フロント / バックエンドエンジニア © Finatext Holdings © Finatext Group

案件って⽣き物だからたまに発⽣するペイン © Finatext Holdings © Finatext Group

たま〜〜にある修正フローディレクターデザイナー修正依頼修正依頼フロント / バックエンドお客様エンジニア © Finatext Holdings © Finatext Group

10.

⼯数の使い⽅があんまりうれしくない実装に対してFigmaが後追いになる状況デザイナー修正 © Finatext Holdings © Finatext Group

11.

AIというやつでデザイナー⼯数を使わなくてもシュッと出来ないか…？このペインを解決したい © Finatext Holdings © Finatext Group

12.

開発で発⽣したUI差分をFigmaにClaude Codeで反映させられないか？ © Finatext Holdings © Finatext Group

13.

⼿探りで挑戦してみました ClaudeCode to Figmaは実際どこまで実⽤できるのか © Finatext Holdings © Finatext Group

14.

実際のページで試してみる https://www.spssi-insurance.com/brands/hugFamily/ © Finatext Holdings © Finatext Group

https://www.spssi-insurance.com/brands/hugFamily/

15.

Figma MCPを⽤いて開発⽤リソースから Claude Code to Figmaで単純にキャプチャしてみる © Finatext Holdings © Finatext Group

16.

⾏けてそうな感じはあるものの… 背景ズレたり・画像が欠落したり … とはいえ単純なレイアウトの再現度はかなり高い © Finatext Holdings © Finatext Group

17.

⾏けてそうな感じはあるものの… ごく単純な疑似要素とかが取り込まれなかったり © Finatext Holdings © Finatext Group

18.

Claude Code to Figma 2026年4⽉時点の感触 - 指定位置までスクロールしないと表⽰されない要素など、実装に依存してる要素の取り込みが出来ないことがある - CSSハックを使った表現の実装がうまく取り込めないことがある - 画像の取り込みがバグる事がある（サイズが狂ったり取り込まれないなど。実装⽅法に依存するかも） © Finatext Holdings © Finatext Group

19.

Claude Code to Figma 2026年4⽉時点の感触 - 指定位置までスクロールしないと表⽰されない要素など、実装に依存してる要素の取り込みが出来ないことがあるまだ単純なClaude Code to Figmaだけでは -正確に「デザイン」を再現することは難しい CSSハックを使った表現の実装がうまく取り込めないことがある - 画像の取り込みがバグる事がある（サイズが狂ったり取り込まれないなど。実装⽅法に依存するかも） © Finatext Holdings © Finatext Group

20.

【ﬁgma-useによるチャレンジ】 ﬁgma-generate-designを⽤いてコンポーネント単位なら取り扱えるか？ © Finatext Holdings © Finatext Group

21.

Claude Code to Figmaでコンポーネントを取り込む © Finatext Holdings © Finatext Group

22.

Claude Code to Figmaでコンポーネントを取り込む © Finatext Holdings © Finatext Group

23.

取り込んだコンポーネントをターゲットに ﬁgma-generate-designをさせる © Finatext Holdings © Finatext Group

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

他、試してうまくいかなかったこと AIフレンドリーを前提にしていないFigmaに対して、ﬁgma-generate-designで調整を試みる → 構造把握だけでコンテキストを使い潰し失敗 ﬁgma-generate-designでの画像挿⼊ → Code to Figmaと異なり、対応しているAPIがない © Finatext Holdings © Finatext Group

35.

2026年4⽉時点での総括 - AIによって職能の壁を乗り越えていこうと思う場合、初⼿からAIを⼊れることを前提にしていないと難しい - しかしクライアントワークにおいては”AIの都合”をどこまで勘案するのが得か、という話も出てくる - 忘れてはいけないのはAIは「道具」であるということ。うまく使う。振り回されない。 © Finatext Holdings © Finatext Group

36.

何度も重ねて⾔いますが、あくまでも現時点での話。 AIの進歩は⾮常に早く本当にいつ常識が塗り替わるかわからない⽇々の情報のキャッチアップが⼤事なのは勿論地道な研究を続けることも⼤事 © Finatext Holdings © Finatext Group

37.

38.

⾏った挑戦については前提を整えれば話が変わるかもしれない AIフレンドリーな構造をもったFigma この前提を成し遂げようとするとデザイナーディレクター先に職能を融かさないといけない🐓🥚 フロント / バックエンドお客様エンジニア © Finatext Holdings © Finatext Group

39.

⼀緒に壁を融かしてくれる⼈を募集しています！！ Finatext ホールディングスグループでは⾏動指針に「AI+」を掲げ、グループ全体でのAIイネーブルメントを進めています。デザイン領域だけではなく、業務進⾏やエンジニアリングについてもAIファーストにした改⾰や研究が⽇々進められています。今の時代だから出来る、デザイン‧業務‧エンジニアリングの融合に興味がある‧変⾰のための挑戦をしてみたい、という⽅はぜひカジュアル⾯談しましょう‼ © Finatext Holdings © Finatext Group 選考について詳しくはこちら！

40.

Figma × Claude Codeで「デザインの保守」を誰でもできるようにするには？ というチャレンジをしてみた 2026-04-16 融ける職能

あんど