UI/UXデザインツール『Figma』入門

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

  • UIデザイン
  • UXデザイン
  • プロトタイピング
  • Webデザイン

塗り機能を使うと、オブジェクトの塗り色 (Fill)に関する設定ができます。このレッスンではオブジェクトに色を塗る方法を解説していきます。

公開日:2019/08/21最終更新日:2021/08/06

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

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

図1 カラーピッカー

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

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

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

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

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

2.ブレンドモード

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

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

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

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

図3 ブレンドモード

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

図4 ブレンドモード全16種類

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

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

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

図5 オブジェクトに適応したMultiply使用例

理解度チェック





UI/UXデザインツール『Figma』入門

1. Figmaの概要とインストール

2.Figmaの基本操作

3.ツールバーの操作

4. プロパティパネルの操作

5. プロトタイピング

6. 共有とバージョン管理

7. 料理写真投稿アプリを作ってみよう



このレッスンの著者