Udemyのオンライン講座でFigmaを学ぶ。学習メモ。その1。
私はプロダクトデザインの中で、主にUXリサーチ〜UXの構造設計（誰のどんな課題を、どんな体験の流れで解くか）を担当しています。
UIをFigmaで作り込むことは専門ではなく、いまUdemyのオンライン講座で基礎から学び直しているところです。
しかも今はまだ講座の１０分の1。「このアプリのこの画面を作っている」という状態ですらなく「前提となる考え方」に触れ始めた段階です。
そんなタイミングで、セクション4「Figmaの高度な機能」に入ったとき、
「あ、これはFigmaの操作の話じゃなくて“ツールとしての構造の話”だな」とおもいnoteに可視化しておくことにしました。
「コンポーネント」と「インスタンス」聞き慣れないのを理解するためにチャッピーに質問してみた。
まず軽い雑談ですが、解説の中で「コンポーネントからインスタンスを「入れ子」」にするとあり、要するにこれは設計図と実体の関係をUIで扱う仕組みですよね。部品があって、それを実体として使い回す。
コンポーネント、インスタンス、（説明の便宜上使っている）「入れ子」
この日本語の並びを見たとき、なんだか妙に「構造が見える言葉」だなと思いました。
何かの“部品”があって
それを“実体として使い”
それをさらに“組み合わせる”
という関係を表している言葉という理解になりました。チャッピーと壁打ちが当たっているか概念の確認をバリバリ使っている人にきいてみます。
Figmaの画面でやっていることも、まさにそれで、一つのボタンやカードを「部品（コンポーネント）」として定義し、それを「実体（インスタンス）」として画面に配置し、さらにそれを「入れ子」にしてUIを組み上げていく。
そう考えると、これは単なるUI操作ではなく、
UIを“部品と構造”として設計するための仕組み
なんだと腑に落ちました。
オートレイアウトって「レクタングルが伸び縮みする機能」なの？
最初、私はオートレイアウトをこう思っていました。
レクタングルが可変になる機能？
でも講座で実際にやっているのは、
フレームの中にテキストを置く
それをオートレイアウトにする
テキスト量に応じてボタンサイズが変わる
という使い方でした。
つまり本質は、
中身（テキスト）に合わせて、外枠が決まる構造を作ること
ここで疑問が出てきます。
フレームの中にレクタングルを入れてオートレイアウトにする人って、実際いるの？
それとも「テキスト＋余白」を管理するために使うのが一般的？
これは現場のデザイナーに聞いてみたいポイントです。
「何を作るか先に決める」ことがUI設計の分かれ目なのではないか
制約やオートレイアウトの説明を見ていて、強く思ったのがこれです。
何を作るかを先に整理していないと、Figmaの高度な機能は活きない
UXデザイン側にいると、
この画面にはどんな機能が必要か
このオブジェクトにはどんなプロパティとアクションがあるか
というOOUI的な設計は自然にできます。
UIの仕様も頭の中ではだいたい描ける。
でもそれを、
どこまでをコンポーネントにするのか
どこをオートレイアウトにするのか
何をフレームとして定義するのか
というFigmaの構造に落とす段になると、まだ感覚が追いつかない。
UIの意味はわかっているのに、Figmaの中でどう“構造化”すればいいのかがわからない。ここが今の私の一番のギャップです。
オートレイアウト × コンポーネントは「設計の勝ちパターン」
講座の中で一番しっくりきたのがこれ。
オートレイアウトにしたボタンをコンポーネントにすれば効率的
これはつまり、
中身が変わっても崩れない
どこに置いても同じ振る舞いをする
自己完結したUI部品を作れるということ。
UXでいう「よく定義されたオブジェクト」を、そのままFigmaで実装している感覚です。
フレームとレクタングル、現場ではどう使い分けている？
これもかなり気になっています。
フレーム
レクタングル
見た目はどちらも箱ですが、役割は違う。
講座では「フレームを器にする」前提で話が進みますが、
実務ではどこまでをフレームにするのが普通なのか。
背景はレクタングル？
意味のあるまとまりは全部フレーム？
このあたりはチームの流儀がありそうです。
コンポーネントとインスタンスのチームでの使い方が知りたい
セクション23を見ていて、一番引っかかったのがここ。
インスタンスの作り方が複数あるけど、どれが主流？
コンポーネントはローカルで作る？ライブラリで管理する？
どの粒度で部品化するのが現場では普通？
これはたぶん、
Figmaの技術というよりチームの設計思想の話なんですよね。
Figmaは「UIを描くツール」ではなく「構造を定義するツール」
Figmaの高度な機能を紹介するセクションを通して感じたのはこれです。
Figmaの高度な機能は、見た目をきれいにするためのものではなく、
UIの構造を壊れにくく定義するための仕組み
UXの戦略や構造を考えてきた人ほど、ここがつながった瞬間にFigmaが一気に面白くなる気がしています。
現場のデザイナーに聞きたいこと
休み明けに、ぜひ聞いてみたい質問をまとめておきます。
オートレイアウトは主に「テキスト基準」で使いますか？
フレームとレクタングルの使い分けのルールはありますか？
コンポーネントはどの粒度で作りますか？
インスタンスの作り方で一番よく使うのは？
「強いレイアウト」を作るコツは何ですか？
