Figmaの塗り・画像での塗り

Figmaの右側にある「プロパティパネル」　で塗りを細かく見ていきます。特に便利なスタイルと、画像の塗り を中心に詳しく見ていきましょう。

塗りの詳細設定

図形・テキスト・フレームなどのあらゆるパーツを選択すると、プロパティパネルに塗りが表示されます。図形やフレームだったら背景色、テキストだったら文字色が変更できる場所です。

色の四角をクリックすると、カラーピッカーが開きます。

同じ “色相（Hue）” を使いますが、明るさの計算方法 が違うため、用途が少し異なります。

Lightness（明度） を使うので、パステルカラーや淡い色を作りやすいのが特徴。

Brightness は「光の強さ」に近いため、濃い色・ビビッドな色が作りやすいです。

Figmaは同じキャンバス内で使った色は、カラーピッカーの一番下に「このページ上」というところに格納されていきます。またデザイン上決まった色を使う場合は、、スタイルに登録 をしておくと便利です。ここではプライマリーカラーという名前をつけてライブラリに保存しています。

スタイルとして保存しておくと、次のようなメリットがあります：

Figmaでは塗りに画像を選択できます。長方形や楕円などの図形をクリックし、塗りのところから画像をアップロードして設定が可能です。塗りなので、縦横比が崩れることはなく切り抜かれた状態になります。

画像は、「露出」や「コントラスト」といった変更や、塗りの他にも、自動調整・トリミング・タイルといった設定が可能です。

今回は写真素材サイトで有名な「Unsplash」の高品質の写真を検索して入れられる人気プラグインを使います。

プラグインとは？？　Figmaに機能を追加する“アプリ”のようなもの。