Zenn
🍇

FigmaでYouTube風の画面を作成したので重要ポイントを纏める

2022/10/19に公開
Figma
初心者
フロントエンド
idea

FigmaでYouTube風画面のプロトタイプを作成した。
YouTube-Cloneの動作確認は以下の通り。
https://youtu.be/YGqy4x2TAQs

Figmaとは

Figmaとは以下のように定義されている。

Figma is the only platform that brings together powerful design features you already love and a more efficient workflow to boot.

Figmaは、あなたがすでに愛用しているパワフルなデザイン機能と、より効率的な構築ワークフローを組み合わせた唯一のプラットフォームです。

  • Figmaを利用すると得られるメリット
    発案者のデザイン案を低コストかつ正確に他者に共有できる
    案を美しく可視化したいが、実際の雰囲気を正確に捉える仮実装するとなるとコストが嵩む。Figmaはこのジレンマを解決してくれる強力なツールであると筆者は考えている。
    UIの挙動も再現でき、プロトタイプを実際に操作することも可能だ。

YouTube-Cloneを作成するにあたって

プロトタイプを作成するにあたって幾つかのポイントを纏める。闇雲に作成するより格段に効率が増したと考えられる要点を列挙する。

[1]LayoutGrid × AutoLayoutで設計しコンポーネント化する

The 8-Point Gridの採用
YouTube-Cloneを作成するにあたって基本的にThe 8-Point Gridに準拠した。 (8 Point Grid System構成)

  • The 8-Point Grid : Bryn Jackson氏の提唱する意思決定の減少とマルチプラットフォーム設計のサポートを目的としたグリッドシステム。サイズや配置に"8"の倍数を用いて構成し、その一貫したスケーラブルな間隔で作業の高速化を手助けする。

The 8-Point Gridを効率良く構成するためにLayoutGrid × AutoLayoutの工夫が非常に有効だと感じたので以下に記載する。

  1. 40pt × 8ptで指定したLayoutGridをスタイル登録する
    Figmaではレイアウト補助線としてグリッド線を引くことが可能だ。デフォルトでは10ptで指定されている部分を8ptで指定する。しかし、YouTube-Cloneのようなデスクトップ想定(1440pt × 1024pt)だと全体を把握しにくくなるため、第2補助線として8pt×5本分の40ptで引いておくと格段に使いやすくなる。スタイル登録を行うことで即座に他フレームでの流用が可能になる。

  2. AutoLayoutの間隔をThe 8-Point Gridで自動で揃える
    AutoLayoutの値を8の倍数を割り当てることで、容易にThe 8-Point Gridを実現できる。
    コンポーネントを作成する上で、問題となりがちなのがアイテムの追加と再配置である。
    間隔を維持した状態で後から追加アイテムをアイテム間に配置することも可能。
    AutoLayout
    HardGrid

  3. 上記のフレームをマスターコンポーネントとして設定、複製する。
    マスターコンポーネントを作成し複製することで一貫したスタイルを維持できる。
    マスターコンポーネントを編集した場合、同時に子コンポーネントにも編集が適用され、もし個別に編集する場合はインスタンスからの切り離しを行えば良い。
    子コンポーネントを配置した後、CTRL+Dで連続して作成&配置可能。
    基本操作だが以下のような整列するフレームは多く、非常に重宝する。

[2]プラグインの有効活用

コンポーネント化した動画には多くのサムネイルやアイコンが用いられている。
別途Blender等で作成しようかと考えたが、手間だったのでプラグインを利用している。

これらのプラグインを[1]で作成したコンポーネント内の画像に一気に割り当てた。
ほぼ調整不要なので大幅な時間短縮になる。

[3]動画再生インタラクションの代替手法

Figmaでは現在.mkv等のファイルの埋め込みは対応していない。[1]

YouTubeの再生挙動を再現するにあたって、別の手法を考案する必要があったので以下の手法で疑似再現した。
1. GIF化した動画を配置した再生ページを別途作成する。
2. 再生ボタンのインタラクションにオーバーレイとして指定し即座に入れ替えさせる。

おわりに

Figmaは2022年9月 米Adobeが200億ドルで買収することを発表した。
これからも機能の改善と多機能化が期待される。CSS化等も可能であるし、有志によるプラグインの開発も盛んだ。
(例:StableDiffusionの対応プラグインの開発が示唆される等 )
今回の記事では、他では記載されていない要点や工夫を記載できたと思う(｀・ω・´)
オススメの実装手法や有用なプラグイン等あれば是非教えていただけると幸いだ。

新進気鋭のFigmaは圧倒的な機能力で覇権を握るツールになると考えている。
備忘録的な要素が強いが、Figmaの利用を始めるにあたって誰かの足掛かりとなれれば嬉しい。

脚注

  1. (2022/10/12)mp4形式のみ対応されたが、30MB以内等の制限がありまだまだ使いにくい。Figma公式ツイート ↩︎

Discussion