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

デザインをつくるとき、カラーやテキストのスタイルなど最小パーツを決めてから、それを使うようにすると統一感のあるデザインになります。

とはいえ、1つ1つスタイルを登録していくのはかなり面倒です。

今回紹介するプラグインの「Styler」を使うと、そんな面倒なスタイル登録がラクになります。

Styler

Figma

Figma

https://www.figma.com/community/plugin/820660579767995949/Styler

Figma Community plugin — Styler is a Figma plugin that generates styles based on selected layers.Basically, you can control your styles by changing layer properties and updating the styles.TutorialsPresented by Luis Ouriach aka @disco_luBatch create styles (color styles only):https://youtu.be/3Pq2cd3KRHYBatch crea...

Stylerは選択要素を一括でスタイルに登録するプラグインです。

基本的な使い方

スタイルの登録

まずはスタイル登録をしたいテキストやカラーを作成します。
次に、先ほど作成したテキストやカラー要素のレイヤー名が、スタイルに登録されたときの名前になるので変更します。

レイヤー名を変更するときはFigmaのリネーム機能を使ったり、プラグインの「Rename It」を使用するとすばやくできます。

Webrandum

Figmaでプラグインを使わずに複数のレイヤー名を一括変更する方法

https://webrandum.net/figma-multiple-layer-rename

デザインをしていると、レイヤーがだんだんごちゃごちゃしてきて気になってしまいます。名称などは人によっては気にしないかもしれませんが、キレイに整理しておいて損をするものではありません。レイヤー名を整理したいときにはプラグインを使わないのかと思いがちですが、実はFigmaではデフォルトの機能でレイヤーの一括変更ができます。レイヤー名の一括変更方法まずはレイヤーパネルで複数レイヤーを選択してから、右クリックで［Rename（command + R）］を選択します。すると「Rename ○ layers」のモーダルが表示されます。項目内...

Webrandum

Figmaのレイヤー名を一括変更するプラグイン「Rename It」

https://webrandum.net/figma-plugin-rename-it

複数レイヤーの一括変更は、Figmaのデフォルト機能でも最低限できます。連番を振ったり、元のレイヤー名の利用もできるのでデフォルト機能でも十分ですが、さらに高度なことをしたい場合はプラグインの出番です。Rename ItインストールするとFigmaのメニューバーに［Plugins］→［Rename It］が追加されます。基本的な使い方名前を変更したいレイヤーを選択した状態で、メニューバーか右クリックメニューの［Plugins］→［Rename It］内のメニューを選択して使用します。 1. Rename Selected Layers：選択レイヤー名の変更 2. Find Repla...

レイヤー名の整理ができたら、要素を選択してFigmaメニューバーの［Plugins］→［Generate Styles］を選択すればスタイルが登録されます。

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

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