■Figmaの基本概念について
クラウドベースのデザインツール
コラボレーション
ベクターベース
プロトタイピング
COMPONENT&VARIANT
■Auto Layout？
隣接し合う複数の要素を自動で感知し、設定した内容で自動補正してくれたり、要素の中身のテキスト量に応じて自動でオブジェクトの大きさを変えてくれたりする最高の機能。
文字量に応じて幅を調整したい時や、リストの要素を入れ替える必要がある時などにAuto Layoutを使うと秒でできる。
XDのリピートグリッドとは全く別物なので使って慣れてみてください。
■設定パネルと仲良くなる
・サイズを制御
・要素間余白設定
・パディング設定１
・パディング設定２
・レイアウト設定
・Auto Layout解除
・さらなる設定画面
■COMPONENT&VARIANTSの使い分け
■COMPONENT？
コンポーネントは複数のデザイン間で再利用できる要素 → 元々フロントエンド開発ではお馴染み
インスタンスの文字や色の設定は上書きすることができる。レイアウトは上書きできないので、複数のプロジェクト間で一貫性のあるデザインを作成して管理する時に非常に便利。
コンポーネントをAuto Layoutを用いて作成したり、レイアウトグリッドなどの機能を使うことで作業を効率化できる。
■VARIANTS
Variantsは、1つのMainコンポーネント内で様々な状態を表現でき、拡張可能なデザインシステムに新しい可能性をもたらす画期的な機能。
インスタンスを使う際に、右のプロパティパネルで異なるバリアントに秒で切り替え可能。
Variant前は、1つ1つコンポーネントを作っていてくっそ大変でVariant前の生活はもはや考えられない。
■COMPONENTを新規作成するのがいい場合
・階層構造の違い
・アイコンや独自のHTMLタグ
・サイズや構成を大きく変えたい時
・機能性が違う時
・OSを追加
■VARIANTがいい場合
・
・インタラクティブな状態
・スロット追加
・バイナリ属性追加
■Variablesがいい場合
・カラーテーマ管理
・エイリアシング
・バリデーション管理
・ブレークポイント
・サイズ違いで揃える
コメント