Figmaのイベントでプラグイン開発について話してきた

Figmaの公式コミュニティであるFriends of Figma, TokyoのFigmaお楽しみトーク Vol.2というイベントでFigmaプラグイン開発について話してきました。 今回のイベントはエンジニア寄りの回で、デザインというよりはデザインxエンジニアリングをテーマにしたトークが中心でした。

話したこと

一言で言うと「Create Figma Pluginというライブラリを使うと、プラグインのリリースにすごく近づくからおすすめ」という話をしてきました。

自分はプラグインとウィジェットをそれぞれ1つずつリリースしていますが、リリースするまでに放棄してしまったものがいくつもあり、なかなかリリースまで行きつくことがありませんでした。そういった状況を打開してくれたのがCreate Figma Pluginです。 今回の発表ではプラグインのリリースにおいて何が壁になっているか？というのを確認して、Create Figma Pluginを使えばその壁を乗り越えられる。という話の展開で進めました。 Create Figma Pluginはテンプレートの展開やビルド環境の構築だけでなく、UIコンポーネント集やユーティリティ集も含んでいます。（完全に名前で損をしていると思います）これらの機能によりリリースまでに必要な面倒事を避けられます。

スライド作成について

今回初めてFigmaでのスライド作成に挑戦しました。基本的には1920x1080のフレームを作っていき、その中をスライドのエリアとして扱うようです。実際のファイルはこちらです。

タイポグラフィ周りで多少工夫しています。今回はオープンソースのゴシック書体である「IBM Plex Sans」とスタンダードなサンセリフ書体である「Futura」を組み合わせています。Figmaの標準機能で日本語と英語に対して別フォントを設定するのは大変ですが、ワンクリックでフォントの設定が出し分けられる弊プラグイン「Japanese Font Mixer」を利用して設定しました。 また、日本語はそのまま使うとひらがなの間が空きすぎるので「Propotional alternate widhts」を有効にし、最後にパラグラフのLetter Spacingを1%に設定しています。割と雑に書いてもイイ感じになるので、かなり程よい設定な気がしています。このへんの設定は既存のスライドアプリでは面倒な気がするのでFigmaが優位になる点だと思います。 この辺りのノウハウはまた別の記事で紹介するかもしれません。作成編と発表編に分けて技術同人誌に書いても面白い気がします。

感想

久しぶりに勉強会に話す立場で参加しました。トークの準備は大変ではありますが、自分としてもいい整理と勉強の機会になりました。イベントに誘ってくださったseyaさんやコミュニティの方々、参加して下さった方々に感謝します。

他のお二人もデータ定義にデザイナーも巻き込んでいく話やTailwindのコードを出力するプラグインなどとても面白い話をしていたので、聞く立場としても大変楽しかったです。これがオフラインイベントであれば懇親会等でかなりディープな意見交換ができたと思うとコロナ禍が残念でなりません。

余談

エンジニア回というだけで完全にエンジニア寄りのテーマ設定にしてしまい、Twitterやコメントの反応から察するにターゲット設定を間違った気がしています。本来、Figmaコミュニティなのでユーザー属性的にもう少しデザイナーを意識して「作り方」ではなく「作れるもの・作ったもの」にフォーカスした方がウケるトークをできたと思います。ただ、自分が作っているものはミニツール的なものなので、1つのトークを構成するほどのものはないので妥当と言えば妥当だったかもしれません。 また最初のくだりでプラグインは公開した方が「カッコイイ」って話をしましたが、ちょっと熱が入りすぎましたかもしれません。時間配分も含めてちゃんと考えればよかったです。