Figmaでカラーやテキストのスタイルをまとめて登録するプラグイン「Styler」

デザインをつくるとき、カラーやテキストのスタイルなど最小パーツを決めてから、それを使うようにすると統一感のあるデザインになります。
とはいえ、1つ1つスタイルを登録していくのはかなり面倒です。
今回紹介するプラグインの「Styler」を使うと、そんな面倒なスタイル登録がラクになります。
Styler

Stylerは選択要素を一括でスタイルに登録するプラグインです。
基本的な使い方
スタイルの登録
まずはスタイル登録をしたいテキストやカラーを作成します。
次に、先ほど作成したテキストやカラー要素のレイヤー名が、スタイルに登録されたときの名前になるので変更します。

レイヤー名を変更するときはFigmaのリネーム機能を使ったり、プラグインの「Rename It」を使用するとすばやくできます。
レイヤー名の整理ができたら、要素を選択してFigmaメニューバーの[Plugins]→[Generate Styles]を選択すればスタイルが登録されます。

追加されたタイミングでFigmaの画面下に確認メニューが表示されます。

ちなみに、レイヤー名と同じ名前のスタイルが存在している場合は、更新扱いになります。
また、同じスタイルでレイヤー名のみ変えた場合はリネーム扱いになります。



Figmaでモックアップをすばやく作成する「Mockuuups Studio」
Figmaでテキストの一括置換を行うプラグイン「Find and Replace」
Figmaで図形の分割をして簡単にレイアウトを作成する拡張機能「Split shape」
Figmaプラグインのインストール方法とその管理方法
Figmaのレイヤー周りの基本操作|グループ化やマスク、オブジェクトのロックや表示切り替えなどのレイヤーでできること
FigmaのAuto Layout入門|繰り返しのレイアウトやコンテンツに応じて横幅可変するボタンをラクに作る
Figmaのスタイル入門|何度も使い回す色や文字設定を管理する方法
Figmaでデザインデータ上の画像を圧縮してファイルサイズを軽くする「Downsize」
FigmaのSearch Menuを使用して必要なメニュー・コマンドをすばやく実行する
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Macのスニペットアプリ「Dash」の環境設定
「SimpleExtManager」でChrome拡張機能のオン・オフを素早く行う
初めての一眼レフカメラ「Canon EOS Kiss X7 ダブルズームキット」を購入しました
Path Finder 8の一括名称変更機能を使って楽にファイル名を変更する
iTerm2全般の設定ができる環境設定の「General」タブ
ATOKで目的の単語にすぐ変換するための「辞書・学習」タブの設定項目
Macのターミナルでパスワード付きのZIPファイルを作成する方法
コーディング時のclass名の省略はどこまでして良いのか?「img / btn / ttl / desc / thumb」
新しいMacBook Proを購入して移行するときにやること|コーディングに必要な開発環境を整える