Figma へのインポート: Buddy は、画像、HTML、Claude デザイン、Claude プロトタイプ、および Web サイトをレイヤーに変換します1 min read

デザイン作業はもはや 1 か所で始まるわけではありません。

最初のアイデアが Claude Design プロトタイプである場合もあります。場合によっては、Claude アーティファクトであることもあります。場合によっては、HTML の実験、スクリーンショット、お気に入りのランディング ページ、またはチームが学びたいライブ Web サイトであることもあります。

問題は、AI や Web に面白いものを作ってもらえないことです。問題は、そのアイデアを製品設計が実際に行われる場所、Figma に戻すことです。

Buddy を使用すると、ほぼすべてのものを Figma にインポートし、キャンバス上で編集可能なデザイン レイヤーに変換できます。 フラット化されたスクリーンショットではありません。静的な参照画像ではありません。実際のレイヤーを編集、整理、調整、引き渡すことができます。

Buddyを使用して何でもFigmaにインポートし、その後Figmaでデザインを続けます

Buddy は、Anima の Figma AI のデザインエージェントです。 ZXTRM007ZX 内に常駐し、キャンバスを読み取り、チャットを通じてデザインの作成、編集、整理を支援します。

現在、Buddy は、外部のインスピレーションと Figma ワークフローの間の橋渡しとしても機能します。アーティファクト、画像、スクリーンショット、HTML、または URL を貼り付けると、Buddy がそれを編集可能な Figma レイヤーに変換するため、すべてのフレームを手動で再構築することなくデザイン プロセスを続行できます。

つまり、次のことから始められるということです。

• Claude Design アーティファクト、AI で生成されたインターフェイスを Figma に取り込みたい場合。
• Claude アーティファクト、プロトタイプ、画面、またはインタラクティブなアイデアが ZXTRM006ZX で作成されたとき。
• HTML アーティファクト、生成された ZXTRM012ZX またはコード化されたモックアップから設計が開始される場合。
• 画像とスクリーンショット、ビジュアル参照を貼り付けて、編集可能な ZXTRM007ZX レイヤーを取得したい場合。
• ウェブサイト URLs、公開 Web サイトを検査およびリミックスできるデザインとして Figma に複製する場合。

ワークフローはシンプルです。ソースを Buddy に取り込み、Anima に視覚的な構造を解釈させ、その後、Figma キャンバス上で直接デザインを続けます。

これが重要な理由: AI は最初のドラフトを提供し、Figma はコントロールを提供します

ZXTRM014ZX ツールは、最初のドラフトを生成するのに非常に優れています。アプリのコンセプト、ランディング ページ、ダッシュボード、オンボーディング フロー、価格設定ページ、内部ツール、製品実験を数分で作成できます。

しかし、プロのデザイン作業は初稿で終わるわけではありません。通常はそこから始まります。

チームは引き続き、コピーを編集し、階層を修正し、ブランドを適用し、間隔を調整し、コンポーネントを使用し、エッジケースをレビューし、他のデザイナー、PM、エンジニアが実際に作業できるファイルを準備する必要があります。

だからこそ輸入が重要なのです。 AI で生成されたアイデアがチャット ウィンドウ、アーティファクト ビューア、スクリーンショット、ブラウザ タブ内に閉じ込められたままだと、実際の製品設計ワークフローに変えるのは困難です。

Buddy は、その作業を編集可能なレイヤーとして Figma に戻すため、AI の出力はチームが形作ることができるものになります。

Claude Design アーティファクトを Figma にインポートする

Claude Design は、UI のアイデアやインタラクティブなコンセプトをすばやく検討するのに最適です。製品、機能、またはランディング ページを説明し、洗練された成果物を迅速に取得できます。

ただし、次のステップがデザインのレビュー、ブランドの改良、または引き継ぎである場合、チームは通常、Figma の結果を必要とします。

Buddy を使用すると、Claude Design アーティファクトを Figma に持ち込み、そこから続行できます。 Buddy はインターフェイスを編集可能なレイヤーとして再作成するため、キャンバス上のレイアウト、タイポグラフィ、色、間隔、アイコン、コンテンツを調整できます。

これは、創設者、PM、マーケティング担当者、またはエンジニアが最初に ZXTRM014ZX プロトタイプを作成し、次にデザイナーにそれを製品品質に仕上げてもらいたい場合に便利です。

Claude アーティファクトと AI プロトタイプをインポートする

Claude アーティファクトには複数の画面が含まれる場合があります。これらには、状態、パネル、メニュー、フォーム、テーブル、カード、空の状態、および完全な UI コンセプトを含めることができます。

手動でスクリーンショットを撮ってデザインをトレースする代わりに、アーティファクトを Buddy に貼り付けます。 Anima は、チームが編集できる構造化された Figma デザインに変換します。

キャンバス上に配置すると、次のことが可能になります。

• 画面をフレームに分割します。
• テキストと製品コピーを編集します。
• 間隔と階層を調整します。
• 一般的なビジュアルをブランド資産に置き換えます。
• デザイン システムを適用します。
• レビューまたはエンジニアリングの引き継ぎのために設計を準備します。

ZXTRM014ZX プロトタイプは行き止まりではなく出発点となります。

HTML アーティファクトを Figma にインポートする

多くの AI ツールは、設計出力として HTML を生成するようになりました。これは簡単なプレビューには便利ですが、HTML が製品設計を評価するのに常に最適な場所であるとは限りません。

デザイナーにはキャンバスのコントロールが必要です。レイヤーを移動し、オプションを比較し、階層を検査し、作業をデザイン システムに合わせて調整する必要があります。

Buddy は、HTML アーティファクトを Figma に戻すことで役立ちます。 HTML 出力をソースとして使用し、それを編集可能な Figma レイヤーに変換して、クリーンアップ、再編成、および磨きをかけることができます。

これは、最初にコードでプロトタイプを作成し、その後共同作業用に適切な設計ファイルが必要になるチームにとって特に役立ちます。

画像またはスクリーンショットを貼り付けて、編集可能な ZXTRM007ZX レイヤーを取得します

製品の作業にはスクリーンショットが随所に使用されます。

ユーザーは気に入ったフローのスクリーンショットを送信します。チームメイトが競合他社のページを共有しています。 PM は大まかな UI アイデアを Slack にドロップします。創設者は別の AI ツールを使用してランディング ページをスケッチします。

通常、そのスクリーンショットは単なる参考です。 ZXTRM007ZX に配置することはできますが、編集する場合は UI を手動で再構築する必要があります。

Buddy を使用すると、画像またはスクリーンショットを貼り付けて、編集可能な Figma レイヤーに変えることができます。テキスト、レイアウト、視覚的構造、UI 要素は、キャンバス上で操作できるものになります。

これにより、変更を加えるためだけに既存のものを再作成するという、プロセスの最も面倒な部分が省略されます。

URL を貼り付けて、任意の Web サイトのクローンを作成します

ウェブサイトのインスピレーションは、新製品やマーケティング活動の最も一般的な出発点の 1 つです。

あなたは SaaS ホームページの構造が好きなのかもしれません。価格設定ページを検討したいと思うかもしれません。場合によっては、ダッシュボードのレイアウト、オンボーディング フロー、またはランディング ページのセクションをキャプチャする必要があるかもしれません。

Buddy を使用すると、Web サイト URL を貼り付け、そのページを編集可能なデザインとして Figma に取り込むことができます。 Buddy は、スクリーンショットを保存する代わりに、キャンバス上のレイヤーとして視覚構造を再作成するのに役立ちます。

これを使用して、パターンから学習したり、代替案を探索したり、ムードボードを作成したり、新しいページの最初のバージョンを高速化したりできます。次に、コピー、コンポーネント、ブランド、製品ストーリーを加えて、それを自分のものにします。

ZXTRM007ZX キャンバスで得られるもの

主な違いは編集可能性です。

ZXTRM010ZX は、キャンバス上にビットマップを配置するだけではありません。目標は、編集、レビュー、改善できる実行可能な Figma デザインを提供することです。

インポート後は、通常の ZXTRM007ZX 作業を続行できます。

• テキストを直接編集します。
• レイヤーを移動してサイズ変更します。
• 色、フォント、間隔、階層を調整します。
• フレームとセクションを整理します。
• 必要な箇所にAuto Layoutを塗布してください。
• 大まかな要素を実際のコンポーネントに置き換えます。
• 結果を設計システムに合わせます。

それがBuddyのポイント、コントロールを失わずにスピードを出せることです。

AI で生成されたデザインのワークフローが改善されました

古いワークフローは次のようになっていました。

1. AI ツールでアイデアを生成します。
2. スクリーンショットを撮ります。
3. スクリーンショットをFigmaに貼り付けます。
4. 設計を最初から手動で再構築します。
5. 実際の設計作業を開始します。

ZXTRM010ZX ワークフローは短くなります。

1. ソースを作成または検索します: アーティファクト、HTML、画像、スクリーンショット、または URL。
2. ZXTRM010ZXに貼り付けます。
3. 編集可能な ZXTRM007ZX レイヤーを取得します。
4. キャンバス上でデザインを続けてください。

AI と Web インスピレーションから始めるチームが増えているため、これは重要ですが、依然としてプロフェッショナルなデザイン ワークフローが必要です。 Buddyはそれらの世界を繋ぎます。

これは誰のためのものですか?

Buddy への何でもインポートは、Figma ワークフローを失うことなく迅速に作業を進める必要がある人にとって便利です。

• デザイナー ZXTRM014ZX の出力とスクリーンショットを編集可能な開始点に変えることができます。
• PM Claude のアーティファクトや Web サイトの参照を Figma に取り込んで、より明確な製品ディスカッションを行うことができます。
• 創設者 すべてを手動で再構築することなく、アイデアから設計ファイルに移行できます。
• マーケター ランディング ページのインスピレーションをコピーしてブランドに適応させることができます。
• エンジニア HTML または AI ツールでプロトタイプを作成し、その結果を設計に戻すことができます。

デザインを置き換えるわけではありません。それは、アイデアと編集可能なキャンバスの間の退屈な再構築作業を取り除くことです。

次のアイデアを ZXTRM010ZX にインポートしてみてください

次の優れた製品画面は、Claude Design、Claude アーティファクト、生成された HTML プロトタイプ、スクリーンショット、または Web サイト URL で始まる可能性があります。

Buddy を使用すると、その出発点を既存のワークフローで編集可能な Figma デザインにすることができます。

それをBuddyに貼り付け、キャンバス上にレイヤーを取得し、デザインを続けます。