Figma の Swap Style Libraries が素晴らしいのでレポート
UI デザインをチームでしていて近頃はめっきり Sketch を触る機会が減り、Figma を使用するケースが増えてきました。
デザイナーとエンジニア間でのやりとりも Figma を導入している企業が増えている温度感が高まってきてピークに達している肌感があります。
何より、2022年9月15日に発表された Adobeによる Figma 買収で Adobe 傘下に入るやもしれぬことが発表され驚かされました。
これを機にさらに使い易くなるといいですね！
Figma を普段触っていてアップデート毎に Auto Layout 機能等も以前よりは分かり易くなり、微細な調整機能も充実してきています。
そして、数ある機能の中でも、特に触っていて優れていると感じた
「 Swap style and component Libraries 」について、備忘録として残しておこうと思いました！
この応用が出来ると、ライトモードダークモード別やカラーテーマが増えた時のカスタマイズ時にも使えると思いますし、App 用やWeb 用といったデバイス毎でデザインを分けている場合のコンポーネントの使い分けや管理も抜け漏れなく作成、後から微調整するのも楽になることでしょう！
（最初に命名規則などしっかり定義しておく必要はありますが…）
❶ コンポーネントやカラースタイルの作成
先にダークモード用の絵を作成しました。
背景とボタンを今回はコンポーネント化し、作製したカラースタイルはボタン背景に充てています。
❷ ライブラリーをパブリッシュする
ファイル名の右側にある矢印をクリックするとメニューが開くので「 Publish styles and components 」を選択します。
対象のパーツを確認する画面が現れるので［ Publish ］を押下。
ライトモード画面用も同様に行います。
これで 「 Swap style test - A - Dark 」「 Swap style test - B - Light 」という２つのライブラリーがプロジェクト内で作成できました。
❸ 作成したスタイルライブラリーを入れ替えてみる
ライトモード用のデザインファイルに戻って、Assets の本のマークのアイコン（ライブラリー一覧）から Libraries を参照します。
「 Swap style test - B - Light 」を有効化し、右矢印をクリックします。
（別ページ Untitled にダークモードをコピーしてきました）
［ Swap library ］のボタンを押下します。
表示がライトモード用のデザインに変わりました！
先にも述べたように、カラーテーマがいっぱいあるデザインに対して、共通の新規機能を実装したい、デザインの見た目上の問題がないか検証したいシーンが結構あるので、ライブラリの管理は大変になりますが、先に整備しておくと便利に使えそうな機能ですね！
公式のチュートリアルヘルプサイトにも詳細が載っていたり、YouTube でも分かり易く解説してくださっている人のページがあったりするので、そういったものも参考にしつつ勉強を積み重ねていこうと思います。
