本記事は『Figma 開発 Advent Calendar』10日目の記事です。
こんにちは、mimiです。
Figmaいいぞ！となって早5年ほどになりましたが、今日もFigmaブランケットに身を包みながらFigmaでお仕事していましたFigmaフリークです。
1日目のseyaさんの記事「現場で活躍する Figma API、プラグイン、ウィジェット」でも書かれているように、Figmaのプラグインが大分簡単に書けるように色々と整備されてきた様なので、デザイナーな私でも出来そう、と思っていまして先日ちょっと書いてみたらさくっと作れたよ、というお話です。
つくったもの
最近、量産型のネイティブアプリ（iOS、Androidと一部Web Viewもあるもの）のデザインを担当させていただいる現場で、エンジニアじゃない人がJSONを手で書く羽目になっていまして。不可能じゃないけど人的ミスが多発している様子だったのでカラー情報だけでもぽちっとな、で一括取得できるといいなと業務外で作ってみました。
開いているファイルのローカルスタイルのうち、カラー情報を取得して、独自のJSON / CSS / XMLのデータ形式で書き出すというだけの超シンプルなプラグインです。
※ 汎用的なファイル形式で欲しい場合は、すでにいくつかそういうちゃんとしたプラグインはあるのでそちらを活用しましょう。
ex. Figma Color Manager – Figma
↑このプラグインも凄く便利です。
が、案件では色をhex値にして独自の形式にする必要があったのでカスタムプラグイン化してみました（Figma APIはrgb形式で値を返してきます）。
エラーとかちゃんとまだ返してないので、ファイルの状態次第ではちゃんと動かなかったらごめんなさいですが、ファイルに変な追加とかはしないのでお試ししても大丈夫かと。ファイルに何らかのカラースタイルを設定してから実行してみてください。
というような超簡単なプラグインなので当たり前っちゃ当たり前ですが、正味2-3日ぐらいで出来て簡単だったよ、という話をします。
まずは「Build Your First Plugin」からスタートするのをおすすめします
Build Your First Plugin (5 parts) – Figma Help Center
去年触った時とはまたガラッと変わってるだろうな、と思い、まずは公式情報を見よう！ということで、FigmaのTutorialから「Build Your First Plugin」を見てみました。
これ英語だけど、黒い画面が初めて、なデザイナーさんでも分かるようにーから解説してくれるの凄く良いです。ページのテキストをGoogle翻訳とかに突っ込んでみながら、動画を見てると大体何言ってるか分かるんじゃなかろうか。Figma Japanの人がこれの日本語字幕を入れてくれるといいなーと淡い期待を寄せつつ、以下で超概略を書いておきます。
1. 概略と、Figmaのアカウント(無料)とFigma Desktop Appをダウンロード
1本目の動画は概要説明とプラグインって何かって話です。
Figmaのアカウント（無料）は必要なので作りましょう。
https://www.figma.com/
Figmaのデスクトップ版も必要なのでここからダウンロードしましょう。
https://www.figma.com/downloads/
2. FigmaのプラグインAPIについて
2本目はAPIとは何かという基本から、Figma APIの紹介。
コードとかプログラミングとか分かんなくても大丈夫だよ、イチから説明するよ、という親切設計。
Javascript、TypeScript、HTML、CSSを家を例にスマートに説明し、コードでfigmaに四角を書く方法を解説。やったことない人は動画をまんま真似してやってみると楽しいと思います。
次に開発環境について、VS Codeをダウンロードするように言われます。
3. プラグインの開発環境を整える
- VS Code のインストール
- Node.js と npm のインストール
- TypeScriptのインストール
をWindowsもちゃんとフォローして操作方法もちゃんと書いてくれてます。
インストールが終わったら、Figma Desktop App を立ち上げて 「プラグイン > 開発 > プラグインの新規作成」 を選択。
名前を付けて、「Figmaデザイン」を選択し、「UIとブラウザAPIを使用」を選択します。
保存したコードのディレクトリをVS Codeで開きます。
Figma Plugin APIの型のライブラリをインストールするために、
npm install --save-dev @figma/plugin-typingsします。
code.tsがコンパイルされる仕組みとか、わかりやすくサクッと説明してあって、サンプルプラグインを実行してみると5つの四角が生成されます。
・・・という感じで動画に沿って手を動かしていたらいつの間にかプラグインができてます
動画に沿って、あんまりよく分かって無くても同じようにポチポチしていくと何となく作り方が把握できると思うのでぜひ手を動かしながらご覧ください。
便利なFigmaプラグイン用のUIライブラリとかが充実してます
動画の中で紹介されている
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/figma-plugin-ds.css">
で使えるThomas Lowry’s Figma Plugin UI Libraryが便利です。
というわけで、私はこれだけ見て動かし方が大体把握できたので、途中から作りたいものをそのまま作って半日ぐらいで原型が出来ました。
加えて参考にした記事３つ
この動画だけだと分からないのが「PostMessage」何するものぞ？というところな気がしますが、ドンピシャな記事が日本語であったので参考にしました。
Figma Plugin イメージと違う「PostMessage」と「messageイベント」を理解して、処理とUIで情報を橋渡しする
あと、色の扱いどうするのかなーと思って探して見たのが
Figma DIY: Building a color system plugin—Martian Chronicles, Evil Martians’ team blog
もういっこは、hex値を算出するために
Convert RGB to Hex color codes in JavaScript – DEV Community 👩💻👨💻
動画とこの３つのリソースで大体出来て業務で使えるカタチにはなったので、ダメ元で一応公開してみようかなと思って申請出したら、するっと公開されました。全然READMEちゃんと書いてないけれど、そんなに汎用性とかなくても数日ぐらいで公開してくれるみたい。一度公開できたら、アップデートはすぐできるようです。
WordPressのプラグイン登録するより全然ハードル低くて良いです。
お陰で、元の目的だった非エンジニアの人にも簡単に使って貰えるようになりました。いえい。
デザイナーでもサクッと作れてサクッと公開できる
というわけでお伝えしたいのは案ずるより産むが易しということに尽きます。
全部TypeScript化するとか全然してないし、動けばいいやという超荒い書き方をしているので特段コード周りでメモしておくことは無いです。
たぶんTypeScriptよく分かんなくても取り敢えずはフィーリングで書けると思いますので、TypeScriptにビビらずに触ってみるのが吉。
そんなわけで凄くニッチなプラグインですが、ポチッとな、でスタイルからCSS変数作れるのは地味に便利なので、もう少し整備して、rgbaかhexか選べるようにしたりして、他案件でも活用したいなと思っています。
あと、今はグラデーションがあるとスキップするだけの作りになっているので、それもオプション作ろうかなと思います。
GitHubはココなので何かあったらIssueください〜
miminari/custom-color-data-generator
こんなに気軽にスルッと行けるなら、アレもコレも作りたい、となってるのでまた何か作ったら共有します！
