食べチョク開発者ブログ

食べチョクエンジニアによるプロダクト開発ブログ

デザインチームの業務効率化を目指し #Figma プラグインの開発に挑戦

デザイン

こんにちは、松久です。

食べチョクのデザインチームでは、Figma を利用して日々の業務をしています。 Figma は、何かを作り、様々な職種の人とコラボレーションをすることに長けたツールです。細かいアップデートで使い勝手が良くなることも多いので、Figma を使っています。

Figma の特徴の1つにプラグイン機能があります。審査が通ればプラグインによる機能拡張ができます。
今回は、特徴の1つである Figma のプラグインを自作して普段の業務にある面倒くさいを減らす試みの話です。

プラグインを作るきっかけ

毎月作成しているバナーを一覧ファイルにまとめ、過去の履歴を辿りやすくするという業務があります。
ただ、手作業で作成しているため手間も多く、間違い・漏れが発生しやすい状態でした。

毎月のバナー制作一覧

手作業をある程度でも自動化できないかと思ったのが、プラグインづくりのきっかけの1つです。
もう1つは、自身の開発機会が減っていたこともあり、「プラグインづくりにて TypeScriptを用いた開発機会を補いたい」という目的もあります。

プラグインを作り始める

ドキュメントを読めば始められるのですが、英語のドキュメントなので不安がありました。そんなときに、Figma Office Hours で「デザインと開発の生産性向上: Figma APIによる自動化とプラグイン開発」が 開催されました。 そこに 参加し全体像を知った上で、 ドキュメントを読みつつ、開発を始めることができました。

https://www.figma.com/community/file/1355039140557528563/www.figma.com

プラグインを作るときに困ったこと

プラグインを作る時にドキュメントを読めばわかるけれど、すぐにはわからなかったことをいくつか紹介します。

色指定

RGB では 255 までの指定ではなく 0〜1までになります。なので、 255 で割りました。

color: { r: 184/255, g: 28/255, b: 37/255 }

点線

点線は プラグインの API は dashPattern で指定します。 REST API では異なります。

frame.strokes = [{ type: "SOLID", color: { r: 0, g: 0, b: 0 }}];
frame.strokeWeight = 10;
frame.dashPattern = [20, 20];

findAll で取得した node は 全て SceneNode型になる

このため、Section だけを取得したつもりが、SectionNode ではなく SceneNode になっています。

const page = figma.currentPage;
const sectionNodes = page.findAll(node => node.type === 'SECTION');
// MEMO: findAll で取得すると SceneNode になる。SectionNode ではない。
// https://www.typescriptlang.org/docs/handbook/advanced-types.html
// https://forum.figma.com/t/type-scenenode-is-not-assignable-to-type-componentnode/19694/2
sectionNodes.forEach((sectionNode) => {
  const section = sectionNode as SectionNode;
  section.children.forEach((child) => {
    if(child.type === 'FRAME') {
      const frame = child as FrameNode;
    }
  });
});

非同期処理が多い

フォントの設定なども非同期になっています。そのため思った以上に1つのプラグインの中に非同期処理があります。

料金プランで使えない機能がある

API があることは確認したのですが、料金プランによっては使えないことが後からわかり残念でした。

おわりに

月に1回だけ使うプラグインですが、Figma で公開をしています。料金プランによっては、チーム内で公開できる機能もあり、社内特有のルールにあわせたプラグインを作ることも可能なようです。

プラグインを作ってみて、制作時に使うだけではなく、日々のメンテナンスのためのプラグイン作成もありだとわかりました。

日々の業務で出てくる面倒を減らすため、プラグインを作ることにも取り組んで「食べチョク」の改善を進めていきます。