Figmaのスタイル入門｜何度も使い回す色や文字設定を管理する方法

オブジェクトに設定できる「色」や「文字設定」は、デザイン中に何度も使用します。

そのような何度も使う設定は「スタイル」という機能を使って保存をしておけば、あとから簡単に呼び出せます。

スタイルの登録

設定できるスタイルの種類は下記の3つです。

• カラースタイル（Color styles）
• テキストスタイル（Text styles）
• エフェクトスタイル（Effect styles）

Fill（塗り）

塗りの色をカラースタイルとして保存・使用できます。

スタイルを追加したいオブジェクトを選択して、「Fillパネル」の右上にある「4つの点のアイコン」をクリックします。
このアイコンが「スタイルアイコン」でクリックするとスタイルパネルが表示されます。

あとはスタイルパネル内の「＋」ボタンを押して名前を入力してenterで、選択しているオブジェクトの塗りがスタイルとして登録されます。

追加したスタイルはスタイルパネルに表示され、クリックですぐ反映できます。
スタイルはいくつでも登録可能なので、デザインに使用する色は登録してすぐ選択できるようにしましょう。

Stroke（線）

塗りと同様に、線の色をカラースタイルとして保存・使用できます。

スタイルを追加したいオブジェクトを選択して、「Strokeパネル」の右上にある「スタイルアイコン」をクリックします。

Text（文字）

フォントや文字サイズなどのテキスト周りの指定をテキストスタイルとして保存・使用できます。

「Textパネル」の右上にある「スタイルアイコン」をクリックします。

Effects（エフェクト）

エフェクトの設定をエフェクトスタイルとして保存・使用できます。

スタイルを追加したいオブジェクトを選択して、「Effectsパネル」の右上にある「スタイルアイコン」をクリックします。

スタイルのグルーピング

スタイルの名前を登録するときに、/（スラッシュ）を使うとスタイルをグルーピングして整理できます。

• text/base
• text/primary
• text/secondary
• text/link
• background/base
• background/primary
• background/secondary

上記のように整理しておくと、どこで使用するスタイルなのかも管理できます。

スタイルの適用

スタイルを適用したいときは、オブジェクトを選択した状態で登録したスタイルを選択するだけです。

スタイルの編集・削除

スタイルを右クリックして、「Edit style」で編集、「Delete style」で削除できます。

スタイルを管理することで余計な指定に気づける

デザイン中、気がつくと色が増えていたり、フォントサイズがバラバラになっていたりすることがあります。

使う色や文字をスタイルで最初に登録して、そこから使うようにすれば統一感も出ますし、無駄のないデザインになります。

また、毎回指定する手間もなくなるのでデザインを作る最初に必要そうなスタイルは作ってから始めるのがオススメです。