Open7

Figma でスライド作るときの手癖

ピン留めされたアイテム
takummatakumma

これはなに

最近はパワポや Google Slide を使わず Figma でスライドを書くことが多くなってきたので、Figma でスライドを作るときの手癖をいくつかまとめてみます。

書かないこと

  • Figma の使い方的な話
  • いいスライドを作るためにはみたいな話

あくまで手癖というわけで。

takummatakumma

Pagenate

スライド番号を振りたい時は、Pagenate プラグインを利用する。

https://www.figma.com/community/plugin/805217025770129636/Paginate

追加する時は、

  1. スライド番号のコンポーネントを作成
  2. インスタンスを1個のスライドに設置
  3. 設置したインスタンスを cmd + x(Cut) -> cmd + a で全てのスライドを全選択 -> cmd + v で全部のスライドの同じ位置に設置
  4. pagenate を実行してページ番号自動振り分け

みたいな流れでやってる。スライドをある程度追加してできたらまた pagenate を適宜実行したりしてる。

takummatakumma

スライドに追加したはずなのに prototypeで開いたら(or export したら)Frame の中に入ってなかった 😭 問題

スライド作っていざプレビューを開くと入れたはずの要素が入ってなくて、ファイル確認すると frame 外に要素が出たままになってることが(割とよく)ある。プレゼン本番の時にやるとガチで焦る(確認は大事)。

スライドの Frame 意外の要素がファイル直下に存在しない(かつスライドが整列されてある)場合は全選択(cmd + a)すると instance swap のピンクのラインが出てくるのでそれで判断・確認することが多い。

ピンクのラインが出てくる図

テキストとかが frame 外に出てると全選択した時に右下に整列するよマーク(名称不明)が出てくる。

takummatakumma

スライドコンポーネント

企業のコーポレートとかになるとまた話が変わったりすると思うけど、基本的に僕は LT の時に使う雑スライドを書く割合が一定以上あって、ハッカソン的に単発スライドを生成することも多い。かつ、スライドのデザインを気まぐれで変えたい人なので、スライドのテンプレートを作ってライブラリで公開。みたいなことはしてない(面倒臭いし)。代わりに、過去の自分のスライドからパクってきて内容だけいじるっていうのをよくやる。

(完璧にやろうとしない!速度が大事!)

もしやるなら各社のコーポレートスライドファイル(あるか知らんけど)を参考にするといい気がする。

takummatakumma

スライドの Export

Figma のプレゼンテーション実行(Prototype)は、自分でやってると感じないけど他の人が開くと開くまでにめちゃくちゃ時間がかかってしまうのでプレゼンの時に資料共有を figma でやるのはあまり良くない(めんどくさいのでやるけど)。

ので、SpeakerDeck あたりに pdf を上げておくのが無難。

figma の PDF 系のプラグインだと pitchdeck あたりが主流だと思うけど、制限とかあってだるいので自分は普通に Figma 自体の Export の機能を使ってる。

https://www.figma.com/community/plugin/838925615018625519

Figma の Export の機能を使う時は、ファイル -> フレームを PDF にエクスポート でできる(英語はわかりません)。

https://help.figma.com/hc/en-us/articles/360040028114-Guide-to-exports-in-Figma#pdf

Export した PDF ファイルは大抵デカい(数十MB とかになったりする)ので、いつも PDF 圧縮サービスに投げてる(低圧縮高品質にしても 1/10 ぐらいにはなる)。

https://www.ilovepdf.com/ja/compress_pdf

takummatakumma

サムネイル

スライド作ってタイトルページができたらとりあえずサムネイルに設定しておく。自分で作るスライドのデザインファイルは大抵ファイルの命名が適当なのでサムネイルを設定しないと何のスライドかわからなかったりする。逆に、設定してあるとどのスライドかすぐにわかる。