Adobe XD用の高機能な無料カラーツール、UIデザインに適した色の組み合わせを生成する優れもの -Color Designer
Post on:2019年7月22日
Adobe XDを使っていて、カラー周りの機能を強化したい人にお勧めの無料プラグインを紹介します。
作成しているUIデザインからカラーパレットを生成し、ベースカラーにホワイトやブラックを加えたカラーパレット、カラーホイールに基づいた色の組み合わせなどを生成する優れものです。

Color Designer for Adobe XDの特徴
Color Designer for Adobe XDは、デザインしているドキュメントのカラーパレットを作成し、そこからさらに発展させたカラーパレットを作成するができます。

- カラーにホワイトを加えた「Tint」、ブラックを加えた「Shade」を生成。
- カラーホイールに基づいた色の組み合わせを生成。
- プラグインはアセットライブラリと統合。
- 使い方も非常に簡単。
Color Designer for Adobe XDのダウンロード
Color Designerのダウンロード・インストールは、簡単です。
まずは、下記ページの「Install Plugin」をクリックします。

Adobe XD公式のプラグインページに移動するので、このページをAdobe XDで開くで「許可」をクリックします。

Adobe XDが自動で開き、プラグインのインストール画面が表示されます。「Color Designer」であることを確認して、「インストール」ボタンをクリックします。

Adobe XDからインストール
インストールが完了したら、Adobe XDの上部メニュー「プラグイン」からColor Designerを起動できます。
Color Designer for Adobe XDの使い方
使い方は、簡単です。
「Color List」では自動でカラーが取得され、カラーパレットが生成されます。まずは「Tint」、ベースカラーにホワイトを加えたものです。

ベースカラーにホワイトを加えたカラーパレット
「Shade」は、ベースカラーにブラックを加えたものです。ブラックになるまでの色数は自由に変更できます。

ベースカラーにブラックを加えたカラーパレット
ベースカラーを変更したい場合は、「New Main Color」からです。

カラーの変更
「Color Harmories」では、ベースカラーからカラーホイールに基づいた色の組み合わせを生成します。

カラーホイールに基づいた色の組み合わせ
sponsors