Figmaで使っている色やフォントなどを一括変更する「Batch Styler」

テンプレートを使ってデザインを作成するときや、1度作成したデザインを修正するときに、登録済みのスタイルを名称を変更できると便利です。
デフォルトだとスタイルは1つ1つ変更していく必要がありますが、今回紹介する「Batch Styler」を使うと解決します。
ちなみに、以前「Styler」というプラグインも紹介しましたが、こちらは新規登録時に便利です。
今回紹介する「Batch Styler」は、変更に向いています。
Batch Styler

Batch Stylerはデザインデータ上のスタイルを選択して、あとから簡単に修正できるプラグインです。
プラグインをインストールするとメニューバーに[Plugins]→[Batch Styler]が追加されます。
基本的な使い方
Figmaメニューバーの[Plugins]→[Batch Styler]を選択して、パネルを表示します。

[Text]と[Color]それぞれのタブがあり、タブごとにデザインデータ存在するスタイルが表示されています。
スタイルを選択すると、選択したスタイルの情報が下に表示されるので修正後、「Update styles」で反映できます。
ちなみに、スタイル選択時にshiftやcommandを押しながら選択すると複数選択できるので、複数選択して一気に修正もできます。
その場合、「,(カンマ)」で情報が区切って表示されます。



Figma × Keyboard Maestroでどこまで効率化できる?
FigmaのAuto Layout入門|繰り返しのレイアウトやコンテンツに応じて横幅可変するボタンをラクに作る
Figmaで細かいアニメーションを作成できるプラグイン「Motion」
Figmaのテキスト編集周りの基本操作|テキストの追加方法からグラデーション設定や縦書き、アウトライン化
Abstractで「Failed to open “○○”」「An unexpected problem occurred, try again?」と表示されるときに確認すること
Sketchのレイヤー周りの基本操作|グループ化やマスク、オブジェクトのロックや表示切り替えなどのレイヤーでできること
Figmaのサイズの大きい画像を縮小せずにインポートするプラグイン「Insert Big Image」
Figmaの図形周りの基本操作|図形の作成方法から細かい設定項目まで
Sketchの整列をショートカットキーを使ってすばやく行えるようにする方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Visual Studio Codeで簡易的なローカルサーバーを起動して、コード保存時に自動でブラウザをリロードする拡張機能「Live Server」
macOSのシステム環境設定「Spotlight」の設定見直し
横幅が広がったときの挙動が変わる!CSS Gridの「auto-fill」と「auto-fit」の違い
【前編】Sync & Liveで取り回す Illustrator でのデータ作り!!CSS Nite in KOBE, Vol.26
Apple WatchでiPhoneやMacのロック解除を行う方法
Google Chromeでメモリ使用量の高い拡張機能を調べる方法
AutoSleepを使って、Apple Watchをつけたまま寝るだけで自動的に睡眠ログを取る!
Google関連サービスをすばやく確実に変換するための単語登録サンプル
Gmailのラベルとフィルタ機能を使ってメールを自動的に振り分ける
Orbital 2で共通の設定を使い回すためのテンプレートファイルを作成する方法