WebDesigner's Memorandumウェブデザイナーの備忘録

Figmaでモックアップをすばやく作成する「Mockuuups Studio」

Figmaでモックアップをすばやく作成する「Mockuuups Studio」

できあがったデザインを資料内でビジュアル的にキレイに見せたいときは、そのままフレームを書き出して見せるよりも、スマホ画像内の画面に埋め込んだりした方が印象がよくなります。

とはいえ、スマホ画像内にキレイに埋め込むのは地味に面倒です。
今回紹介する「Mockuuups Studio」を使うと、一瞬でそのようなモックアップ画像が作成できます。

Mockuuups Studio

Mockuuups Studio

Mockuuups Studioは1000以上の素材の中から画像を選択し、画像内にフレームを埋め込んでモックアップを作成するプラグインです。

基本的な使い方

Figmaメニューバーの[Plugins]→[Mockuuups Studio]を選択してパネルを表示します。

そのままだと何も表示されませんが、モックアップに反映したいフレームを選択すると画像素材が表示されるようになります。

Mockuuups Studioパネル

メニューの上で検索条件を絞り込めるのと、「Transparent」にチェックを入れると背景が透明な素材のみが表示されます。

検索メニュー

素材が決まったら、選択して右上の「Export…」ボタンをクリックして書き出すと画像がダウンロードできます。

画像素材の選択

非常に手軽にモックアップ画像の作成ができるので、とりあえず存在を知っておくと役に立つときがあるかもしれません。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね