斜体プラグイン「Skew」 Figmaだけでそれっぽいモックアップを作ってみた ~パンフレット編~

斜体プラグイン「Skew」 Figmaだけでそれっぽいモックアップを作ってみた ~パンフレット編~
Pocket

プラグイン「Skew」を使ってモックアップ作成

前回、Figmaで手軽にショップカードのモックアップを作成しました。
今回はパンフレット編!ショップカード同様に「Skew」を使って作っていきます。

作りたいイメージ

作りたいもののイメージです。
三つ折りパンフレットの表紙側と中側、どちらも見えるように
開いた状態のモックアップを作ります。

Figmaでの作業

では、実際にどう作成したのか順を追っていきます。

パンフレットすべてのページを分割して用意します(例ではシェイプツールで作った四角形を使用しています)。

折り目を表現したいので、各ページに角度をつけます。
「プラグイン」から「Skew」を検索し、実行します。

水平、垂直方向をバーを動かして調整していきます。
実際のパンフレットを見ながら調整するとイメージしやすいです。

調整したものがこちらです!隙間も閉じておきました。

このままでは平面に見えてしまうので、陰影をつけます。
同じ形の透過した四角形を用意し、上に重ねます。

このようなイメージです→

 

左側から光が当たっているように影をつけました。
中面は谷折り線を強調したいので内側が暗くなるよう、グラデーションにしています。
ブレンドモードや透過率は使用する画像に合わせて調整してください。

最後に表紙側と中側をそれぞれグループ化し、ドロップシャドウをつけてみました。
これでそれっぽいモックアップの完成です!

 

パンフレットで作成したものがこちらです。

前回のショップカードに引き続き、
三つ折りパンフレットもFigmaのみでささっと表現することができました!

以上、斜体プラグイン「Skew」を使ったパンフレットのモックアップ作成でした。

Pocket

システム開発・サーバー管理のご相談なら12Gridへ

システムでお困りのことはございませんか?
プランニングから構築までの一括サポートまで、
お客さまのご要望にあわせて柔軟に請け負っています。

DESIGNカテゴリの最新記事