FigmaのLottieFilesプラグインがアップデートされ、Figmaから（LottieFilesを経由して）Lottieファイルを生成することができるようになりました。
そこで、AIサービスで生成した画像を元に、FigmaとLottieでアニメーションロゴを作成する例を解説してみたいと思います。
この記事はあくまで作例の一つなので、AIが生成した画像の権利に関しては、各サービスの規約をご確認の上、取り扱いにはご注意ください。
AIで画像を生成する
まず、Microsoft Bingを使って、元となる画像を生成します。
Bingでは、チャット形式で回答を得ることができますが、会話のスタイル選択で「より創造的に」を選択すると、テキストから画像を生成することもできます。
ここではサンプルとして、著者の愛犬である「ベル」という名前のボーダーコリーのブログ用ロゴ画像を作成する、という程で質問を書いていきます。
ボーダーコリーのブログのロゴのアイデアを5パターン作成してください。モチーフにボーダーコリーのイラストと、ボーダーコリーの名前「Bell」を入れてください。
見事なボーダーコリーのイラストが生成されましたが、少し写実的過ぎるのと名前が目立たないので、注文を追加します。
ボーダーコリーのイラストをもっと抽象的なアイコニックなデザインにしてください。また、Bellのテキストをもっと大きくしてください。
思いの外ロゴっぽいデザインの画像を生成してくれたので、この中の以下の画像をダウンロードして調整していきます。
画像をSVGに変換する
Bingで生成した画像はJpg形式でダウンロードできますが、そのままだとロゴ画像としては使い勝手が悪いので、同じくVectorizer.AIというAIサービスでSVGに変換します。
ブラウザ上に画像をドラッグ&ドロップすると、極めて高品質なSVGに変換してくれます。
生成されたSVGをダウンロードすることで、ベクターツールで色を変えたりパスを変形させたりすることが可能になります。
FigmaでSVGを清書する
ここでは例としてFigma上でSVGを編集していきますが、IllustratorやAffinity Designerなどの使い慣れたベクター画像編集ツールでも問題ありません（最終的にFigmaにインポートします）。
Vectorizer.AIで生成されたSVGは、元画像を綺麗にベクター化してくれますが、以下のようにとても多いレイヤーに分かれています。
このままだと、ファイルサイズが増大するのと、LottieFilesプラグインが正常にアニメーションを作ってくれない場合があるので、Figma上でパスを整理していきます。
まず、不要なパスを削除したり、Figmaの結合オプションを使ってパスを結合し、レイヤー数を減らします。同時に似たような色を統一し、色数を減らします。
そして、パスを編集しつつ、実際の愛犬カラーに合わせて色の変更などを行い、ロゴデザインを整えていきます。
最終的にこんな感じになりました。
LottieFilesプラグインでアニメーションを作成する
LottieFilesプラグインを使うには、事前にLottieFilesに（無料で）アカウントを作り、Figmaと連携しておく必要があります。
LottieFilesアカウントとFigmaを連携したら、Figmaに追加したLottieFilesプラグインを起動し、ロゴSVGのフレームを選択した状態で、「Export to Lottie」をクリックします。
LottieFilesプラグインが持っている複数のアニメーションパターンから好みのものを選択すると、自動でアニメーションを生成してくれます。
プレビューを見ながらスピードを調整することもできるので、納得のいくパターンが適用できたら、「Save to workspace」をクリックして、LottieFilesの自分のWorkspaceに保存します（Figmaから直接JSONファイルを書き出せるわけではないので注意）。
LottieFilesでアニメーションを確認する
プラグインからエクスポートしたアニメーションは、LottieFilesのWebサイトの自分のWorkspaceに保存されています。該当のファイルを開き、JSONファイルとしてダウンロードすることができます。
また、「Handoff & Embed」オプションをONにすると、CDNサーバーとして自分の作成したLottieアニメーションのURLをAsse linkとして使用することもできます。
Lottie-webライブラリで実装する
ダウンロードしたJSONファイル、もしくはCDN経由のリンクとしてLottieを取得し、HTMLに実装することができます。
単純にアニメーションとして表示したり、CSSや他のライブラリと組み合わせたインタラクティブな制御も可能なので、詳しくは以下の記事を参照してください。
最終的にいくつかのアニメーションパターンを持ったロゴが完成しました。
こちらから実際に動いているサンプルをご確認ください。
今回はAI画像生成からロゴを作成しましたが、手持ちの画像などを使ってお手軽にアニメーションパターンを作成する手法として、いろいろと応用が効くと思います。
是非試してみてください。