こんにちは。デザイナーの白瀧です。
徒歩通勤をしているため、出社した頃には汗かきまくりで何かいい方法はないかと模索中な8月です。

早速本題ですが、皆さんは普段の業務中に「これ、ちょっと手間だな」と感じることはありますか？

弊社はWebサイトのデザインを作るときはFigmaをメインに使用しています。作業中、「これ、Figmaのプラグインとかで効率よくできる方法とかないのかな〜」と思うことがあります。
既存のプラグインを探してみるものの、自分のやりたいことにピッタリ合うものが見つからないこともしばしば。
そんなとき、代表の細尾が以前言っていた「AIを活用して自分で作るのもありなんじゃないか」という言葉を思い出しました。

確かに、自分で作れたら欲しかったものをそのまま用意できて、とても便利だ！と思い、それからは「これ、ワンクリックでできたら便利だな〜」と思ったものは、プラグインを作ってみよう！と考えるようになりました。

Figmaで「後からコンポーネント化したい」を形にしてみる

例えば、Webサイトのデザインを進めていると、同じようなパーツが増えてから「これ、後からコンポーネント化したいな」と思うことがあります。また、デザインを調整するために一度インスタンスを切り離したものを、再びコンポーネントとして管理したくなることも。
ただ、すでに複数のページにパーツを配置していると、一つひとつコンポーネント化したり、既存のデザインを置き換えたりするのはなかなか大変です。

同じような場面にでくわした時、後からコンポーネント化したいパーツをまとめて選択して、1つを親コンポーネント、残りをインスタンスにできたら便利なのでは？と思い、早速プラグインを作ることにしました。

実際の使用イメージがこちらです。

  • 調整前・調整後のパーツを選択
  • プラグインを起動
  • 基準となるデザインを選択（選択したデザインが親コンポーネントになります）
  • 必要に応じて、引き継ぐ内容を選択。実行ボタンをクリックしてコンポーネント化

一発でこれだ！というものは出ないので、何度か試して改良を重ねます。
その結果、理想のプラグインを作ることに成功しました！

また、使っていく中で欲しくなった機能を、自分で追加していけるのも自作プラグインのいいところだなと思います。
実際に使っていると「これもできたら便利だな」と思うことが出てきたので、さらにこんな機能も追加しました。

  • 調整したデザインを親コンポーネントとして更新し、既存のインスタンスにもまとめて反映
  • バリアブルとして登録できるようにする

それからも、何かと手間だなと感じることでプラグインで解決できそうなものは作ることが増えました。

例えば、散らばったコンポーネントを1箇所にまとめてくれるものや、エンジニアさんへの共有に必要なフォントファミリー・ウェイト・カラーを一覧にしてくれるものなど、気づけばいろいろなプラグインをつくる「プラグイン作り屋さん」になっています。

面倒だな→改善できないかなを考えるクセがついた

今まで、作業中に面倒だなと思うことはまあやるしかないかという思考までで終わっていました。でも、プラグインで解決できるのでは？という改善するクセがつくことでFigmaでの作業はもちろん、それ以外でもいい方法はないのかと、考えるクセがついた気がします。

仕事で使える時間には限りがあるので単純な作業にかける時間を減らし、考えたり手を動かしたりする時間をなるべく増やせるよう、これからも工夫していきたいと思います。