この記事は Figmaを使った制作効率アップの方法 by Figma Advent Calendar 2022 の４日目の記事です。

🎄🎄🎄🎄

自己紹介

のんたんこと、林敬子です。Code for Japanでスタッフ（主にデザイナー）をしています。
Code for Japanは、ともに考え、ともにつくる社会 をビジョンに掲げ「シビックテック」活動をしている団体です。
弊団体について詳しく知りたい方は、下記Webサイトをご参照ください！！

（尚、この記事は個人的な発言・発信となります。）

シビックテックの祭典

Code for Japanでは、年に一度Code for Japan Summitというシビックテックの祭典ともいえるイベントを開催しています。
日々、さまざまな活動を行っている方々にプログラムを担当していただき、それぞれの活動紹介などを共有いただくイベントです。

今年2022年も、9月17日から9月24日までの8日間を「サミットウィーク」として開催させていただきました。

おかげさまで、今年はプログラム総数が50本となり、Summit開催初日の9月17日に、全てのプログラムをYouTubeにて一挙公開しました。

Summitの登壇データ管理

Code for Japan Summitは、毎年「新しい試み」にチャレンジしているイベントでもあります。

今年も、初の試みとして各所でウォッチパーティを開催していただくため、初日に動画を一挙配信を行ったのですが、その準備は登壇者の方々にとっても、Code for Japanのスタッフにとっても大変な作業となりました。

今年はイベント登壇管理サービスSessionizeを活用し、登壇者の方々との連絡や登壇内容のデータ管理を行いました。

登壇者の方々には、Sessionizeから事前に登壇申し込みしていただき、我々運営サイドでは、登壇内容の審査をはじめとし、登録された登壇情報を活用して、そのまま公式サイトへと転用していました。

Sessionizeでは、登壇情報公開・非公開のコントールや、登壇者への通知既読チェックや提出物チェックなども含め、情報をシンプルに管理することができました。また、登壇者情報の登録や編集などの変更内容も、常時データ更新されAPI連携が可能な優れたサービスでした。（APIを活用したWebサイトの構築は、Code for Japanのスタッフエンジニア ふくっちが頑張ってくれていました！）

Figma活用シーン

さて、ここからが本題です。

Summitでのデザイナーの役割は多岐に渡ります。Summit全体のトンマナから、公式サイトのデザイン、イベント告知サムネイル、Tシャツデザイン（ラフを作った後イラレで編集）などなど。

中でも、手早く量産しなければいけなかったデザインは、Twitterでのイベントカウントダウンのイメージと、YouTube公開動画の一斉公開に合わせた、50本分のサムネイル画像作成でした。

YouTubeのサムネイルには、下記情報を同じフォーマットで入れ込む必要がありました。

• 登壇者のお名前（複数人の場合もあり）

• 登壇タイトル

• 登壇カテゴリー

• Sessionizeでの管理ID

Figma上で、同一のコンポーネントからサムネを量産する場合、エクスポート時に必要なユニークな名前を、各フレームに設定する必要があります。
また、YouTubeに動画をアップする担当スタッフのきよちゃんとの連携をスムーズにするためにも、この各フレームの名称はSessionizeのIDと統一することが必要でした。

使用したプラグイン- JSON to Figma

前述の通り、SessionizeはAPI連携もできるほか、CSV（JSON）のエクスポートも行うことができます。（一部最適化する必要がありますが）

「JSON to Figma」を活用して、50本分の動作サムネイルを一気に作ることができました。

Figmaのフレーム内に「title」「speakers」「tags」と、JSONのデータ配列と同じテキストをテキストボックスで配置します。
あとは、データの数だけコンポーネントを複製し、その後はプラグインにお任せです！ものの数秒で50本分のサムネイルが出来上がりました。

このプラグイン使用後、「id」に流し込まれたテキスト情報を、そのまま各フレーム名にコピペする作業や、タイトルの改行位置や登壇者のお名前の部分調整など、多少の調整作業は必要でした。
それでも、50フレーム全てを人力で行ってしまうと入力ミスが無いかダブルチェックが必要となります。その工程を省くことができたため、直前まで登壇者のタイトル修正などに対応することが可能となりました。

また、マスターコンポーネントを複製して利用したのは、後からまとめて微調整したい場合に、すぐに対応できるようにするためでした。

今年のサムネのデザインは、グラデーションを全面に使用しているため、文字の可読性が落ちるポイントが発生しないように、予め調整はしていましたが、最終的な文字量や行数などが確定した段階で、最終確認を行い微調整を行っていました。（コントラストチェックはStarkを愛用しています✨）

おわりに

以上が、今年一番のわたしにとってのFigmaを使った制作効率アップの方法でした。サムネの大量作成の際には役立つと思いますので、是非プラグインも合わせて試してみてください！

おまけ

https://qiita.com/advent-calendar/2022/civictech の４日目の記事も同日公開しましたので、合わせてお読みいただければと思います！