FigmaでUI/UXデザイン!画像の編集方法と良く使う色を登録 マスク/カラーパレット

こんにちは、リリーです。
前回に引き続きFigmaの使い方について、みなさんに紹介していきたいと思っております。
なんと#2の記事が多くの方に見ていただけていると営業担当の方から聞いて
とても嬉しいです!!!!

#3 マスク機能/カラーパレット機能良く使う色を登録して効率よく作業しよう!編です。

#1、#2の記事もぜひチェックしてみてください。

マスク機能とは

マスクツールを使用する前に、「マスク」って何?と疑問に思っている方もいると思うので説明を。
マスクとは、「画像の切り取り」ではなく「画像を隠す」機能です。
長方形、円形、星形など、任意の形で切り抜きたい時に使用します。

前回のおさらいです。画像を挿入してみましょう。
画像を配置した上に、シェイプツールでマスクをかけたいシェイプを追加。

画像説明_1 マスクをかけたいシェイプを追加する作業

次にマスクをかけたい写真を背面へ移動させてください。

画像説明_2 マスクをかけたい写真を背面に移動する作業

画像とオブジェクトの両方を選択し、マスクのアイコンをクリックすると適用されます。

画像説明_3 マスクが適応された後の様子

画像の位置を変えたい場合、ダブルクリックで選択すると画像の位置を移動させることができます。

画像をトリミング

次に画像をトリミン(切り抜き)してみましょう。
もし、画像の余分な部分をトリミングしたい場合は、次のようにおこないます。
画像を選択して、プロパティの「Image」をクリック。

画像説明_4 画像をトリミングする際の「Image」の配置

Image」の設定が表示されます。「Fill」のプルダウンをクリックし「Crop」を選択しましょう。

画像説明_5 画像トリミング時の操作画面

四隅に青い角が表示されるので、トリミングしたい方向にドラッグ&ドロップします。
上部の余分な部分をトリミングしてみますね。

画像説明_6 画像トリミング時、不要な背景をトリミングする作業

トリミングしたい箇所を決めたら、「Enter」を押しましょう。

画像説明_7 画像トリミング時、トリミングが完了した時の画面

いい感じに余分な背景を切り抜くことができましたー!!

加工した画像を書き出し(保存)方法

画像以外にもデザインカンプや資料を書き出すときにもこちらを使用します。
※今回は画像のみ書き出したいので、フレームのサイズを画像に合わせています。
書き出したいフレームを選択し、プロパティの「Export」から書き出します。
Export」の「+」ボタンをクリック。

画像説明_8 加工した画像の書き出し「Ecport」の位置

「1x Sufix PNG …」といった行が追加されます。←後程解説します。
その状態で、「Export(フレーム名)」というボタンをクリック。

画像説明_9 画像の書き出し作業時「Export X-1」の位置

これで保存ができます。

「1x Sufix PNG」の説明

「1x」はファイルサイズの指定

Figma でも画像を2倍に出力したりすることができ、以下のように変更すると、サイズを指定して書き出しが可能です。

  • 1x:等倍で書き出し
  • 2x:2倍で書き出し
  • ※(3x、4xなどにするとその倍数のサイズで書き出します)
  • 「数値」w:横幅を600px固定で書き出す(縦幅は縦横比に応じて拡大・縮小。数字は600 だけでな自由に指定可能)
  • 「数値」h:縦幅を600px固定で書き出す(縦幅は縦横比に応じて拡大・縮小。数字は600 だけでなく自由に指定可能

「Sufix」は書き出時にSufix(サフィックス)を付加

「Sufix」に「ファイル名@cat-1.png」などのように、ファイル名の後にSufixに入れた文字列を追加することができます。

「PNG」はファイル形式を指定

「PNG」「JPG」「SVG」「PDF」が対応。

カラーパレット機能

よく使う色を登録してみましょう!
要素を選択している状態で、プロパティの「Fill」に「●が4つのアイコン」を選択。

画像説明_10 カラーパレット機能、「Fill」内の丸が4つのアイコンの配置

次に「+」を選択すると、「Create new color style」の画面が表示されます。
任意の名前を登録しましょう。ここでは、「header-color/black」と名前を登録しました。
任意の名前の後にスラッシュ(/)をつけると「header-color」グループの「black」で管理ができます。下記のように「header-color」グループに追加されます。

画像説明_11 「+」を選択したあとの「Create new color style」の画面

同様に見出しの色と画像コンテンツの色を登録しました。

画像説明_12 見出しの色と画像コンテンツの色を登録した後の画面

カラー以外にも、テキスト、エフェクトも同じ方法で登録ができるので登録してみてください。

登録した色を削除したい場合は、該当のカラーを選択し、右クリックで「Delete style」で削除ができます。

画像説明_13 登録した色の削除方法

他にも補正機能もあります。画像を選択して、プロパティの「Image」の画像をクリックすると、左に表示されます。ここからコントラスト、ハイライト、露光などの効果が適用できます。

画像説明_14 補正機能についての操作方法

最後に

お疲れ様でした。
マスク機能と色の登録はできましたでしょうか。
Photoshopを持っていない方でも、Figmaでマスク機能や画像の切り抜き、補正機能を使うことができます。
カラーパレットでは、よく使う色を登録して効率よく作業できるので、活用して作業効率をあげましょう。

次回はオートレイアウト/コンポーネント機能について紹介をさせていただきます。

作者情報

ねこ好き。猫の泣き声に敏感です!
実家に8匹飼っています。猫好き家族です(笑)上京して一人暮らし。ねこ動画で癒されています。
Webデザイナー目指して勉強中です!