目次
目次
Framerでコンポーネントを共有する
Framerでは、同じUI要素を繰り返し作る必要がなく、コンポーネントをライブラリーに共有することで、様々なプロジェクトで簡単に再利用することができます。チームでの作業が多い場合やデザインシステムを運用している場合、この機能は大きなメリットとなります。コンポーネントを効率的に共有/挿入/更新および取得する方法を以下で段階ごとに説明します。
1. コンポーネントをライブラリーに追加する
あるプロジェクトで作ったコンポーネントをワークスペースのすべてのプロジェクトで再利用したい場合は、ライブラリーに追加することができます。
ライブラリーに追加する方法
Assetsパネルを開きます。コンポーネント名横の追加オプション
···アイコンをクリックします。表示されるドロップダウンから
Library > Addを選択します。
2. コンポーネントを挿入する
ライブラリーに追加されたコンポーネントはワークスペース内のすべてのプロジェクトで利用可能で、名前で特定のコンポーネントを検索できます。
ライブラリーからコンポーネントを探す
⌘ K（WindowsはCtrl + K）を押してQuick Actionsウィンドウを開きます。Browse Libraryを選択してください。
この時、検索バーの上には現在閲覧しているワークスペース名のバッジが表示されます。矢印キーで移動しEnterを押すとキャンバスにコンポーネントを挿入できます。
3. コンポーネントを更新する
元の(Primary)コンポーネントを修正すると、そのコンポーネントのインスタンスを使用しているすべてのプロジェクトで最新バージョンをロードでき、手動で再公開する必要はありません。Assetsパネルで「Update」ボタンをクリックすると、個別のコンポーネントに変更が適用されます。必要に応じて更新をキャンセルすることもできます。
注: コンポーネントの変更はインスタンスをDetachしない場合にのみ適用されるのでご参考ください。
4. URLでコンポーネントを追加する (Copy URL)
Assetsパネルでコンポーネントの追加オプション···アイコンをクリックしてください。「
Copy URL」を選択してください。コピーしたURLを新しいプロジェクトのキャンバスに貼り付けてください。
キャンバスでコンポーネントをダブルクリックして修正を試みると、「Unlink Instance」を求めるポップアップが表示され、接続を解除するとそのコンポーネントがアセットライブラリーに追加されます。
5. コードコンポーネントまたはReactプロジェクトでコンポーネントを取得する
Framerで作成したコンポーネントは、Framer以外のReact環境でも使用できます。
使用方法
コンポーネントの追加オプション
···メニューから「Copy Import」を選択してください。コピーされたインポート文をReactコードに貼り付けてください。
例えば、Framerでボタンをデザインし、特定の条件（例えればURLパラメータやユーザーの場所）でのみ表示されるようにしたい場合、"Copy Import"オプションを使ってReactコードにそのボタンを含めてみてください。コンポーネントのメイン関数の前に配置するか、オーバーライドしてボタンの動作をカスタマイズすることができます。
これらの手順を行った後も問題が続く場合は、Framerの連絡先ページからお問い合わせください。
よくある質問(FAQ)
Q. ワークスペースの管理者のみがライブラリーコンポーネントを修正できますか？
はい。ワークスペースでEdit権限がないと修正および更新はできず、Viewerにはできません。
Q. インスタンスをDetachすると、変更の更新は全くできないのですか？
はい。Detachされたインスタンスは元のコンポーネントとの接続が完全に切れた独立した要素として存在するため、もはや更新に影響されません。
Q. コンポーネントを共有する際に、そのコンポーネントに関連付けられたCMSデータも一緒に共有されますか？
いいえ。CMSはプロジェクト単位であり、コンポーネント単位で共有されるものではないため、共有時にCMSデータは一緒に共有されません。
この記事はFramer公式ブログの『Sharing Components』を翻訳・アレンジしたコンテンツです。
