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

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

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

Mockuuups Studio

Figma

Figma

https://www.figma.com/community/plugin/786250770157843670/Mockuuups-Studio

Figma Community plugin — Super-easy mockup generator with over 1300 various scenes. The plugin is packed with everything you need to create product mockups, outstanding marketing materials, even visual content for social media or blog posts.Instant PreviewSelect a frame, and Mockuuups Studio takes care of the rest. T...

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

基本的な使い方

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

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

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

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

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