4-3. オブジェクトに色を塗る

1.オブジェクトに色を塗る方法と、塗のパターン

プロパティパネルにある「Fill」または「Stroke」右にある「+」を押すことで、選択中のオブジェクトに塗りを適用できます。

図1の設定は、以下の通りです

1. 塗りの切り替え
2. ドラッグまたはクリックすることで、色域の彩度・明度を変更出来ます。
3. スライダーから色域を変更できます。
4. カラーピッカーツールが起動し、画面上の色を選択できます。
5. スライダーから透明度を変更できます。
6. RGB 、 HEX 、 CSS 、 HSBのカラーコードを変更できます。
7. 16進数のカラーコードを入力して色をしているすることが出来ます。
8. 透明度を数値で指定できます。
9. Figma内で共有されるカラーパレットです。

①の塗りは図2の6種類があります。

• Solid        ベタ塗り
• Linear      線状グラデーション
• Radial      放射状グラデーション
• Angular   円錐状グラデーション
• Diamond 十字状のグラデーション
• image      画像を表示する

設定を変えるには図1、①のプルダウンメニューから変えることが出来ます。

2.ブレンドモード

FigmaにはPhotoshopのように描画モードを変更できる機能があります。

ブレンドモードは全16種類あります。ブレンドモードを適応させるには２通りあります。

1. 図3青枠カラーピッカー上部に位置する雫のアイコンをクリックし選択する方法
2. 図3プロパティパネルの「Layer」と書かれている欄から選択する方法

1の場合は、オブジェクト単体にブレンドモードを適応させた場合です。2の場合は、背景レイヤーにも影響を与えます。
異なるレイヤー間でのブレンドを使用したい場合は2を選択しましょう。

レイヤーにも影響を与えるブレンドモードを使用した例は、図4のようになります。
例えば、Multiplyを指定してブレンドを行うと重なった部分が合成されているのがわかると思います。

オブジェクトに対してブレンドモードを使用したときの例は図5のようになります。

背景色がついたアイコンに対してMultiplyを使用すると白の背景色があるアイコン画像の背景色透明になります。Photoshopで切り抜き作業を行わなくてもFigma内で完結することが出来ます。

※注意点
元の画像より暗くなります。黒色はそのまま黒色のままです。