Figmaでよく使うスタイルを登録する

オブジェクトには線や塗りを設定することができますが、何度も使う設定はスタイルとして登録しておくと便利です。

2020年4月現在の Figma では、下記のプロパティを保存しておくことができるようです。

  • Fill(塗り)
  • Stroke(線)
  • Effects(エフェクト)

Fillのスタイル登録

スタイルの作成

作成するには、オブジェクトを選択した状態で、Style メニューをクリックして表示されるパネル内の + ボタンを押してください。 名前を入力してリターンキーを押すと、選択中のオブジェクトのプロパティを用いてレイヤースタイルが作成されます。

Fill はいくつでも登録することができますので、いくつもの Fill が重なり合った状態を記憶して、後から使用する場合などに便利かと思います。

Stroke / Effectsのスタイル登録

Stroke / Effectsのスタイル登録

Fill の場合と同様になります。 Effect の設定パネルで + を押せば登録することができます。

スタイルを適応する

スタイルの適応

オブジェクトを選択した状態で、登録済のスタイルを選択します。

スタイルのグルーピング

スタイルのグルーピング

スタイルを作成する時に名前を付けますが、その際に / を使うと、スタイルをグルーピングすることができます。 例えば、下のような名前です。

  • Image / Shadow
  • Image / Gradient
  • Image / Main
  • Image / Default

このようにしておくと、 Image というグループの下に各スタイルが表示されます。整理整頓しておくと Figma ファイルのメンテナンス性が向上します。

Udemy Webデザイナー
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座

レクチャーの数: 236 ⁄ 19.5 時間 ⁄ 初級

ウェブサイトの企画・設計、Sketchを使ったデザイン、HTML ⁄ CSS マークアップ、モバイル最適化など、Webデザインに挑戦したい人が一気通貫して学べる総合学習コース Shunsuke Sawada

¥ 1,400

¥ 24,000

4.3

493件の評価