見出し画像
Photo by twentynine

弊社でFigmaをどう使ってるか先輩に突撃。「フレーム」じゃなくて「レクタングル」？──オートレイアウトを見学して、初心者の認知がひっくり返った話

いがこ

前回のnoteでは、
「Figmaの制約やオートレイアウトが、なぜこんなに分かりづらいのか」
というモヤモヤについて書きました。

👉 前回の記事
https://note.com/tmkigrs/n/nce9f27247538?from=notice

今回は、そのアンサー編です。
Figmaベテランの画面を横で見学する機会があり、「なるほど、これは初心者が迷うわけだ」と腑に落ちたことがいくつもありました。

この記事は、

  • Figmaを勉強し始めたばかりのUXリサーチャー兼UXデザイナー

  • フレーム／レクタングル／オートレイアウトが頭の中で混線している人

が書いています。

Figmaベテランに聞いてみた、素朴な質問

ずっと気になっていたことを、率直に聞いてみました。

Q：普段、フレームを使っていますか？ それともレクタングルですか？
A：基本はレクタングルですね。

この答えに、正直ちょっと驚きました。

理由を聞くと、

フレームにすると、オートレイアウトが効かなくなる場面があるから

とのこと。

ユーデミーの動画で矩形を書くときは「フレーム＝基本」「レクタングル＝図形」そんなイメージを持っていた自分は、ここで一瞬フリーズしました。

「レイアウトの際の効率」「Figma使っているのがプロダクトだから」かな？ともいました。

WEBサイトだとちがうのかもしれません。答えてくれた人も私も事業会社での利用を想定しているからです。この辺の利用の文脈は本ではなく同じ職場の人ならではなので、自社の仲間は大事です。

この時点で、
「ああ、初心者が混乱する原因はここだな」と感じました。

オートレイアウトを“使っている画面”を見学する

その方は、オートレイアウトをかなり日常的に使っていました。

オートレイアウトとは、
選んだグループのレイアウトを自動で整えてくれる仕組みですが、
実際の画面を見ると印象が変わります。

ただし、このパネル。
初心者の理解と、実際の意味がズレやすいポイントがいくつかあります。

①「フロー」

私がこれまでイメージしていたのは、
「フロー＝画面遷移や処理の流れ」でした。

でも実際には、
要素をどう並べるか（横・縦）の向きを指定する項目です。

言われてみれば納得なのですが、
言葉の印象がまったく違うので混乱します。

②「配置」

これも勘違いしていました。

私のイメージは、
「複数の要素を選択して、中央揃え（など）する操作」。

でもオートレイアウトの「配置」は、
選択しているエリアの中で、どう配置するかを指定するものです。

ここで重要なのは、
「エリア」はキャンバス全体ではなく、
選択している親要素に依存するという点です。

この前提を知らないと、
「思っていたのと違う動き」をする理由が分からなくなります。

正直なところ、

こんなに“理解している前提”が違うとは思っていませんでした。

英語UIの日本語訳の問題なのか、
HTMLやCSSを触ってきた人たちの文化なのか。
このあたりは、よく分かっていません。
（詳しい方がいたらぜひ教えてほしいです）

Figmaの使い方聞こうの会で新たに学んだこと

① レイヤー名の色の違い

レイヤー名には、黒と紫があります。

  • 黒：通常のレイヤー

  • 紫：

    • コンポーネント

    • インスタンス

    • バリアント

さらに、色だけでなくアイコンでも状態が分かるようになっています。

「なんとなく紫だな？」と思ったら、
それはもう“ただの図形”ではない、というサインでした。

② コンポーネントとインスタンス

ここは、超初心者の私にとってかなり重要なポイントでした。

正直、口頭で説明するのが一番むずかしいところです。
今回は生成AIに整理してもらいました（ありがたい）。

| 用語 | アイコン | 役割 | 編集の影響 |
| コンポーネント | ❖ | 親（原本） | すべての「子」に反映される |
| インスタンス | ◇ | 子（コピー） | その子だけ変わる（親には影響しない） |
| バリアント | 点線枠 | 親のセット | 状態を切り替えられる |

スマホだと見にくい。図にするので少々お待ちを。

  • ❖ コンポーネント ＝ 「スタンプの版（ハンコ本体）」

    • 版の形を削って変えると、これから押すものも、既に押したものも全部形が変わります。

  • ◇ インスタンス ＝ 「押されたスタンプ（印影）」

    • 紙に押された後、その一つだけにペンで色を塗っても、元のハンコ（版）の形は変わりません。

  • 点線枠：バリアント ＝ 「スタンプの詰め合わせセット」

    • 「OK」「NG」「保留」など、関連するハンコが一つにまとまっていて、いつでも持ち替えられる状態です。

Figmaの本を読めば載っていそうですが、
実際に触っているタイミングで整理できることが大事だなと感じました。

今後、調べたいことメモ

  • 内包とは何か
    なぜか中華料理（点心）を思い出します。たぶん肉まん。

  • インスタンスの切り離し
    説明の中でちらっと聞いたけど、すっかり忘れました。

  • バリアントの理解

  • Udemyの動画を最後まで見る
    点の知識で終わらせないようにしたいです。

まとめ：Figmaは「見た目」より「構造」を触っている

今回いちばん大きかった気づきは、

Figmaは、見た目を作っているようで
実は構造を設計するツールだということ。

だからこそ、

  • 言葉の定義

  • 親子関係

  • 内と外の考え方

ここが分からないと、一気にしんどくなります。

逆に言えば、
ここを一度ひっくり返せば、楽になるとも感じました。

次は「内包」と「切り離し」を、ちゃんと理解しにいこうと思います。
Figma沼、まだ浅瀬です。

いいなと思ったら応援しよう！