inflearn logo
知識共有
inflearn logo

デザイナー、フロントエンド開発者のためのAIに読み取りやすいFigma活用法A to Z

Figmaの基礎から、AIを活用してデザイン/開発プロセスを加速できるAI Readableなデザインシステムを構築・活用する、プロダクトビルディングの全プロセスをA to Zで扱う予定です。

3名 が受講中です。

難易度 中級以上

受講期間 無制限

Figma
Figma
Design System
Design System
AI
AI
collaboration
collaboration
product design
product design
Figma
Figma
Design System
Design System
AI
AI
collaboration
collaboration
product design
product design

受講後に得られること

  • AIと開発者が正確に解釈できるFigmaデザインシステムの命名、階層、オートレイアウト、トークン、ドキュメント化のルールを設計できます。

  • GitHub Primerとshadcn/uiをFigmaで分析し、私たちのチームのデザインシステムに適用するための基準を策定できます。

  • AIが生成した画面とコードを診断し、Agent skillとチェックリストで繰り返し発生するエラーを修正できます。

  • Notion、FigJam Agent、Figma Make、Figma Designを連携し、企画から画面実装までのミニスプリントを実施できます。

  • Dev ModeとMCPを活用してデザインシステムをコード生成ツールに接続し、成果物をレビューできます。

  • デザイナーとフロントエンド開発者がトークン、コンポーネント、ハンドオフ基準を共有する協業プロセスを構築できます。

AIが描いた画面が"私たちのもの"らしくない理由

大AI時代、プロンプト一行で画面のたたき台が出てきます。

しかし、詳しく見てみると、ボタンの高さはばらばらで、色はトークンを無視し、開発者は「これはどのコンポーネントですか?」と聞き返します。同じ命令を5回実行すると、5つの異なる結果が出てきます。

問題はAIの能力ではありません。AIが読み取れないデザインシステムが問題です。

人間の目には整然としたシステムに見えても、データの構造自体が機械に読み取れなければ、AIは毎回推測で作業します。開発者も同じです。

この講義では、そのシステムをAIが読み取れるように再構築する方法を扱います。新しく作るのではなく、すでにあるシステムを改善する方法です。


この講義は、両方の職種を対象とした講義です。

デザインシステムはデザイナーが作り、開発者が消費するものではなく、両職種が同じルールで読み書きするものであるべきです。

実務デザイナーまたは学生であれば、デザインシステムを作成したことがある、または運用中で、AIの成果物がシステムと別々に動いてしまう理由を構造的に解決したい方。

フロントエンド開発者なら、デザイナーから渡されたFigmaファイルをコードに移行する協業プロセスで、トークンや命名が合わずに確認し直すことが繰り返し発生している方。

個人クリエイターなら企画・デザイン・開発を一人ですべて行いながら、AIエージェントを実際のワークフローに接続してスピードアップしたい方。


この講座について


1. まずは自分の手で、その次にAIへ

AIが作成した成果物が良いか悪いかは、実際に自分で作ったことのある人だけが判断できます。
そのため、この講義では実習ごとに手順が決められています。ボタンコンポーネントを自分で作ってからAIにコンポーネントセットを作らせ、Variableでモードを自分で扱ってからAIにダークテーマを任せます。

今回の講義では、Figmaの基礎とAIの活用を同時に扱う予定です。


2. なぜ結果が毎回異なるのか、実際に体験してみます

AIに10回指示すると、結果は10回とも毎回異なります。
そのばらつきがなぜ生じ、主にどこで発生するのかを突き止めることが、AI移行の出発点です。原因を自分の手で確かめて初めて、"AI Readable"が何を意味するのか理解できます。


3. 作ることよりも判断する方法を学びます

この講義では、プロダクトデザイン分野で継続的にデザインシステムと画面デザインを高度化するための方法をともに扱っています。

診断チェックリストを作成し、検証ループをスキルとして登録して実行し、同じ命令を5回実行してばらつきを測定します。ばらつきが大きい箇所こそ、私のシステムの穴です。その穴を埋めて、再度実行します。

チェックリストはスプリントを重ねる中で継続的に高度化されます。講義が終わる頃には、自分が作ったシステムにそのまま使える診断ツールが手元に残ります。


4. デザインシステムがコードになる瞬間

Dev Modeでハンドオフ構造を構築し、Dev Mode MCPでAIにFigmaファイルを直接読み込ませます。

Code syntaxを埋め込んだトークンと、そうでないトークンがどのように異なるコードを生成するのかを目で比較します。自分で定めたルールをAIが実際に読み取っていることを確認するポイントです。

企業の実務チームが実際にハンドオフで活用しているCode Connectについても、簡単に見ていく予定です。


5. 最後のパートでは、さまざまなAIを実務でどのように使っているのかをシミュレーションしてみます。

セクション6はミニスプリントです。GitHubのオープンソースをFigmaに取り込み、FigJam Agentで企画し、デザインシステムで画面を作成し、Figma Makeでプロトタイプを作成し、ハンドオフを作成してコードに移行します。

個別の機能を学ぶのではなく、AI組織が実際にどのように仕事を進めているのかを、最後のパートで直接体験します。



講義を終えると

  • 自分のチームのデザインシステムを診断チェックリストで点検し、何から改善するか優先順位を決められます

  • FoundationからComponentまでのトークン構造を原則に基づいて設計し、エージェントで構築できます

  • AIの成果物のばらつきを測定して原因をシステムの欠落まで遡って特定し、ルールを補強できます

  • Dev ModeとMCPで、デザインからコードへつながるハンドオフを主導できます

  • 企画からプロトタイプ、コード化まで、一つのワークフローで完遂できます

  • 講義が終わった後も、自ら学習を続ける習慣が身につきます


このように進めます

ミッション
4~5回の授業ごとにミッションがあります。成果物や考えをコメントに残すと、同じ実習に取り組む他の受講生とフィードバックを交換できます。ネーミングルールのように正解が1つではないテーマや、AIが間違えた点のように失敗を共有するテーマを中心に構成しています。

演習資料
NotionワークスペースとGitHubリポジトリで提供します。すべての演習に開始ファイルが用意されているため、途中でつまずいても続けて進められます。

提供資料
AI Readable診断チェックリスト、実習用デザインシステムファイル、自己学習ルーティン運用表

コミュニティ
Naverカフェとオープンチャットで質問し、成果物を共有できます。


受講前にご確認ください

前提知識

  • Figmaでフレーム・オートレイアウト・コンポーネントを直接作成した経験。
    セクション1で基礎知識を学ぶことはできますが、Figmaの理解度によっては、今回の講義で基礎を身につけるには十分でない場合があります。

  • コードを直接書く必要はありません。コードへの変換はAIが行い、私たちはそれを読んで判断します。

受講環境

  • ProfessionalまたはEdu以上のFigma有料アカウントのFull seatが必要です。

  • 企業プラン(Organization以上)専用機能は講師のデモのみで進めます。

  • GitHubアカウント(無料)、Notionアカウント(無料プラン)

  • ClaudeなどのAIコーディングツール(セクション5~6の実習)

  • デスクトップ環境(Windows / macOS)

Figmaアカウントは必須です。その他の準備物については、無料で公開されている準備物の案内を先にご確認ください。


誰が作りましたか

ダングンソフトはFigmaの公式チャネルパートナーとして、企業のデザイン・開発組織におけるFigmaの導入やFigmaオンボーディング、デザインシステムのコンサルティングを支援してきました。

講義を担当するイ・ジュハンマネージャーは、ダングンソフトでUX/UIデザインアドボケイトとして業務に携わっています。
現場で同じデザインシステムをめぐり、デザイナーと開発者が異なる解釈をする問題に繰り返し直面し、その解決策をこの講義の構成と演習に落とし込みました。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • デザインシステムを運用しており、AIが生成した成果物の品質と一貫性を高めたい3年以上の経験を持つデザイナー

  • Figmaファイルをコードに移行する際、トークン、コンポーネント、命名の不一致を繰り返し修正するフロントエンド開発者

  • 基礎的なFigmaの使用を超えて、オープンソースのデザインシステムを分析し、実務レベルに改善したい中級学習者

  • Figma Make、FigJam Agent、Dev Mode MCPを実際のプロジェクトに連携して生産性を高めたいデザイナー・開発者

  • 企画・デザイン・開発を一人で行い、AIベースのデザインシステムとコード変換ワークフローの構築を目指す一人のクリエイター

前提知識、
必要でしょうか?

  • Figmaの基本操作ができる方(セクション1は実習についていくためのウォーミングアップ程度であり、基礎入門講座のように詳しく構成されているわけではありません。)

  • AIツールに関する基本的な知識をお持ちの方

  • 授業ではChatGPTとFigmaの有料アカウントを使用します。

こんにちは
tgeduです。

こんにちは、タングンソフトです。

タンガンソフトは、2002年から韓国国内のIT企業とともに歩んできたソフトウェアソリューションパートナーです。

お客様にどのようなツールが必要なのかを共に考えるコンサルティングから、ソリューションの導入・技術サポート、そして組織全体で実際に活用できるようにするB2B研修まで、ソフトウェアに関わるあらゆる業務をお客様と共に行っています。

Figma、Protopie、JetBrains、GitHub、Microsoft、Adobe、Autodesk、Dockerをはじめ、ほぼあらゆる分野のソフトウェアを取り扱っています。特定の製品だけに特化した会社ではなく、企業の作業環境全体を見据え、どのような組み合わせが適しているのかを設計してきました。また、各開発元から最上位ランクのパートナーシップを認定され、現在はAPAC地域の総代理店事業を通じてグローバル企業へと成長を遂げています。

国内のほとんどの大企業にソリューションを提供し、対話する中で現場で繰り返し直面してきた問題とその解決策を、これからはより多くの方々と共有していきます。

Dangunsoft公式YouTube:https://www.youtube.com/@tangunsoft
Dangunsoft公式Instagram:https://www.instagram.com/tangunsoft/
Dangunsoft公式LinkedIn:https://www.linkedin.com/company/tangunsoft/posts/?feedView=all

もっと見る

共同知識共有者

カリキュラム

全体

51件

講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価が集まっていない講座です。
ぜひ最初のレビューをお寄せください。

似ている講座

同じ分野の他の講座を見てみましょう!

期間限定セール

¥169,400

30%

¥30,360