【学習ログ】Figma #2 主要機能の実践

はじめに

↓#1で導入まで実施したため、今回は実践的な機能を試す

Figmaの主要機能

レイアウトガイド

• 要素に対して水平・垂直の補助線を引くことができる
• 配置のズレ防止し、正確なデザイン調整が可能になる
  

Constraints

• 親要素のフレームに応じて位置やサイズの自動調整できる
  （画像の例は親要素の右端と下端までの距離を保つ設定）
  
  

コンポーネント化

• 繰り返し使うUIはコンポーネント化して管理できる
  
• Variantsを使えば、サイズや状態を一括管理できる
  
  
• 作成したコンポーネントは、ナビゲーションパネル⇒アセット⇒このファイル内で作成　から利用可能
  
• メインコンポーネントを変更すると、インスタンスにも自動反映される
  
• インスタンスの変更はメインコンポーネントには反映されない
  
  (メインコンポーネントは別ページに退避しておくと安全)
  

コメント機能

• デザイン上にコメントを追加でき、レビューやフィードバックができる
  

まとめ

ここまでの内容を抑えれば、簡単な画面イメージレベルのデザインは作れそう
実務でFigmaを扱う中で、新しいポイントが出てきたら、ここに追記する