Figmaで補色やグラデーションを自動補完で作成できるカラーパレットの使い方

今回はFigmaで指定した色から補色やグラデーションを自動補完で作成できるカラーパレットのプラグイン「Color wheel palette generator」を紹介します。色彩に関する複数のカラースキームに従って、様々なカラーパレットをワンクリックで生成することができます。

標準機能ではなくプラグインですが、Figmaの中の人が公開しているものですので、実質公式プラグインと言えるかもしれません。

公式のカラーホイールに関する専用の解説サイトもあり、色彩に関するカラースキームについても解説されていますので、あわせて参考にしてみてください。

https://www.figma.com/ja/color-wheel/

この記事のターゲット

• Figmaでカラーパレットを自動生成したい方

• Figmaでカラーパターンを検討したい方

Color wheel palette generatorの使い方

起動方法

プラグインとして公開されていますので、Figmaのメニューのプラグインから検索して「実行」することで起動できます。

以下のFigma Communityのページからもアクセス可能です。

https://www.figma.com/community/plugin/1286792998372727741/color-wheel-palette-generator

カラーパレットの作成と変更

プラグインを起動して、ポップアップダイアログ内の設定を行い「Generate palette」をクリックするとカラーパレットが生成されます。

すでに生成されているカラーパレットを選択した状態だと、ボタンが「Update colors」に変化し、設定内容を上書き更新できます。

主な機能は次のとおりです。

• Pick a color（基準となる色を指定）

• Pick a palette type（指定した色に対して生成するカラースキームの選択）

カラースキームの種類

このプラグインで生成できるカラーパレットに適用できるカラースキームの種類です。詳しくは公式ページに記載されていますので、詳細は割愛します。

Complementaly（補色）

指定した色の補色となる組み合わせを生成します。

Split（分割補色）

指定した色の分割補色となる組み合わせを生成します。

Square（テトラディック）

指定した色に対して、カラーホイール上で4色が十字型になるような組み合わせを生成します。

Analogous（類似色）

指定した色に対して、カラーホイール上で隣同士に位置する3色の組み合わせを生成します。

Monochromatic（モノクロマティック）

指定した色に対して、彩度、輝度の差で表現する配色の組み合わせを生成します。

Triadic（トライアディック）

指定した色に対して、カラーホイール上で等しい距離にある3色の組み合わせを生成します。

この記事を読んだ方におすすめの記事

FigmaでColor Stylesをカスタマイズする方法

今回はFigmaで独自のカラーパレットを設定できる機能「Color Styles」の使い方を紹介します。Color Styles に色を設定すると、デザインシステムなどで定義した色を変数的に利用できるようになり、色を調整する際に指定した箇所が一括で適用されるので便利です。 ... 続きを読む

Figmaで図形やテキストのべた塗りとグラデーションの使用方法

Figmaで図形やテキストなどのオブジェクトにベタ塗りや様々な種類のグラデーションを適用する方法を紹介します。 ... 続きを読む

Figmaでシンプルな円グラフを生成するプラグインの紹介

今回は、FigmaとFigJamで任意の値を入力して、パーセント表示付きの凡例と円グラフを生成できるプラグイン「シンプルな円グラフの生成」の紹介です。スライド資料用のグラフや、ウェブサイトに掲載する簡単な円グラフが手っ取り早く欲しい時などに便利です。 ... 続きを読む