Figmaで簡単にモックアップをつくる!

猛暑のせいなのか?アリが部屋に侵入してきたatsushiです。emoji564.gif

Figmaでデザインをつくってモックアップを作る際、どのように作っていますか?

これまでは、Photoshopで用意していたモックアップのテンプレートにはめ込んでサイズやゆがみを調整して作っていました。

それなりに仕上がるのですが、ちょっと時間がかかるのとPhotoshopのスキルと慣れが必要な作業なので、もっと簡単にできる方法はないかな?と思っていました。

現在、Figmaをメインにデザインを行っているのでできれば、Figma上で完結できればいいよな。と思ってプラグインを探しているとモックアップのプラグインは結構種類が出ているようです。

いくつか試した中でおすすめなものを紹介します。

Clay Mockups 3D

名前に3Dと付けていることからもわかるように立体的なデバイスモックアップをつくることができるプラグインです。【無料で使えます】

簡単につかってみると

1.モックアップを作りたい画像を用意する

モックアップ用画像

2.プラグインを起動

プラグインを起動

3.プラグインで設定する
 デバイスの種類・アングル・デバイスのカラーが設定可能です。

プラグインの設定

4.最後に「Save as image」で完成!

モックアップ完成

こんな簡単に作れちゃいます。
モックアップを作るときに参考になれば幸いです。

モックアッププラグインは他にもいろいろあるので、また試していいものがあったらご紹介したいと思います!neko.gif

トラックバックURL