Video wird geladen...
Video konnte nicht geladen werden
Webデザイナー・コーダー必見 【Figma MCPとは】 FigmaとCursor等のAIエディタ連携で、コーディングを自動化できるようになりました。 これにより「デザインカンプからのコーディングはまだAIじゃ難しいね」という常識が覆りつつあります。 リプで詳しく説明します。
101,542 Aufrufe • vor 1 Jahr •via X (Twitter)
6 Kommentare

ショーヘー@デイトラ代表 | 累計受講生数30,000人突破vor 1 Jahr
MCPとは

ショーヘー@デイトラ代表 | 累計受講生数30,000人突破vor 1 Jahr
Figma MCPを使用した制作事例① Figma MCPで構築したサイト、デザインの80%は再現できている。

ショーヘー@デイトラ代表 | 累計受講生数30,000人突破vor 1 Jahr
Figma MCPを使用した制作事例②

ショーヘー@デイトラ代表 | 累計受講生数30,000人突破vor 1 Jahr
Figma MCPで高い再現度を出すためには ・コンポーネント指向でデザインする ・オートレイアウト等のFigmaの標準機能をきちんと使う まずこの2点だと思います。 ↓他に使用された方も同じような感想を抱かれてました。

ショーヘー@デイトラ代表 | 累計受講生数30,000人突破vor 1 Jahr
Figmaでコンポーネントを作り込み、それらのパーツを組み合わせてデザインすることで、デザインカンプからほぼコーディングなしでサイト公開まで可能になりました。 ・デザイナーのコンポーネント指向の理解 ・デザイナーのFigmaの標準機能の理解 ・チーム内でのワークフローの整理 このあたりが重要になってきます。 コーダーの役割は ✔︎デザイナーと連携したデザインルールの整備 ✔︎AIエディタで作ったサイトの最終調整 ✔︎コンポーネントで対応しきれないデザイン性が高い(アート寄りの)ページの実装 に変化していくと思います。 もちろん現場への浸透には多少時間がかかると思いますが、理論上はすでにこれで十分になっています。 確実に人員の削減は起きると思ったほうがいいです。 コーダーは危機感を持ちつつ、最新情報をキャッチアップしていく必要があります。

NICEvor 1 Jahr
Stay competitive by balancing cutting-edge AI with automation tools. Forrester shows how.
