Google Sheets Syncを使ってスプレッドシートと同期するテーブルコンポーネント

あくまでも自分の仕事効率化のためではあるのですが“Figma library for Wireframe"という個人プロジェクトを進めています。ライブラリとしての体裁が整ったらFigmaコミュニティーで公開しようと思っていますがその前にニッチではあるのですが汎用的なコンポーネントができたので公開しました。

Google Sheets Syncについて

Figmaのプラグインの中でとてもお世話になっているプラグインでGoogle Sheets Syncというプラグインがあります。

Google Sheets Sync | Figma CommunityFigma

ひと言で説明するとGoogleスプレッドシートとFigmaのテキストレイヤーを同期させることができる神プラグインです。簡単にデモを作成してみました。

これを見て特に必要性を感じない人はここから先を読んでも時間の無駄なので別の記事を読むことをおすすめします😀。

ワイヤーフレームと言えどもテキストはリアルに

ウェブであれアプリであれ設計をする立場の自分としてはワイヤーフレームに入れるテキストはダミーの場合でも実際に入りそうな文章を入れておきたいという信条なので普段からアレコレ考えながら文章を入れています。しかし既に存在している文章（特に利用規約などの長い文字列）の場合はコピペして持ってくる作業が発生する上に制作過程で変更が入ったりするとFigmaを開いて該当の箇所を探したりして割と手間がかかります。テキストボックスや文字サイズの調整なども文字量や点数が多くなればそれなりに時間をとられることになります。

変更は実装で対応するという考え方もありますが（時間がないときは自分もそうしますが）前述同様に設計を担当する立場から言うと本来テキストはワイヤーフレーム段階で確定しているべきなのでその辺りも踏まえてよっぽどのことがない限りは厳密に対応していきたいと考えています。

設計のワークフローも最適化

Google Sheets Syncのプラグインを使うことを前提にテキストをスプレッドシート管理にするとFigma側ではボタンひとつでテキストの更新が可能になります。
これは同時にテキストを管理する人とFigmaを管理する人を分けることもできるようになることを意味します。ここが意外と重要で膨大な量のテキストをコピペするのはFigmaの知識がなくてもできる作業なので他の人に担当してもらうなんてことも可能になります。
ウェブやアプリの設計を1人で行う人も多いと思いますが一部だけでも他の人に担当してもらえると効率的なのでワークフローの最適化にも役立ちます。

tableコンポーネントを作った理由

前述のように単なるテキストであればレイヤー名とスプレッドシートの1行目の内容を揃えることで簡単に同期が可能ですがテーブルとなるとちょっとコツが必要になります。
Figmaレイヤーの順にスプレッドシートのテキストが読み込まれるのですが（これがとってもクセがあるのですがその件はまた別の機会に…）行と列の関係を考慮してコンポーネントを作らないと意図した場所にテキストが読み込まれないので色々と苦労していました。
なんとか簡単にできないものか？と試行錯誤している中でコンポーネントができたので公開してみたという訳です。

table component for Google Sheets Sync

使い方に関してはFigmaのプロトタイプで見れるHOW TO USEを用意していますので先ずはそちらを見ていただくと良いかもしれません。ステップ形式で使い方をまとめているのでブラウザでこのページを開きながらご自身のFigmaファイルを操作していただくと良いかと思います。

table component for Google Sheets Sync | Figma CommunityFigma

最後に

本音を言えばGoogle APIと連携したFigma Pluginを作ることで同じようなことが実現できると思うのですがスキルと時間の問題で今のところはコンポーネントで運用をしていこうと考えています。
もしかするともっと良いコンポーネントや最適なプラグインが既に存在するかもしれませんのでご存じでしたら教えていただけると嬉しいです。
そしてまた当コンポーネントに関しても不具合・改善点などありましたらコメントいただけますと幸いです。