Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

FigmaからMCPでコーディングの自動化が可能に。「Figma MCP」を使えばFigmaのデザインをCursor、ClineなどのAIプログラミングツールに直接渡してコーディングができる。生産性100%上がる。詳細はリプ欄へ。

みるぼん@スモビジ

35,873 subscribers

46,791 views • 1 year ago •via X (Twitter)

Education Science & Technology

Anya Rossi• Live Now

Private livecam show

2 Comments

みるぼん@スモビジ1 year ago

こちらから。

Yang1 year ago

Want to learn how practical AI skills and automations for your business and work? Check out our 50+ step-by-step video tutorials 100% FREE 20+ hours of Ai and Automation goodness absolutely free 🥳

Related Videos

Webデザイナー・コーダー必見【Figma MCPとは】 FigmaとCursor等のAIエディタ連携で、コーディングを自動化できるようになりました。これにより「デザインカンプからのコーディングはまだAIじゃ難しいね」という常識が覆りつつあります。リプで詳しく説明します。

Webデザイナー・コーダー必見【Figma MCPとは】 FigmaとCursor等のAIエディタ連携で、コーディングを自動化できるようになりました。これにより「デザインカンプからのコーディングはまだAIじゃ難しいね」という常識が覆りつつあります。リプで詳しく説明します。

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

101,542 views • 1 year ago

CursorのVisual Editor（ビジュアルエディター）を早速使ってみたら、エグかった😱 1. Figma UIでデザインを編集。paddingの調整・グラデーションの変更など 2. Applyを押す 3. コードがそのまま実現💐 「Figmaで描いた絵を再現する」時代から「Figmaである程度デザインを作って、Cursor上で最終成果物を直接いじってAIにコードを書かせる」時代になった。なお、ビジュアルエディターのUIはどうみてもFigmaです。ありがとうございます #Figma #Cursor

CursorのVisual Editor（ビジュアルエディター）を早速使ってみたら、エグかった😱 1. Figma UIでデザインを編集。paddingの調整・グラデーションの変更など 2. Applyを押す 3. コードがそのまま実現💐 「Figmaで描いた絵を再現する」時代から「Figmaである程度デザインを作って、Cursor上で最終成果物を直接いじってAIにコードを書かせる」時代になった。なお、ビジュアルエディターのUIはどうみてもFigmaです。ありがとうございます #Figma #Cursor

鹿野壮 Takeshi Kano

197,870 views • 6 months ago

ベテランコーダー vs AIを使った素人！コーディング対決🔥 Figma MCPなどのAIツールの登場で、SNSでは「もうコーダーは不要では？」「誰でも簡単にサイトが作れる時代が来た🙌」といった声も増えてきました。 …でも本当に、AIを使えば素人でもベテランに勝てるのか？今回はそれを徹底検証！人間 vs AI のコーディング対決、果たして勝つのはどっちだ！？

ベテランコーダー vs AIを使った素人！コーディング対決🔥 Figma MCPなどのAIツールの登場で、SNSでは「もうコーダーは不要では？」「誰でも簡単にサイトが作れる時代が来た🙌」といった声も増えてきました。 …でも本当に、AIを使えば素人でもベテランに勝てるのか？今回はそれを徹底検証！人間 vs AI のコーディング対決、果たして勝つのはどっちだ！？

大滝昇平@デイトラ代表 | 累計受講生数30,000人突破

18,698 views • 1 year ago

もうコーディングはしなくて良いかも！？ Figmaで作成したデザインがあるAIツールに共有リングを貼るだけで自動でコードを生成してくれるよ！この便利なAIツールを知りたい方は、「好きな果物」をリプで教えてね☺️ ちなみにコーディングのスキルは AIが出てきて活きることはあってもいらなくなることはないから心配しないで大丈夫。むしろ、今辛い中頑張ってるあなた。デザインもコーディングも乗り越えた先は明るいから諦めないでね😌 #webデザイン #AI

もうコーディングはしなくて良いかも！？ Figmaで作成したデザインがあるAIツールに共有リングを貼るだけで自動でコードを生成してくれるよ！この便利なAIツールを知りたい方は、「好きな果物」をリプで教えてね☺️ ちなみにコーディングのスキルは AIが出てきて活きることはあってもいらなくなることはないから心配しないで大丈夫。むしろ、今辛い中頑張ってるあなた。デザインもコーディングも乗り越えた先は明るいから諦めないでね😌 #webデザイン #AI

あいり｜Webデザイナーで人生を変えるきっかけを

15,633 views • 1 year ago

これはChatGPT Proの解約が視野に入る。 Claude MCPでBrave Searchを入れてからThinking Modeを使えば擬似DeepResearchが可能。さらにArtifacts機能が起動して資料や図解化まで一気通貫で出来る。使い勝手の良いAIエージェントですよ。MCPについてはリプ欄の動画で誰でも出来るように解説してる。

これはChatGPT Proの解約が視野に入る。 Claude MCPでBrave Searchを入れてからThinking Modeを使えば擬似DeepResearchが可能。さらにArtifacts機能が起動して資料や図解化まで一気通貫で出来る。使い勝手の良いAIエージェントですよ。MCPについてはリプ欄の動画で誰でも出来るように解説してる。

KEITO💻AIディレクター

323,063 views • 1 year ago

話題の Figma sites を触って LPのデザイン作成〜公開までしてみました❤️‍🔥 ▪️デザイン〜公開までFigma上で完結できるの感動 ▪️レスポンシブ対応が直感的にできる、調整しても崩れにくい ▪️ホバーアクションや簡単なアニメーション、リンク設定も直感的に可能（楽しい） ▪️ファビコン、OGPもFigmaで設定可能 ▪️meta情報（タイトル、ディスクリプション）も登録できる ▪️サブドメインとの接続可能で、オリジナルのドメインを使えるタグの設定など、まだまだできることはありそうです今後CMSなども追加されるようなので、楽しみ❣️ ▶︎

話題の Figma sites を触って LPのデザイン作成〜公開までしてみました❤️‍🔥 ▪️デザイン〜公開までFigma上で完結できるの感動 ▪️レスポンシブ対応が直感的にできる、調整しても崩れにくい ▪️ホバーアクションや簡単なアニメーション、リンク設定も直感的に可能（楽しい） ▪️ファビコン、OGPもFigmaで設定可能 ▪️meta情報（タイトル、ディスクリプション）も登録できる ▪️サブドメインとの接続可能で、オリジナルのドメインを使えるタグの設定など、まだまだできることはありそうです今後CMSなども追加されるようなので、楽しみ❣️ ▶︎

s a k i｜INDIG,Inc. CDO｜UIデザイナー

61,942 views • 1 year ago

Claude Designが大幅アップデート。今回大きいのは、単にAIでデザインを生成するだけでなく、・既存のデザインシステムを読み込んで反映・キャンバス上で直接編集・Claude Codeと同期して、そのまま実装までつながったこと。特に目玉はキャンバス上で直接編集できる「Editモード」の追加。実際に使ってみた感想。 1. 用途に応じたタブの切り替えが分かりやすい・Simpleタブ：文字サイズを変えるなどかんたんな調整ができる・Proタブ：よりFigmaのようにレイヤー情報を確認しながら、細かく編集ができる 2. 画面を切り替えずにインタラクションを確認できて良い・Click throughモード：Figmaのプロトタイプモードのように実際の操作感を確認できるさらにデザインシステムやClaude Codeの連携が加わってデザインから実装までの距離がまた一段と縮まった感。

Claude Designが大幅アップデート。今回大きいのは、単にAIでデザインを生成するだけでなく、・既存のデザインシステムを読み込んで反映・キャンバス上で直接編集・Claude Codeと同期して、そのまま実装までつながったこと。特に目玉はキャンバス上で直接編集できる「Editモード」の追加。実際に使ってみた感想。 1. 用途に応じたタブの切り替えが分かりやすい・Simpleタブ：文字サイズを変えるなどかんたんな調整ができる・Proタブ：よりFigmaのようにレイヤー情報を確認しながら、細かく編集ができる 2. 画面を切り替えずにインタラクションを確認できて良い・Click throughモード：Figmaのプロトタイプモードのように実際の操作感を確認できるさらにデザインシステムやClaude Codeの連携が加わってデザインから実装までの距離がまた一段と縮まった感。

❖ ken｜旅するデザイナー

202,255 views • 9 days ago

Figma (Figma) Chief Product OfficerのYuhki Yamashita (Yuhki Yamashita)をインタビューしました！ 1/ 商品ラインナップを倍増 2/ Figmaの商品開発プロセス 3/ ユーザーハックから生まれた商品 4/ AIで重要なのは「遊び心」と「好奇心」 5/ AI時代でどのように仕事が変わるのか詳細は↓

Figma (Figma) Chief Product OfficerのYuhki Yamashita (Yuhki Yamashita)をインタビューしました！ 1/ 商品ラインナップを倍増 2/ Figmaの商品開発プロセス 3/ ユーザーハックから生まれた商品 4/ AIで重要なのは「遊び心」と「好奇心」 5/ AI時代でどのように仕事が変わるのか詳細は↓

Off Topic / オフトピック

22,820 views • 11 months ago

ついさっきリリースされたFigma公式のChrome拡張、かなり実用的だった✨ Webページ全体や特定のUIをキャプチャして、Figmaに貼ると編集可能なレイヤーとして持ってこれる。画像として貼られるのではなく、テキストやフレーム、画像、図形として扱えるのが大きい。試しに Figma MCPで提供していた`generate_figma_design`が、Chrome拡張から、簡単にできるようになった...と理解してる。これで結構デザインの景色が変わりそう。

ついさっきリリースされたFigma公式のChrome拡張、かなり実用的だった✨ Webページ全体や特定のUIをキャプチャして、Figmaに貼ると編集可能なレイヤーとして持ってこれる。画像として貼られるのではなく、テキストやフレーム、画像、図形として扱えるのが大きい。試しに Figma MCPで提供していた`generate_figma_design`が、Chrome拡張から、簡単にできるようになった...と理解してる。これで結構デザインの景色が変わりそう。

こぎそ

155,512 views • 15 days ago

Figmaに代わるデザインツール登場。 WebデザイナーといえばPhotoshop、XDと言われた時代からFigmaの時代へ。そして、AIによる新たなツールが登場した！その名も「Onlook」要約すると、デザインしたものをそのまま公開できるらしい。デザイナーからエンジニアへ渡す開発工程すらも変わりそう。

Figmaに代わるデザインツール登場。 WebデザイナーといえばPhotoshop、XDと言われた時代からFigmaの時代へ。そして、AIによる新たなツールが登場した！その名も「Onlook」要約すると、デザインしたものをそのまま公開できるらしい。デザイナーからエンジニアへ渡す開発工程すらも変わりそう。

酒井龍太郎｜UIUXデザイナー

76,228 views • 1 year ago

WebサイトやUIを作る人はGoogleから新しく出た「Stitch」を使った方が良い 100文字程度の入力（リプ参照）でこのサイトが生成されます。右上のボタンから色やフォントなどの変更も可能。コードとFigmaのコピペもできるので、叩き台フェーズの工数が大幅に削減できます。

WebサイトやUIを作る人はGoogleから新しく出た「Stitch」を使った方が良い 100文字程度の入力（リプ参照）でこのサイトが生成されます。右上のボタンから色やフォントなどの変更も可能。コードとFigmaのコピペもできるので、叩き台フェーズの工数が大幅に削減できます。

KAWAI

83,014 views • 1 year ago

Geminiのキャンバス機能が魔進化して、生成AI入りのアプリを作れるようになっている… コーディングして作らせたものに「Gemini機能を追加」ボタンを押すだけで、Geminiによる生成機能を付けられる。例えばクイズを作った場合、「再生成」ボタンを追加して、ボタンを押すと「問題文を生成し直す」ことができる。「普通、API使わないとできない」ということを、無料でノーコードでできる。おそらく使ってるAIモデルはFlashなのであまり賢くないけど、無料で作れるプロトタイプとしては可能性しかない。

Geminiのキャンバス機能が魔進化して、生成AI入りのアプリを作れるようになっている… コーディングして作らせたものに「Gemini機能を追加」ボタンを押すだけで、Geminiによる生成機能を付けられる。例えばクイズを作った場合、「再生成」ボタンを追加して、ボタンを押すと「問題文を生成し直す」ことができる。「普通、API使わないとできない」ということを、無料でノーコードでできる。おそらく使ってるAIモデルはFlashなのであまり賢くないけど、無料で作れるプロトタイプとしては可能性しかない。

エクセル兄さん(たてばやし淳)@ExcelとChatGPT著書多数

185,725 views • 1 year ago

検閲ゼロのもはや無法地帯のAIが公開 100％無料＆無制限&検閲ゼロで使えるEternal AIが公開。ChatGPTでは弾かれる内容や画像生成のリクエストにも対応。コーディングもできるので、webサービスの開発も可能。実例はリプ欄から↓

検閲ゼロのもはや無法地帯のAIが公開 100％無料＆無制限&検閲ゼロで使えるEternal AIが公開。ChatGPTでは弾かれる内容や画像生成のリクエストにも対応。コーディングもできるので、webサービスの開発も可能。実例はリプ欄から↓

みるぼん@スモビジ

370,308 views • 5 months ago

『2025年末にはAIのコーディング能力は深刻なものとなる』今、世界No.1のコーディング力を誇るAnthropic CEOダリオが語ったAI開発の未来。 ”AIコーディング能力は2025年末までに「非常に深刻な」レベルに達し、2026年後半には最高の人間のコーダーと肩を並べるかもしれない。この脅威を感じるのは、我々がそれを構築しているからだ。”

『2025年末にはAIのコーディング能力は深刻なものとなる』今、世界No.1のコーディング力を誇るAnthropic CEOダリオが語ったAI開発の未来。 ”AIコーディング能力は2025年末までに「非常に深刻な」レベルに達し、2026年後半には最高の人間のコーダーと肩を並べるかもしれない。この脅威を感じるのは、我々がそれを構築しているからだ。”

チャエン | デジライズ CEO《重要AIニュースを毎日最速で発信⚡️》

27,375 views • 1 year ago

ワンクリックでデザインからHTML・CSSを自動生成できるFigmaプラグイン「CodeLens Pro」をリリースしました🤍 こちらから使えます👇 ※5日間無料トライアル（通常は$15）で使えます🥳 このプラグインでは要素選択してワンクリックで 🌸HTML・CSSコード 🌸TailwindCSS 🌸pxをremに変換 🌸あしらいを擬似要素として使えるコード 🌸line-heightの自動計算 🌸画像のaspect-ratioの値を自動算出などが生成できます！またお好みで 🌸同時に複数要素のコードを生成 🌸任意のSCSS関数名へ変更可能（例）rem()など 🌸rem出力のベースフォントサイズカスタマイズ可能（例）1rem = 16pxの他10pxなど変更可能 🌸要素同士の余白を取得など各々のコードの書き方にカスタマイズ可能です！私自身もコーディングしていて「これできたら便利だな」と思う機能をたくさん搭載しました🥳 まずは無料で機能をお試しできるので使ってみてくれると嬉しいです🫶

ワンクリックでデザインからHTML・CSSを自動生成できるFigmaプラグイン「CodeLens Pro」をリリースしました🤍 こちらから使えます👇 ※5日間無料トライアル（通常は$15）で使えます🥳 このプラグインでは要素選択してワンクリックで 🌸HTML・CSSコード 🌸TailwindCSS 🌸pxをremに変換 🌸あしらいを擬似要素として使えるコード 🌸line-heightの自動計算 🌸画像のaspect-ratioの値を自動算出などが生成できます！またお好みで 🌸同時に複数要素のコードを生成 🌸任意のSCSS関数名へ変更可能（例）rem()など 🌸rem出力のベースフォントサイズカスタマイズ可能（例）1rem = 16pxの他10pxなど変更可能 🌸要素同士の余白を取得など各々のコードの書き方にカスタマイズ可能です！私自身もコーディングしていて「これできたら便利だな」と思う機能をたくさん搭載しました🥳 まずは無料で機能をお試しできるので使ってみてくれると嬉しいです🫶

ちい🐼 | AI×Web制作で人生に選択肢を

73,810 views • 7 months ago

え..これめちゃくちゃ革命では..... Figmaで一緒にデザインしてくれるAI 「Genius」が公開予定何をデザインしてるかを理解して、一緒にアイデアを出したり、デザインシステムのコンポーネントを使用してデザインを自動で完成してくれるみたい

え..これめちゃくちゃ革命では..... Figmaで一緒にデザインしてくれるAI 「Genius」が公開予定何をデザインしてるかを理解して、一緒にアイデアを出したり、デザインシステムのコンポーネントを使用してデザインを自動で完成してくれるみたい

やまかず

963,502 views • 3 years ago

開発中のFigmaのAIチャットプラグイン、編集可能なFigmaデータでリアルタイムに出せるようになってきた

開発中のFigmaのAIチャットプラグイン、編集可能なFigmaデータでリアルタイムに出せるようになってきた

しゃなはす

29,795 views • 1 year ago

Figmaの新しい機能を毎日投稿する5 ⚫︎Figma Draw(塗り＞パターン) すごい地味な機能なんだけど、塗りでパターンが選べるようになった。これ実は超すごくて「画像のパターン」と全然違ってパターンを見ながらリアルタイムで調整できる。フォトショ、イラレのパターン超えてる。相当使えそう

Figmaの新しい機能を毎日投稿する5 ⚫︎Figma Draw(塗り＞パターン) すごい地味な機能なんだけど、塗りでパターンが選べるようになった。これ実は超すごくて「画像のパターン」と全然違ってパターンを見ながらリアルタイムで調整できる。フォトショ、イラレのパターン超えてる。相当使えそう

ムラマツヒデキ｜クオートワークス

14,563 views • 1 year ago

UIデザイン界のCursorともいえる「Layermate」これはまさに求めていたものでした！「Layermate」はFigmaのプラグインで要はチャットでやり取りするだけでUIデザインが出来上がる → Figmaなので当然、微修正が可能。サクサクUIを自動で生成してくれるの見てるのも楽しい。無料でも1日5回までチャットできるのでぜひ試してみてください。動画では以下の2つのプロンプトを投げただけ。ーーーーー「AI Coaching Agent」というサービスの管理側ログイン画面を作って。デザインは最先端のテクノロジーを感じるスタイルでお願い。ーーーーー続けてログイン後のダッシュボードを生成して。ユーザー数や利用状況を一目で把握できるようにしたい。ーーーーー

UIデザイン界のCursorともいえる「Layermate」これはまさに求めていたものでした！「Layermate」はFigmaのプラグインで要はチャットでやり取りするだけでUIデザインが出来上がる → Figmaなので当然、微修正が可能。サクサクUIを自動で生成してくれるの見てるのも楽しい。無料でも1日5回までチャットできるのでぜひ試してみてください。動画では以下の2つのプロンプトを投げただけ。ーーーーー「AI Coaching Agent」というサービスの管理側ログイン画面を作って。デザインは最先端のテクノロジーを感じるスタイルでお願い。ーーーーー続けてログイン後のダッシュボードを生成して。ユーザー数や利用状況を一目で把握できるようにしたい。ーーーーー

オカムラ | 株式会社メイク・ア・チェンジ CEO

72,847 views • 1 year ago