figma２日目
デザインカンプをつくるために
ワイヤーフレームが完成すると、それを基準にデザインカンプを進める。
まずはガイドを作る ⇒ レイアウトグリッド追加 ナッジ8px グリッドを列に変更
・余白の部分を超えない
・中央揃えなどを使ってレイアウトを調整
画像挿入するとき
塗りを選択 → 画像 → 画像挿入 → サイズ合わせをする
プラグインで無料の画像やアイコンサイトなどを探せる
効率化を進める
タイトルなど、共通するものを見つける → スタイルの登録 → テキスト横の4つのボッチンボタンでテキスト登録
スタイル変更するときは上下の矢印のようなアイコンで変更できる
エフェクトは右にある ドロップシャドウなど影も登録できる
コンポーネント
親になるものは別枠で作っておいて、子のみで構成したほうが作業しやすい。親は別のページなどに集めておくとよい。
親を変更すると子が全て変わる。子だけ変えたいときは子だけ変える
画面の遷移
プロトタイプに変える → 新しいページをつくる → 紐づけしたい項目をクリックして遷移したいページに紐づけ
ボタンの遷移はデザインにしてからボタンをコンポーネント化する
プロパティをクリック バリアントを選ぶ ビフォアとアフターをつくる
プロトタイプに切り替えて初期のほうを選ぶ 次に変更を選ぶ ホバー時 ディゾルブ
オートレイアウト パディングや行間などまとめて指定できる