14日間でFramerを習得するチャレンジ【DAY3】
🎥 学習内容
コンポーネント / バリアント / バリアブルの整理
電車で動画視聴：「山下さんとFramerを深める会」みた
「Framerの最新アップデートとレイアウトテンプレートを詳しく探る会」動画一部視聴
コンポーネント、バリアント、バリアブルが頭の中を整理したいなと思った。
1. コンポーネント（Component）
サイトで繰り返し使うパーツ。
ボタン・カード・ナビゲーションなどをひとつに定義しておけば、どこからでも再利用できる。
修正が入ったとき、元のコンポーネントを直すと全てのコピーに反映される。
2. バリアント（Variant）
パーツのバリエーションを変える
例：ボタンコンポーネントに対して
通常表示
ホバーしたとき
無効状態
ひとつのコンポーネントに複数のデザインや状態を持たせることで、効率的に管理できる。
3. バリアブル（Variable）
パーツの中身を変える
テキスト・画像・色・リンクなどを変数として扱い、異なるデータを流し込める。
例：プロフィールカードで「名前」「写真」「肩書き」をバリアブル化 → 一つのデザインに複数の人の情報を簡単に適用できる。
レイアウトテンプレート
ヘッダー／フッターなど全ページ共通部分をテンプレ化できる。レイアウトをテンプレ
ブレイクポイントの「＋」からテンプレ設定できる
オン／オフ切り替えもできる。コンポーネントから設定？⚠️今度やってみる
アニメーション
ホバーだけでなく、押したとき（pressed）のアニメーションも設定できる
バージョン管理／ステージング
Versions からステージング的に使えそう（無料でも可？要再確認）
メンバー追加は有料になりそう → クライアントワークは注意（作って納品フロー想定）
フォント
日本語フォントが少なめに感じた
Google Fonts中心？（要調査）
Figmaユーザー視点
Figmaに慣れている人ほど、FramerのUIは取り入りやすい印象
✍️ 感想
レイアウトテンプレートはかなり良さそう。まずはここを押さえると全体設計が楽な気がする
Figma勢にはUIが馴染むかなーと
押したときのアニメまで用意できるのは地味に嬉しい（細部の質感が上げやすい）。
公開方法や、framerできた後に共有する方法がよくわかってない。
コンポーネントを制すればframerを制すって言ってたけど、、ほんとにそんな気がする🤣
慣れたらすごい早さで完成する気がする…
figmaに戻れるのかな笑
⚠️よくわかってない点
Versionsの無料でできる範囲／使い方（ステージングの具体）
日本語フォントの選択肢（Google Fonts以外の扱い／増やし方）
とりあえずもっとやってみてだな…
✅ 次のステップ
手を動かせていないので、テンプレートで公開までまずひと通りやってみたい。
