コンポーネント

再利用可能するためのパーツやデザイン「コンポーネント」

コンポーネントとは、デザインやインタラクションを構築するための再利用可能なパーツのことを指します。これにより、効率的に作業を進め、デザインの一貫性を保つことができます。

FramerではFigmaのようにコンポーネントやバリアントを簡単に作成し、Webデザインに反映させることができます。

コンポーネントの特徴

1. 再利用可能
   一度作成したコンポーネントを複数のページやプロジェクト内で繰り返し使用できます。これにより、同じデザインや機能を一から作り直す手間が省けます。

   
   

2. プロパティのカスタマイズ
   コンポーネントには、テキストや画像、色などのプロパティを設定でき、インスタンスごとにそれらを変更可能です。

   
   

3. 動的なインタラクション
   コンポーネントにアニメーションやインタラクション（クリック、ホバー、スクロールなど）を追加し、ユーザー体験を向上させることができます。

作り方

1. 作り方は2通りあります。

   1. アセットパネルのコンポーネント欄にある+ボタンから「New Component」をクリック。

      

      
      

   2. 先にエディターでデザインを作成し、右クリックメニューから「Create Component」をクリック。もしくは⌘+⌥+Kのショートカットキーから作成可能。
      
      

      

2. コンポーネントの名前を入力し、Createを選択。（名前はなんでもOK）

   

   
   

3. コンポーネント専用の画面に移動します。コンポーネントは基本的に紫色のバウンディングボックスで囲まれます。レイヤーも紫なので分かりやすいです。コンポーネントの外側をダブルクリックすると通常のエディター画面に戻れます。

4. 必要があればスタイリングしたり、通常通りデザインを作っていく。

   
   

5. アセットパネルからドラッグ＆ドロップでキャンバスに追加ができる。