Figma UI作成Tips

Figma for Design System

Figmaでデザインシステム要素

オートレイアウト

指定した「フレーム」の中に存在する要素を単一方向（縦・横）へ規則的に並べるためのルールを設定できる機能
開発を考慮するとレスポンシブ対応した設計がされていることが必要である。デザインの調整、CSSでの実装に移る際にも活用される。

コンポーネント

オブジェクトやレイヤーをまとめて再利用可能にした要素のこと
メインコンポーネントとそれからコピーとして作成されるインスタンスによって構成されている。
メインコンポーネントの変更は、インスタンスにも反映がされるため、変更が容易である。

バリアブル

カラー、数値、タイポグラフィなどのデザイン要素を変数として定義
一度定義した変数は、複数の場所で再利用が可能
ダークモードなど、異なるモード間でスムーズに切り替えができる

Figma入門

• レイアウトグリッドの作成
  フレームに対してグリッド線を付けながらデザインを進めることができるので、最初の設定として必須
  列の数を偶数にすることで画面を分割したい時に目印になる
• セーフエリアの作成
  スマホの場合、時刻、ネットワーク、充電等を表示しているステータスバーが上部にあり、下部にはホームインジケータがあり、そこを除いた領域。事前にガイドラインで表示をさせておく
• Plugin追加
  アクションからアセット、プラグイン、ウィジェットの追加

ショートカット

（個人的に使いそうなものを抜粋）
f フレームの追加の選択画面
shift + 1 1画面に全てのフレームが収まるズーム比率になる
⌘ + k アクション