Open4

Figma の学び直し

Kento SasakiKento Sasaki

Branch

Summary

  • branch は既存の Figma ファイルは変更せず、自由に編集できるワークスペース
  • branch での変更は既存のファイルに merge されたときに反映される
    • ほぼ Git の branch と同様の概念のような気がする
  • GitHub でPRを作るのと同じように、branch で変更した内容をレビューしてもらって、approve されたら main に merge する、という使い方もできる
  • branch の作成と merge は version history で閲覧できる

branch の運用プロセス

  • Create
    • branch を作成する
  • Share
    • branch を共有する
  • Update
    • main の変更を自分の branch に適用する
  • Request
    • branch を main に merge する前にレビューしてもらう
  • Review
    • branch の変更をレビューする
  • Merge
    • branch の変更を main に適用する
  • Manage
    • 既存の branch を管理する

気になったこと

  • 値段
  • 開発者もブランチを見れる？
    • main ファイルにアクセスできるならすべての branch を閲覧可能
  • ブランチを複数運用できる？
    • 複数のブランチを作ることは可能
    • ただし、ブランチからブランチを作ることはできず、常に main からしか作れない
  • main に更新があり、自分のブランチと差異が生じた場合
    • main に更新があった場合は Figma が通知してくれる
    • main に対する更新をレビューして、自分のブランチに適用するか選べる
      • 変更の一部を適用することはできない
    • 自分のブランチで新たな assets を作っていた場合、main の変更を適用しても新しい assets は影響を受けない
    • https://help.figma.com/hc/en-us/articles/5665728006423-Get-updates-from-main-files
  • コンフリクトが起きた場合はどうなるのか

Figma の Branch を導入する際の懸念

  • デザイナーの学習コスト
    • branch の概念はエンジニアにとっては馴染みやすいが、デザイナーにとっては大変かもしれない
      • 命名をどうするか
      • branch を運用する感覚
  • 金銭的コスト
Kento SasakiKento Sasaki

Version History

Summary

  • Figma ファイルの現時点の状態をバージョンとして保存できる
    • 作業後にバージョンを保存し、作業内容のログを管理することができる
    • いつ誰がどんな変更をしたのか確認できる
  • Figma が自動で保存する履歴もある
    • Figma ファイルへの閲覧権限があれば version history を見ることはできるが、作成はできない
  • Create and name versions
    • 既存の履歴のタイトル、説明を編集することも可能
  • View a version
    • 特定の version の Figma を閲覧することが可能
    • 開発者モードでは、特定のバージョンを見ながら任意のオブジェクトのスタイルを確認することも可能
  • Copy assets
    • 過去のバージョンのオブジェクトをコピーして、現在のバージョンにペーストすることが可能
  • Duplicate a version
    • 任意の version を複製して新しい Figma ファイルにすることが可能
  • Restore a previous version
    • 過去のバージョンに戻すこともできる
    • 必要になったときに復元できるので、不要になったデザインデータを残しておく必要がない
    • restore してもコメントはそのまま
      • 削除したコメントも戻らない
    • restore した場合、自動で直前の version と直後の version を保存する
  • 変更内容の比較
Kento SasakiKento Sasaki

Variables

Summary

  • Variables を使って任意の値に名前をつけることができる
    • 色、数値、文字列、真偽値に名前を付けて参照できる
  • variable は他の variable を参照することもできる
    • これによってデザイントークンを実装することもできる
  • variable を整理するために collection と group を使うことができる
    • collection は variable と mode のセット
    • group は collection の中で更に論理的な区分をするための概念
  • Variable modes
    • mode は variable にセットする値のリストであり、様々なデザイン上のコンテクストの表現
    • 例えばライトモードとダークモードを表現できる
  • variable は1つの collection につき5000個定義できる

Style と Variable の違い

  • Style はUIの設定値の組み合わせの定義
    • font-size, font-weight の組み合わせ、色の組み合わせなどに名前を付けて定義できる
  • Variable は単一の値
    • カラーコード #202020, 任意の文字列などの単一の値

Variable の適用

  • variable は色、数値、文字列、真偽値を使えるが、それぞれの型ごとに適用できるオブジェクトが異なる
  • 適用スコープを限定できる
    • 例えば数値の variable は border-radius, font-size, height などに適用できるが、この適用できる対象を限定することができる

mode

  • variable が取りうるパターンを mode として定義できる

    • 例えば以下のように、色の variable に対して Light と Dark のそれぞれの mode に対する値を定義できる

      Light Dark
      color-text-primary #202020 #ffffff
      color-border-primary #202020 #757575
  • mode はオブジェクトに対して設定でき、特定の mode に指定するか、自動にすることができる
    • 自動にした場合、デフォルトの mode は一番左のものになる
    • mode が自動の場合、親の mode を継承する
  • mode はプロフェッショナルプランで4つまで定義できる
  • mode は collection の中で共通
  • 真偽値、数値、文字列の variable はコンポーネントの variant のプロパティとして設定できる
Kento SasakiKento Sasaki

Components

Summary

  • component は再利用できる Figma のデザインオブジェクト
    • React の component の概念にかなり近い
  • main component は component の property を定義する
  • instance は main component のコピーであり、main component に対する変更をすべて継承する
    • UI の一貫性を保つことに役立つ

Variants

Component properties

variant property と component property のどちらを使うべきか

  • variant property と component property は以下のように使い分けるといい
用途 variant property component property
サイズ、色、スタイルの違い 👍 🆖
インタラクティブな異なる状態（例：ホバー） 👍 🆖
表示/非表示のロジック 🆖 👍
カスタマイズが必要な要素（例：文字、アイコン） 🆖 👍