初心者でも簡単！Figma（フィグマ）で3Dモックアップを作ってみよう

この記事は公開から2年以上経過しています。

こんにちは、WebデザイナーのAYAです！
前回、Figmaの特徴についての記事を書きましたが、今回も引き続きFigmaネタでいきます！！

＼ この記事はこんな人におすすめです ／
・簡単にモックアップを作ってみたい人
・モックアップの角度を自由に調整したい人
・Photoshopは起動が重たいので、他のデザインツールでしてみたい人

では、早速作っていきましょう！

• \\　目 次　//
• ①Figmaのサインアップ
• ②プラグインのインストール
• ③モックアップの作成
• あとがき

①Figmaのサインアップ

Figmaを使ったことがない人は、『Get started』からGoogleアカウントで入るのがサクッとできるので個人的におすすめです。もちろん新しくメールアドレスとパスワードを入力してアカウントを作成することもできます。

参照：Figma公式サイト 

②プラグインのインストール

そして、下記URLから、プラグインをインストールしましょう。

■Vectary 3D Elementsのインストールはこちら
https://www.figma.com/community/plugin/769588393361258724/Vectary-3D-Elements

URLからプラグインのページに飛ぶとこのページになるので、赤枠をクリックします。
 

③モックアップの作成

次に『Run』をクリックします。

右側にデバイスが表示させるので好みのデバイスを選択します。
今回はMacBookにします。

次に、Figmaに画像を配置したいので、ショートカットキー『Shift ＋ command ＋ K』で好きな画像を開きます。そして画像を選択した状態で、『Apply Frame』をクリックします。

すると数秒待つと自動で配置されます。
カーソルを画像のところに移動し、少し動かすと、それに合わせて画像も動きます。
360度自由に好きに動かせるので、初めてのときは格好良くて驚きました！

最後に『Finish』をクリックしたら完成です。

あとがき

いかがでしたか。
Photoshopでモックアップを作るとなると工程がかさむので、サクッと作ってみたい人におすすめでした！是非試してみてくださいね。
 

• 前の記事へ

  【有限会社タケガワ塗装様】デジタルサイネージ広告動画制作

• 次の記事へ

  Bingウェブマスターツールを導入してインデックス登録をリクエスト！