先日行われたSODA Flutter Talk #1でFigmaを使ってプレゼンさせていただきました。
自分はデザイナーではないためFigmaに精通しているわけではないですが、その上でFigmaでプレゼンしたメリット・デメリットがあったので紹介したいと思います。
結論を先に述べると、登壇を頻繁にする人なら使う価値はありそうだと感じました。プレゼン資料を作る回数が増えるにつれ自分なりの"型"が作られていくのでその恩恵を受けられそうです。
逆に初めてFigmaを触る場合は普段の資料作りより時間がかかってしまいそうです。
とはいえ、Figmaに慣れ、自分なりのテンプレートが固まってきたらかなり資料作りが早くなるポテンシャルはあるかなと思いました。
Figmaで登壇する方法
プレゼン用のフレームを用意する
まずそもそもどうやってFigmaでプレゼン資料を作るのでしょうか? プレゼン用の機能は用意されているのでしょうか?
そこからみていきます。
普段、ネイティブアプリの開発に携わっていたら縦長のモバイルサイズのフレームを見ると思います。
Webの開発なら横長のフレームを見るかと思います。
このようにFigmaはフレームという概念で要素を組み立てていきますが、プレゼンの時も同じです。
プレゼン用のフレームサイズはすでにFigmaが用意してくれています。(Figmaをプレゼン資料として作ることを想定してくれているのかもしれません。)
今回はオンライン勉強会での資料だったので16:9のフレームを使っています。
プレゼン資料を画面に表示する
勉強会で登壇するには資料を画面いっぱいに表示する必要があります。
Keynoteでは「再生」ボタンを押したときのようなことをFigmaでも行う必要があります。
Figmaの右上の「Present」ボタンを押すことで別タブで表示されます。
開いた直後には画面サイズにフィットしていない場合もあるので、OptionsからFill screenというのを選択してあげます。
そうすると画面に収まるように表示されます。
あとはウィンドウをディスプレイいっぱいに表示してあげれば画面を共有しながらプレゼンすることができます。
PDFとしてExportする
登壇あるあるですが、イベントが終わったらconnpassに資料をアップロードしたりすると思います。
その際にPDFとして書き出すためには、全てのフレームを選択した状態でメニューの「Export Frames to PDF...」を実行します。
メリット
次はFigmaを使ってみたメリットを紹介します。
良く使う要素をComponentとして定義できる
FigmaのComponentという機能は良く使うボタンなどの要素を再利用できる要素として定義できます。
例えば今回の登壇では、タイトルやアジェンダのリストをComponent化しました。
こうすることで、最後見た目の微調整をする時に全てのページのタイトルを変更する必要がなくなり、メインのComponentだけを修正してあげるだけでスライド全体に反映されます。
テキストやカラーをグローバルに定義できる
FigmaにはLocal styleやVariableという機能があります。
これはテキスト(サイズやファミリー)やカラーをグローバルに定義して、いろんな箇所で使いまわせるという機能です。
最初に定義してあげるのはちょっと面倒ですが、一度定義すれば今後自分の財産となります。
特にカラーはその恩恵が大きいかなと思います。会社の代表としてプレゼンするのであればブランドカラーを使ったり、自分が好きなカラーを定義することもできます。
また、カラーを後から変えようと思ってもVariableに定義したカラーを変えるだけで全てのスライドに適応されるため便利です。
Auto layoutを使えば配置が楽
Auto layoutという機能はFigma上の要素を縦・横・Grid状に自動で並べてくれる機能です。
例えばこの画像の青線の部分はテキストと画像をAuto layoutで組んで横並びにしています。
もし、テキストが長くなったり画像が横長に変えたい場合はAuto layoutを縦並びにするだけで切り替えられます。
それぞれの要素のPaddingを入力したり、左詰め・中央・右詰めなどを変えることもできます。
良く使うフレームのテンプレートを用意する
自分が良く使うフレームをテンプレートとして用意することもできます。
コピーして使うだけなのでとても楽です。
自分だけではない。社内で展開できる。
これはまだやっていないのですが、やりたいなーと思っていることの１つに社内展開があります。
Componentやテキスト、カラー、テンプレートが揃ってきたら社内に展開して誰でも使えるようにすると面白そうだなと思っています。
そうすれば誰でも美しい見た目の資料が作れるし、誰が作ってもその企業っぽい資料になると思います。
(美しい見た目のテンプレを作るにはデザイナーの方に協力してもらわないとですが...)
デメリット
逆にデメリットもあったので紹介します。
発表者ノートが見れない
発表者ノートといって、登壇中に表示していないディスプレイでメモ書きを見ながら話す機能はkeynoteとかにもあると思います。
Figmaを使った場合それができませんでした。
自分はあまり見ないで適当に喋っちゃうので問題なかったのですが、発表者ノートが必須の方は向いてないかもしれません。
もし何か代替機能みたいなのがあれば教えて欲しいです。
最後に
以上がFigmaで登壇するメリット・デメリットでした。
ある程度Figmaの使い方を知っていないとその恩恵を感じれないような気がします。ただ、頻繁に登壇する人にとってはFigmaでの登壇は選択肢としてありなんじゃないかなと思います。
まだまだ使い始めたばかりでこれから知見も溜まっていくかもしれません。
その時はまたアウトプットできればと思いますのでぜひフォローをお願いします。
株式会社SODAの開発組織がお届けするZenn Publicationです。 是非Entrance Bookもご覧ください！ → recruit.soda-inc.jp/engineer
Discussion