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

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

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

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

FigmaでUI/UXデザイン！無料で使用できるデザインツールFigmaの導入

FigmaでUI/UXデザイン！基本操作を初心者にもわかりやすく解説

マスク機能とは

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

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

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

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

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

画像をトリミング

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

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

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

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

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

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

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

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

これで保存ができます。

「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つのアイコン」を選択。

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