Topics インフォコネクト最新情報

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

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

インフォコネクトWebの豆知識

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

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

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

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

①Figmaのサインアップ

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

初心者でも簡単!Figmaで3Dモックアップを作ってみよう参照:Figma公式サイト 


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

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

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

初心者でも簡単!Figmaで3Dモックアップを作ってみよう

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

③モックアップの作成

初心者でも簡単!Figmaで3Dモックアップを作ってみよう

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

初心者でも簡単!Figmaで3Dモックアップを作ってみよう

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

初心者でも簡単!Figmaで3Dモックアップを作ってみよう

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

初心者でも簡単!Figmaで3Dモックアップを作ってみよう

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

初心者でも簡単!Figmaで3Dモックアップを作ってみよう

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

初心者でも簡単!Figmaで3Dモックアップを作ってみよう


あとがき

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

Webの豆知識]関連記事

Service

Contact

インフォコネクトに相談してみませんか?

経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください