Figmaのフレーム

はじめに

この機能を使用できるユーザー

すべてのチームまたはプランのユーザーはフレームを使用できます。

ファイルの編集可のアクセス権があるユーザーは、フレームを作成および編集できます。

Figmaでは、レイヤーをキャンバスに直接追加できます。特定のデバイスや画面サイズに合わせてデザインする場合は、デザインのコンテナを作成することがあります。このような場合にフレームを利用できます。

デザインツールの使用経験があれば、アートボードをご存じでしょう。フレームではアートボードと同様に、キャンバス上のエリアを選択して、その中でデザインを作成できます。

従来のアートボートとは異なり、フレームを別のフレームの中にネストできます。これにより、より複雑な、連動するデザインを作成できます。

フレームでは、レイアウトグリッド、オートレイアウト、制約、プロトタイピングなどの他の機能も利用できます。

フレームの作成

キャンバスでフレームツールを使用してフレームを作成します。フレームツールを選択する方法はいくつかあります。

• キーボードショートカット(FまたはA)を使用する
• ツールバーでフレームツールを選択する

これで、キャンバスでさまざまなサイズのフレームを作成できます。

• デフォルトのフレーム(100 x 100)を作成するには、キャンバス上をクリックします。
• カスタムサイズのフレームを作成するには、キャンバス上でクリックしてドラッグします。
• 右サイドバーのドロップダウンを使用して、フレームプリセットを選択します。
  1. 人気の高いデバイスとアセットのテンプレートのプリセットを選択します。
     • スマートフォン
     • タブレット
     • デスクトップ
     • ウォッチ
     • 紙
     • ソーシャルメディア
     • Figmaコミュニティ
  2. 矢印をクリックしてセクションを展開し、リストからプリセットを選択します。

レイヤーパネルので、フレームを特定できます。

フレームのプロパティ

フレームにはいくつかのプロパティが関連付けられています。フレームでは次のプロパティがサポートされています。

• 角の半径: ソフトなエッジにするため、フレームの角を丸くします。
• コンテンツを隠す: フレーム内のオブジェクトの、フレーム境界から外に出ている部分を非表示にします。
• レイアウトグリッド: ガイドラインを作成して、デザインに視覚的な構造を与えます。
• オートレイアウト: コンテンツに対応して変化する動的なフレームを作成します。
• 塗り: 塗りつぶし、グラデーション、画像(PNG、JPEG、GIF、TIFF、WEBP)をフレームに適用します。
• 線: フレームに線を追加してボーダーやアウトラインを作成します。
• エフェクト: シャドウやぼかしをフレームに追加します。

その他の機能

フレームでは、Figmaのその他の機能も使用できます。次の機能を使用するには、フレームを使用する必要があります。

• レイヤーグリッド: 透明なグリッド、列、行をフレームに適用し、視覚的な構造を与えます。
• 制約 : フレームのサイズを変更したときの子オブジェクトの動作を定義します。制約はフレーム内のオブジェクトに適用します。
• オートレイアウト: オートレイアウトをフレームに追加し、コンテンツに応じて変化する動的レイアウトを作成します。
• プロトタイピング: キャンバス上のフレーム間を移動するインタラクティブなプロトタイプを作成します。

フレームは親オブジェクトです。つまり、フレームはその中に配置されるすべての子オブジェクトをコントロールしたり、これらに影響を与えたりすることができます。

Figmaでの親/子関係の詳細はこちら →

フレームのプロパティの調整

これまでは、フレームを選択していれば子オブジェクトのプロパティを調整できました。現在では、フレーム自体のプロパティを調整できるようになりました。

• 子オブジェクトを選択するには、キーボードショートカットEnterまたはReturnを使用します。
• 次の兄弟を選択するには、Tabキーを押します。
• 前の兄弟を選択するには、Shift + Tabを押します。
• 親を選択するには、Shift + Enterを押します。

別のフレーム内でのフレームのネスト

Figmaでは、別のフレームの中にフレームを作成できます。このプロセスをネストと呼びます。ネストにより、異なるプロパティが設定されているフレームを組み合わせて複雑なインターフェースを作成できます。

これにより新しい階層または関係が作成されます。

• 最上位フレーム: キャンバスに直接接しているフレームです。最上位フレームにするフレームを、別のフレーム、グループ、オブジェクトの中にネストすることはできません。
• ネストしたフレーム: 別のフレームの中に配置されているフレームです。最上位フレームまたは別のネストしたフレームの中に、フレームを配置できます。ネストしたフレームは親であり、かつ子でもあります。
• 子: フレームの中のオブジェクトです。

親、子、兄弟の関係の詳細を参照してください。

最上位フレーム

Figmaのレイヤーパネルでは、最上位フレームが太字で表示され、キャンバスには最上位フレームの名前が表示されます。

ネストしたフレーム

ネストしたフレームとは、別のフレームまたはオブジェクトの中に配置するフレームです。ネストしたフレームは親であり、子でもあります。フレームは、以下のフレームまたはオブジェクトの中に配置できます。

• 最上位フレーム
• 他のネストしたフレーム
• グループ

次の例では、各要素がそれぞれ個別のフレームの中に配置されています。ステータスバーは上部に、ナビゲーションメニューは下部に配置されています。また、Upcoming Ticketsの詳細を含むカードもあります。

デバイスプリセットの1つを使用して、要素を配置する最上位フレームを作成します。要素を最上位フレームに追加することで、モバイルアプリの1つの画面を作成できます。

フレームのサイズ変更

フレームは、キャンバス上の他のオブジェクトと同様に操作でき、フレームのサイズまたはスケールを変更できます。フレームのサイズを変更する方法はいくつかあります。

フレームのドラッグ

ドラッグ操作でフレームのサイズを手動で変更します。

1. キャンバスでフレームを選択するか、左サイドバーでレイヤーパネルを選択します。
2. 1つの角のハンドルをクリックしてドラッグし、サイズを変更します。または、1つの辺をクリックしてドラッグします。

フレームプリセットの変更

フレームのサイズを変更するには、別のフレームプリセットを選択します。

1. フレームを選択します。
2. 右サイドバーのプロパティパネルで、フレームフィールドを選択します。
3. リストからプリセットを選択します。
4. 人気の高いデバイスとアセットのテンプレートのプリセットを選択します。
   • スマートフォン
   • タブレット
   • デスクトップ
   • ウォッチ
   • 紙
   • ソーシャルメディア
   • Figmaコミュニティ
5. プリセットに合わせてフレームの寸法が更新されます。

プロパティパネル

フレームの幅と高さを更新するには、右サイドバーのプロパティパネルを使用します。

[W]フィールドと[H]フィールドに新しい数値を入力するか、アイコンをポイントしてフィールドをスクラブします。左にドラッグすると数値が小さくなり、右にドラッグすると数値が大きくなります。

[W] (幅)と[H] (高さ)の横にあるリンクボタンを切り替えると、サイズ変更が現在の縦横比に制約されます。

サイズ自動調整

フレームのサイズを変更し、フレームの子オブジェクトに合わせてフレームを縮小/拡大できます。これにより、フレーム内のオブジェクトの一番外側の境界を囲むようにフレームが再描画されます。

• キーボードショートカットを使用します。
  • Mac: ⌥ Option Shift ⌘ Command R
  • Windows: Alt Shift Control R
• プロパティパネルの右上隅にあるをクリックします。

フレームのグループ解除

フレームをグループ解除するには、フレームを選択して次のキーを押します。

• Mac: ⌘ CommandShiftG or ⌘ CommandDelete
• Windows: ControlShiftG or ControlBackspace