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

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

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

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

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

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





Figmaのレイヤー名を一括変更するプラグイン「Rename It」
記事内の画像にマウスホバーした時に画像が半透明になる意味はあるのか?
FigmaでAdobe XDやSketchのデータを開く方法
液体が垂れているような図形「流体シェイプ」の作り方
Sketchの図形周りの基本操作|図形の作成方法から描画に関する細かい部分まで
Figmaの画像周りの基本操作|画像の追加方法や色補正、切り抜き方法まで
Figmaの図形周りの基本操作|図形の作成方法から細かい設定項目まで
Figmaのスタイル入門|何度も使い回す色や文字設定を管理する方法
Figmaで作ったスマホデザインを「Mirror」機能を使ってリアルタイムに実機確認をする
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
macOSの効率化に関するDiscordコミュニティ「CMD-F」を立ち上げました
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理