Figma×AfterEffectsでプロトタイピング

メンバー紹介で漫画大好き!って紹介されていた、デザイナーの稲葉です。
漫画も大好きなんですが、チュートリアルも大好きです。

みなさんプロトタイプどんなツールで作ってますか？
Figma、Adobe XD、Framer、ProtoPie、コーディング。いろいろ方法はありますが、細かい動きがつけられなかったり、コーディング勉強しないといけなかったり、そもそも会社でツール導入のハードル高かったり、どのツールも一長一短ありますよね？

デザインできるようになりたいけど、どこからどこから手をつけたら良いかわからないし、せっかく勉強するなら他の用途でも使えるツールを覚えたいよねって欲張る気持ちもすごくよく分かります。

僕は習うより慣れろ派なので、勉強したいことがあったら実際にチュートリアルをみながら手を動かすことが多いです（念のため全く体育会系属性はもってません）。

今回はFigmaでのUIデザインとAfterEffectsでのアニメーション作成を、楽しみながら覚えられるチュートリアルを紹介します。

紹介するチュートリアルは、Cubertoのサイト内にあります。
CubertoはAwwwardsのAgency of the Yearも受賞しているアメリカのデザインエージェンシーです。
どのプロジェクトもモーションが素敵で憧れてます。
Cubertoのチュートリアルには無料コンテンツと有料コンテンツがあり、有料のチュートリアルは月額$22と結構お高いですが、FigmaやAfterEffectsのファイルがダウンロードできるので、ツールに慣れていない場合はこちらがおすすめです。

入門編として試してみてほしい（無料）チュートリアルはこちらです。
乗車アプリの評価画面を作成できます。

チュートリアルをスムーズに進めるために、いくつか設定しておいたほうが良いことがあります。
1.AfterEffectsを英語で起動する。
2.FigmaとAfterEffectsにAEUXプラグインを導入しておく
3.（僕は英語が苦手なので）Youtubeの字幕を日本語にする方法を確認しておく

1.AfterEffectsを英語で起動する
チュートリアル動画ではAfterEffectsの画面が英語で表示されています。
日本語で起動すると、このメニューどこだっけ?とかExpressionの値が日本語で入力されて、後で英語表示にするとエラーになったりするので、最初から英語で起動しておいた方が無難です。
英語で起動するには、メモ帳とかテキストエディットでae_force_english.txtという空のテキストファイルを作成し、書類フォルダ（Windowsの場合はドキュメントフォルダ）に配置します。

日本語で起動したい場合は、_ae_force_english.txtのようにファイル名の頭に_をつけるだけです。

2.FigmaとAfterEffectsにAEUXプラグインを導入しておく
AEUXプラグインはFigmaからAfter Effectsにデータをインポートできるプラグインです。ダウンロードとインストールの説明は公式サイトに記載がありますが、Figmaにプラグインを導入する方法が少し古いようです。
実際の手順は
1.AEUX_0.8.0.zipをダウンロードして解凍するとAEUX_0.8.0というフォルダができる
2.Figmaでコンテキストメニュー（画面内を右クリック）からPlugins > Development > Import plugin from manifest...を選択して、1.で作成したAEUX_0.8.0/Figma/manifest.jsonを選択

※ manifest.jsonを削除するとプラグインが使えなくなるので、AEUX_0.8.0は先に書類フォルダに移動しておいた方が良いかもしれません。

3.Youtubeの字幕を日本語にする方法を確認しておく
Googleで「Youtube 字幕 日本語」と検索するといっぱい出てきます。
これとか。

ここまで設定できたら、早速チュートリアルを試してみてください。
実際に自分で作成してみた動画はこちらです。

チュートリアルは、パスアニメーションメインで動きが作られているので、AfterEffectsに慣れていなくても、ある程度スムーズに進められますが、一通り動画を見てから手を動かした方が、無駄なところではまらず進められます。
チュートリアルと作成した動画で差異がありますが、チュートリアルの目的は作り方を勉強することなので、細かい部分はあまりこだわらずサクサク量をこなすのが良いんじゃないかなと思います。

ビザスクではプロダクトデザイナーとWebデザイナーを募集しています。

プライベートも大事にしながら、手をあげればなんでもトライできる環境で働きたい方は、お気軽にカジュアルミーティング希望って連絡してください！meetyもあるので、"稲葉と面談希望"と一言添えて申し込んでもらえると嬉しいです。

ビザスクのデザイナーと話しませんか？