2018.05.10

Web制作

Figmaのマスク作成方法 基本編

figmaマスク作成方法メインビジュアル

昨今UIデザインのためのアプリが増えてきておますが、中々使い勝手が良いのが「Figma」です。

「Figma」と言ってもマッ◯スファ◯トリーのアレではないのであしからず 笑

今回はFigmaでの基本的なマスク作成方法をご紹介したいと思います。

1.画像を貼り付ける

figmaの画像配置

マスクをかけたい画像をフレーム内に貼り付けます。画像がある任意の場所からドラッグ&ドロップでFigmaに貼り付けるのが一番簡単な方法です。

2.マスク用の矩形を作成

figmaの矩形作成

次にマスク用の矩形を作成します。

3.矩形はマスクしたい画像の下に

figmaの矩形を背景に配置

矩形はマスクしたい画像の下に配置します。左側のレイヤーメニューからでも良いですが、せっかくなのでショートカットで画像の裏側に配置しましょう。

全面に:Ctrl + Shift + [
背面に:Ctrl + Shift + ]

4.マスクをかける

figmaのマスク作成完了

後はマスクをかけたい画像とマスク用の矩形を選択しマスクをかけるのですが、これもせっかくなのでショートカットで実行しましょう。

マスク:Ctrl + Alt + M

これでマスクをかけることができました。

figmaの他のマスク方法

マスクは色んな形でマスクをかけることができます。色々試してみて下さい。

SHARE

この記事の筆者

デザイナー 芳村 明文

デザイナー 芳村 明文

カテゴライズしたらきっとデザイナーのはず。音楽(洋楽をジャンル問わず雑多に貪る)、欧米テレビドラマ(シットコム)が好き。時々バンド活動。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する