ロコガイド テックブログ

「地域のくらしを、かしこく、たのしく」する、株式会社ロコガイドの社員がいろいろな記事を書いています。

「地域のくらしを、かしこく、たのしく」する、株式会社ロコガイドの社員がいろいろな記事を書いています。

ダークモードへの切り替えが簡単!Figma Plugin「Dark Mode Switcher」を作りました

f:id:rei-suzuki:20200428184251p:plain

こんにちは!デザイナーの鈴木です。 前回のPluginセットアップの記事からだいぶ時間が空いてしまいましたが、この数ヶ月でFigma Pluginを2つ開発していました。 今回はそのうちの2つ目に開発したPluginの紹介です!

Dark Mode Switcher

f:id:rei-suzuki:20200428182817g:plain

Pluginをポチッと実行するだけでカラーモードを切り替えることができます!

使い方

1. プラグインをインストール

こちらからプラグインをインストール

2. Color Stylesを登録する

f:id:rei-suzuki:20200428180341p:plain ライトモード用,ダークモード用それぞれのカラーをColor Stylesに登録しましょう。 このPluginはColor Stylesをみて、Light(light),Dark(dark)の文字をキーに名前の切り替えをしてくれます。 例えば Background/Dark/PrimaryBackground/Light/Primary に変換されます。

3. Frameを選択してPlugin実行

f:id:rei-suzuki:20200428182149j:plain あとはチェンジしたいモードを選択してPluginを実行するだけです。以上、簡単!

開発したきっかけ

トクバイアプリは2020年2月にダークモードをリリースしたのですが、運用工数をなんとかしたかったのがこのプラグインを作ろうというきっかけでした。 流行りに乗ろう!やっていきだ!と勢いで始めたものの、ダークモード対応は意外と画像の対応が大変で、かつ実装後もダークモードの確認などの運用をしていかなければなりませんでした。 ですがこのプラグインを導入すると、Color Styleさえ決めてしまえば対象の画面のカラーモードが簡単に切り替えできるので、デザインの確認や書き出し時も面倒な作業が減ります:)便利!

何かあればこちらに

https://github.com/rei-suzuki/figma-dark-mode-switcher

不具合のご報告や改善要望などあれば、issue立ててもらえると嬉しいです:)

最後に

2回目のプラグイン開発で1人でコミッターとしてやりましたが、公開まで作りきることができたのがよかったです。サポートで id:ar_tama が入ってくれたこともあり、ここまでやりきることができました! そしてこの活動を通してJavaScript力(TypeScript力)がぐんぐん伸びました!実務でもたくさんコードを書いて、着実にレベルアップしてる実感がありとても達成感がありました。今後もPlugin開発を続けて自分のスキルも上げていきたいです💪