Figma Sitesは、オープンベータとしてConfig 2025でリリースされました。現在、すべての有料プランで利用可能であり、スタータープランの限定的な体験版も近日提供されます。ベータ版に含まれる内容の詳細はこちらをご覧ください。
Figma DesignとFigma Sitesの間でオブジェクトを自由にコピーと貼り付けできますが、各製品で動作が異なる機能がいくつかあります。
ヒント: これらの製品の違いについて知りたいですか? Figma SitesとFigmaデザインで使用可能なツールとプロパティについての詳細はこちらをご覧ください。
FigmaデザインからFigma Sitesにコピー
標準のコピーと貼り付けのキーボードショートカットを使用して、Figma DesignとFigma Sites間でデザインアセットのコピーと貼り付けを行えます。
- コピー: CtrlまたはCmd C
- 貼り付け: CtrlまたはCmd V
デザインの幅が1200～1600ピクセルで、ファイルの作成者である場合、新しいFigma Sitesファイルに直接送信できます。
- デザインが含まれているFigmaデザインファイルを開きます。
- Figma Sitesにウェブページとして追加するフレームを右クリックします。
- [Figma Sitesにコピー] を選択します。
Figmaは、ホームページに追加されたデザインで新しいサイトファイルを開きます。
注意事項
以下は、FigmaデザインからFigma Sitesに移行する際の注意すべき点です。
|
機能 |
ビヘイビア |
|---|---|
|
アノテーションはサイトファイルでレンダリングされませんが、デザインをFigmaデザインにコピーして貼り付けた後に再表示されます。 |
|
|
各要素の配置は、Figma Designで設定されたプロパティに基づいています。
|
|
|
ほとんどのプロトタイプのコネクションは、Figma Sitesで対応するインタラクションに自動的に変換されます。サポートされていないインタラクションのトラブルシューティングについてはこちらをご覧ください。 |
Figma SitesからFigma Designにコピー
Figma SitesからFigma Designにデザインアセットを手動でコピーして貼り付けるには、上記の標準的なコピーと貼り付けのキーボードショートカットを使用できます。
ヒント: Figma Designにコンテンツを貼り付ける方法を変更する方法は、貼り付けて置換したり、選択範囲に重ねて貼り付けたりするなどたくさんあります。
注意事項
以下は、Figma SitesからFigmaデザインに移行する際の注意すべき点です。
| 機能 | ビヘイビア |
|---|---|
|
アクセシビリティプロパティはデザインファイルにはレンダリングされませんが、デザインをコピーしてFigma Sitesに貼り付けた後に再び表示されます。 |
|
|
Figmaデザインでは埋め込みがサポートされておらず、キャンバスでは静止画像として表示されます。 |
|
|
利用可能な場合、インタラクションは対応するプロトタイプコネクションに自動的に変換されますが、多くのインタラクションはFigmaデザインではサポートされていません。 |
|
|
外部ウェブサイトへのリンクは、Figma Designで[リンクを開く] プロトタイプアクションに自動的に変換されます。サイト内の他のウェブページへの内部リンクは、Figmaデザインにコピーされません。 |
|
|
各要素の配置は、Figma Sitesで設定されたプロパティに基づいています。
|
|
|
各ウェブページは、各ブレークポイントに対応するフレームを含むセクションに変換されます。 |