購読者の皆様、今日はフェリックス・リーとの新しいエピソードを共有したいと思います。 Felix は、何千人ものデザイナーに Claude Code と Figma MCP を使ったコーディング方法を教えてきました。私は彼に、Figma のデザインを実際に動作する Web サイトに変換する方法と、Web サイトを Figma で編集可能なレイヤーに戻す方法を見せてもらいました。出荷できるデザイナーは、今日のテクノロジー業界で最も貴重な人材の 1 人です。このエピソードを見てその方法を学びましょう。YouTube、Apple、Spotify で今すぐ視聴できます。 Felix と私は次のことについて話しました:(00:00) Felix が設計し、Claude Code で構築した 3 つの製品(06:36) ワンショットで 3D アニメーション世界地図を構築(07:50) ランディング ページがどれほど優れているかを分析する Felix のアプリ(13:17) デモ: Figma のデザインから 15 分で動作する Web サイトまで(23:07) デモ: FigJam のフローチャートから動作するゲーム(31:30) UXデザイン フィードバックのためのレビュー担当者のスキル(40:19) コードを編集可能なデザインとして Figma にエクスポートする方法(45:10) ほとんどのデザイナーが十分な速さで適応していない理由Replit と提携できることを誇りに思いますReplit の Agent 4 は、チームが AI エージェントと連携するための最良の方法です。これを使用すると、次のことが可能になります。 無限のキャンバスでデザインのバリエーションを探索する タスク ボードを使用して、複数の AI エージェントを同時に使用して構築する。 美しいスライド デッキ、アニメーションなどを 1 回のショットで生成する。 チェックアウト時にコード PYANG26 を使用して、Agent 4 を 3 か月間無料でお試しください。 Replit を 3 か月間無料で入手するこのエピソードから学んだトップ 10 のポイントFigma を使用する場合、設計からコードに移行する最良の方法は Figma MCP です。インストールします。ターミナルで「claude mcp add --transport http figma https://mcp.figma.com/mcp」を実行して認証します。 Claude Code を開き、「/mcp」と入力して、Figma を選択します。ブラウザが開き、Figma アカウントで MCP を認証できます。Figma フレームをコピーします。次に、Figma デザインの 1 つに移動し、任意のフレームまたはレイヤーを右クリックします。 「リンクを選択範囲にコピー」を選択し、「このデザインをビルドしてください」というプロンプトとともにリンクをクロード コードに貼り付けます。とてもシンプルです。コードを編集可能な Figma レイヤーに変換して戻し、より多くのデザインのバリエーションを探索します。 Figma MCP のセットアップ後にこれを段階的に行う方法は次のとおりです。 続きを読む

You May Also Like

Enjoyed This Article?

Get weekly tips on growing your audience and monetizing your content — straight to your inbox.

No spam. Join 138,000+ creators. Unsubscribe anytime.

Create Your Free Bio Page

Join 138,000+ creators on Seemless.

Get Started Free