AI最新トレンド

・

2026-08-12

Lovart AIとFigmaを連携してデザイン業務を効率化｜UIデザイン制作の流れを検証

Yuzuki Amano

💡Lovart AIとは？デザインエージェントの基本機能
🎨Yoomはデザイン進捗の共有を自動化できます
⚖️Lovart AIとFigmaの役割分担と使い分け
🛠️Lovart AIのデザインをFigmaに取り込む方法
💎Lovart AIの料金プランとクレジットの仕組み
🧪【実践】Lovart AIとFigmaの連携を検証
🚩Lovart AIをFigmaと連携する際の注意点
✅まとめ
🚀Yoomでできること

デザイン制作の現場では、常にスピードとクオリティの両立が求められます。
特に初期のアイデア出しや素材制作には多くの時間がかかりがちですが、AIツールの活用でそのフローは大きく変わります。本記事では、対話型デザインエージェント「Lovart AI」と、定番のデザインツール「Figma」を組み合わせた、効率的なワークフローをご紹介します！

💡Lovart AIとは？デザインエージェントの基本機能

Lovart AIは、単なる画像生成AIの枠を超えた「デザインエージェント」として位置づけられています。

▼デザインエージェントの仕組み

Lovart AIの特徴は、指示したプロンプトを単に画像に変換するのではなく、デザインの構成要素を理解して組み立てる点にあります。従来のAIとLovart AIの違いは、以下のとおりです。

従来のAI：プロンプトをもとに、一枚の画像としてデザインを生成する
Lovart AI：レイアウト、色彩、タイポグラフィなどのデザイン要素を統合的に管理し、デザインを構成する

ユーザーが「もっとモダンに」「ブランドカラーを強調して」と指示を追加すると、それまでの文脈を維持したままデザインを修正・発展させてくれます。この双方向のやり取りが、まさに「エージェント（代理人）」と呼ばれる所以です。

▼生成できるアセットの種類

Lovart AIで生成できるクリエイティブは非常に多岐にわたります。
たとえば、以下のようなアセットを生成できます。

ウェブサイトのUIモックアップ
ロゴデザイン
プロモーション用のポスター
SNS用のバナー
動画
商品画像やプレゼンテーション資料

一つのブランドコンセプトを定義すれば、それに基づいた多様な形式のアセットを一貫したトーンで出力できるため、キャンペーン全体のビジュアルを一気通貫で制作したい場合に非常に強力なツールとなります。

▼独自キャンバスによる対話型修正

Lovartの操作画面は「無限キャンバス」の形式を採用しており、生成されたデザインを並べて比較したり、特定の要素を選んで修正指示を出したりすることが可能です。
例えば、キャンバス上の特定のボタンを選択して

「この色を補色に変えて」

と指示を出すだけで、周辺要素とのバランスを考えた修正案が提示されます。
この試行錯誤のプロセスがキャンバス上で完結するため、アイデアを素早く形にし、直感的にブラッシュアップしていくことができます。

🎨Yoomはデザイン進捗の共有を自動化できます

デザイン制作はクリエイティブな作業である反面、関係者への更新連絡やフィードバックの回収といった事務的な手間が多く発生します。特にFigmaでの細かな修正を都度チャットツールで報告するのは骨が折れる作業ですね。そんな問題もYoomなら解決できます！[Yoomとは]

たとえば、Figmaでファイルが更新されたら、Slackに通知するといったことも可能です。
気になる方はぜひチェックしてみてくださいね👀

Figmaでファイルが更新されたら、Slackに通知する

試してみる

■概要
Figmaでデザインファイルを更新した際、関係者への共有を手動で行うことに手間を感じていませんか？都度の連絡は手間がかかるだけでなく、共有漏れやタイムラグの原因にもなり得ます。このワークフローを活用すれば、Figmaのファイル更新をトリガーとして、指定のSlackチャンネルへ自動で通知を送ることが可能です。デザインの変更点を迅速にチームへ共有し、スムーズな連携を実現します。
■このテンプレートをおすすめする方
Figmaのデザイン更新を、Slackを使い手動でチームに共有しているデザイナーの方
デザインの進捗確認やレビュー依頼の連絡を、より効率的に行いたいと考えているディレクターの方
チーム内の情報共有プロセスを自動化し、コミュニケーションロスをなくしたいマネージャーの方
■このテンプレートを使うメリット
Figmaのファイルが更新されると自動でSlackに通知が送信されるため、これまで手作業で行っていた連絡業務の時間を削減できます。
手動での連絡による通知の遅延や共有漏れといったヒューマンエラーを防ぎ、デザインの変更を関係者へ確実に周知できます。
■フローボットの流れ
はじめに、FigmaとSlackをYoomと連携します。
次に、トリガーでFigmaを選択し、「ファイルが更新されたら」というアクションを設定し、対象のファイルを指定します。
最後に、オペレーションでSlackの「チャンネルにメッセージを送る」アクションを設定し、通知内容を編集します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
Slackへの通知オペレーションでは、通知先のチャンネルを任意に設定することが可能です。
通知メッセージの本文は、固定のテキストを設定するだけでなく、トリガーで取得したファイル名や更新日時といった情報を変数として埋め込むなど、自由にカスタマイズできます。
■注意事項
Figma、SlackのそれぞれとYoomを連携してください。

詳細を見る  試してみる

定期的にFigmaから指定ファイルをダウンロードし、Boxに保存する

試してみる

■概要
Figmaで作成したデザインデータを、定期的に手動でダウンロードしてBoxにバックアップする作業に手間を感じていませんか？この作業は忘れがちで、重要なデザインアセットのバージョン管理が煩雑になる原因にもなります。このワークフローを活用すれば、Figma APIと連携し、指定したスケジュールで自動的にFigmaからファイルをダウンロードしてBoxへ保存するため、手作業による手間や更新漏れといった課題を解消し、デザインアセットの管理を効率化します。
■このテンプレートをおすすめする方
Figmaで作成したデザインファイルのバックアップを手作業で行っているデザイナーの方
Figma APIなどを活用して、デザインアセットのバージョン管理を自動化したい方
Boxを全社的なストレージとして利用しており、Figmaとの連携を効率化したい方
■このテンプレートを使うメリット
指定したスケジュールでフローが自動実行されるため、これまで手作業で行っていたファイル保存の時間を短縮し、本来のコア業務に集中できます。
手動でのバックアップ作業で起こりがちなダウンロード漏れや保存ミスを防ぎ、重要なデザインファイルを確実に管理することが可能になります。
■フローボットの流れ
はじめに、FigmaとBoxをYoomと連携します。
次に、トリガーでスケジュールトリガー機能を選択し、「指定のスケジュールになったら」というアクションを設定します。
次に、オペレーションでFigmaの「Get Image URL」アクションを設定し、指定ファイル内の特定要素の画像URLを取得します。
さらに、オペレーションでFigmaの「Download File」アクションを設定し、ファイル自体をダウンロードします。
最後に、オペレーションでBoxの「ファイルをアップロード」アクションを設定し、ダウンロードしたファイルを指定のフォルダにアップロードします。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
スケジュールトリガーの設定では、フローを起動させたい日付や曜日、時刻などを任意で設定できます。例えば、「毎週金曜日の18時」といった定期的な実行が可能です。
Figmaの各アクションでは、対象となるファイルのファイルキーや、画像として取得したい要素のノードIDを任意で設定してください。
Boxへファイルをアップロードするアクションでは、保存先のフォルダやアップロード時のファイル名を任意で設定できます。
■注意事項
Figma、BoxのそれぞれとYoomを連携してください。
Figmaの画像URLのアウトプットはJSONPathから取得可能です。取得方法は「『取得する値』を追加する方法」をご参照ください。
ダウンロード可能なファイル容量は最大300MBまでです。アプリの仕様によっては300MB未満になる可能性があるので、ご注意ください。
トリガー、各オペレーションでの取り扱い可能なファイル容量の詳細は「ファイルの容量制限について」をご参照ください。

詳細を見る  試してみる

⚖️Lovart AIとFigmaの役割分担と使い分け

両者は共にAIを冠していますが、その得意分野と活用シーンは明確に異なります。
それぞれの強みを理解して使い分けることが、業務効率化の鍵となります。

▼創造的なアイデア出しに強いLovart AI

Lovart AIは、白紙の状態から「何か新しいもの」を生み出すプロセスに特化しています。
特定のデザインシステムに縛られず、多様なビジュアルの方向性を提示してくれるため、プロジェクトの初期段階でのムードボード作成や、大胆なデザイン案の模索に最適です。マーケティング視点でのインパクトが求められるグラフィック制作において、人間の想像力を超えるヒントをくれる頼もしいパートナーといえます。

▼UIデザインの具体化と編集に強いFigma

Figmaは、アイデアを編集可能なUIデザインとして具体化し、Figma上でブラッシュアップしていく作業に強みがあります。
「First Draft」を使って初期デザインを生成できるほか、レイヤー名の変更、コンテンツの置換、インタラクションの追加など、デザインの整理からプロトタイプ制作までを幅広く支援します。多様なビジュアルの方向性を探るLovart AIに対し、Figmaは、生成したアイデアを実際に編集しながらUIとして形にしていく場面で活用しやすいツールです。

▼Lovart AIとFigmaを組み合わせたワークフロー

理想的な流れは、

Lovart AIでビジュアルコンセプトを爆発させる
Figmaでそれを製品として整形する

という形です。まずLovartで多種多様なビジュアル案を生成し、ステークホルダーとの合意形成を行います。方向性が決まったら、そのアセットをFigmaに持ち込み、必要な要素をコンポーネント化したり、Auto Layoutを設定したりして構造を整えます。そのうえで、Figmaによるレイヤー名の変更やインタラクションの追加などを活用します。
この「発散（Lovart）」と「収束（Figma）」のサイクルを回すことで、デザイン制作を効率化しやすくなります。

🛠️Lovart AIのデザインをFigmaに取り込む方法

Lovart AIで生み出した質の高いビジュアルは、Figmaへ持ち込むことで、より実務的なプロトタイプやUI設計へと昇華させることができます。

①Lovart AIからエクスポートする

Lovart AIで生成したコンテンツは、用途に合わせて複数の形式でエクスポートできます。

静止画に適したPNG
ロゴやアイコンの編集に便利なSVG
レイヤーを保持できるPSD
プレゼンテーションに使えるPPTX
動画素材として活用できるMP4

など、デザインアセットに応じた多彩なフォーマットが用意されています。
まずは用途に合った形式でローカルに保存することから、Figmaとの連携が始まります。

②SVGをFigmaにインポートする

アイコンやロゴ、単純なイラストなどをFigmaで活用する場合、SVG形式でのインポートが最も推奨されます。SVGファイルをFigmaにドラッグ＆ドロップすると、ベクターデータとして各パスが保持された状態で読み込まれます。これにより、Figma上でサイズを拡大しても画像が荒れることがなく、色味の微調整やパスの変形といった細かな編集も自由自在に行えます。
Lovartで生成した「素材」を、Figmaで「システム」の一部として組み込むための重要なステップです。

③画像アセットをFigmaに配置する

高精細なポスターやUIモックアップ全体をFigmaに取り込む場合は、PNG形式が便利です。
Figmaの「Place Image」機能を使えば、Lovartで書き出した画像をレイアウトの背景やコンポーネントの要素として簡単に配置できます。

Figma側では「Auto Layout」を活用して画像周辺の余白を制御したり、上からテキストを重ねて最終的な調整を行ったりすることで、AI生成物に人間の手による「整え」を加えた高品質なデザインが完成します。

💎Lovart AIの料金プランとクレジットの仕組み

Lovart AIを実務に取り入れるにあたって、コスト面での理解は欠かせません。
利用頻度に応じたプラン選択が重要になります。

▼利用できるプランの種類

Lovart AIは、無料で試せるFreeプランを除き、個人向けには大きく4つの有料プランが用意されています。
有料プランには、Starter、Basic、Pro、Ultimateがあり、それぞれ月間クレジット数や同時に実行できるタスク数などが異なります。利用規模や用途に合わせて、自分に合ったプランを選ぶとよいでしょう。また、料金プランは月額契約だけでなく、割引が適用される年額契約も選択できます。

▼クレジットの消費ルール

各プランでは毎月利用できるクレジット数が定められており、デザインの生成や修正など、リクエストの処理と最終出力の生成に使用されます。消費量は一律ではなく、

使用するモデルやツール
画像のサイズ、品質
タスクの複雑さ

などによって異なります。そのため、クレジットを効率よく使うには、生成前に各モデルの消費量を確認し、まずは必要最低限の設定で方向性を固めてから、用途に応じて品質や解像度を調整するとよいでしょう。

▼商用利用時の確認事項

商用利用のライセンスについては、原則としてStarterプラン以上の有料契約を締結しているユーザーに付与される仕組みとなっています。
そのため、ビジネス目的で作成したデザインをWebに公開したり、クライアントへ納品したりすることを検討している場合は、初期の検証を無料プランで行った後、適切なタイミングで有料プランへと移行することが推奨されます。リスクを避けるためにも、導入前にプロジェクトの要件と規約を照らし合わせておくようにしましょう。

🧪【実践】Lovart AIとFigmaの連携を検証

実際にLovart AIとFigmaを使用して、デザイン作成＆編集がどこまでスムーズに行えるかを検証しました。

検証1：プロンプトからのUIパーツ生成

まず、Lovart AIを使用しテキストプロンプトだけでどこまで「実務でそのまま使えそうなUIパーツ」が作れるのかを検証しました。

【検証プロンプト】

モダンなFintechアプリ用の『送金』ボタン。
青と白を基調としたグラデーション、角丸（12px）、右側に小さな矢印アイコン、SVG形式でのエクスポートを想定したフラットなデザイン

検証結果

結果として、約1分ほどでプロンプトに忠実な「送金」ボタンが提案されました。
ボタンの角丸は12px程度で、単色ではなく青と白のグラデーションになっており、プロンプトの解釈精度の高さがうかがえます。また、フラットデザインで装飾も多すぎないため、実務でもそのまま使えそうなUIパーツが完成しました。
なお、今回の生成で消費したクレジットは17クレジットでした。

検証2：SVGエクスポート後のFigmaでの『システム化』

次に、検証1で生成したボタンをSVGで書き出し、Figmaにインポートして「製品としてのルール化」を行いました。

①コンポーネント化

インポートしたボタンを親コンポーネントとして定義することで、一箇所の色の変更を全画面に一括反映させる「管理」が可能になります。

例えば、親コンポーネントの色変更がすべてのインスタンスに一括反映されるため、作業がスムーズになりました。

②プロトタイピング

ボタンをクリックした際の画面遷移や、ホバー時のインタラクションを設定できます。

流れに沿ってリンクを貼り付けるだけで、簡単に設定できます。
専門的な操作を覚える必要もないため、初めての方でもスムーズに使い始められるのが魅力です。

今回の検証により、Lovart AIを「素材の産地」、Figmaを「システムを構築する場所」と分けることで、実制作のスピードが大きく向上することが確認できました。
この役割分担は、現実的で再現性のあるワークフローだと感じます！

🚩Lovart AIをFigmaと連携する際の注意点

非常に便利なLovart AIですが、導入にあたって理解しておくべき限界も存在します。

①データの権利とセキュリティ

AI生成物の著作権については、現在進行形で議論が続いています。

Lovart AIの利用規約では、ユーザーの入力から生成された出力の所有権はユーザーにあると定められています。ただし、第三者の著作権や商標権などを侵害していないか確認する責任はユーザーにあります。特に受託案件で使用する場合は、クライアントとの契約内容に抵触しないか慎重に確認しましょう。

②Figmaへのエクスポート時のレイヤー保持

LovartからFigmaへデータを移行する際、現時点では「Figmaのレイヤー構造をそのまま完全再現」してインポートすることはできません。
SVGであればパスの重なりとして読み込めますが、コンポーネント設定やオートレイアウト設定などはFigma側で手動で設定し直す必要があります。AIはあくまで「ビジュアルの生成」を担い、その後の「構造の整理」はデザイナーの役割であると割り切るのが吉です。

✅まとめ

Lovart AIとFigmaを組み合わせることで、アイデアの具体化からプロトタイプの完成までの時間を短縮しやすくなります。Lovart AIが持つ創造的な爆発力と、Figmaが持つ緻密な設計能力。この二つを役割分担して活用することで、デザイナーはより本質的な「体験の設計」に時間を割けるようになるでしょう。
まずは無料プランやStarterプランから、その連携の可能性を試してみてはいかがでしょうか！

🚀Yoomでできること

Yoomは、業務を自動化するハイパーオートメーションプラットフォームです。
これまで手動で利用していた各ツールをメインとした自動化フローが、直感的な操作で実現可能です。もし自動化に少しでも興味を持っていただけたなら、ぜひ登録フォームから無料登録して、Yoomによる業務効率化を体験してみてください。