···

    Figmaのフレーム

    はじめに

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

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

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

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

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

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

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

    フレームの作成

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

    • キーボードショートカット(FまたはA)を使用する
    • ツールバーでフレームツールを選択するImage showing the location of the frame tool as the third option in the Figma toolbar

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

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

    レイヤーパネルので、フレームを特定できます。Image showing a frame in the Layers panel with a grid-like icon

    ヒント 既存のオブジェクト(シングルレイヤーまたは複数レイヤー)を囲むフレームを作成することもできます。フレームを選択するためのキーボードショートカットを使用します。

    • MacOS: ⌥ Option ⌘ Command G
    • Windows: Ctrl + Alt + G

    フレームのプロパティ

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

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

    その他の機能

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

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

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

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

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

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

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

    フレームとその子の塗りと線のプロパティを調整するには、[選択範囲の色]を使用して、選択範囲内の色を表示または調整します。

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

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

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

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

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

    最上位フレーム

    Figmaのレイヤーパネルでは、最上位フレームが太字で表示され、キャンバスには最上位フレームの名前が表示されます。Image showing a top-level frame in the canvas and layers panel

    ネストしたフレーム

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

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

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

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

    Image of an example app design in the canvas, where you can see the individual frames by themselves on the left and then combined into a single frame on the right

    フレームのサイズ変更

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

    フレームのドラッグ

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

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

    ヒント 子オブジェクトの制約をすべて無視するには、修飾キーを押しながら操作します。

    • macOS: ⌘ Command
    • Windows: Ctrl

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

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

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

    メモ: 制約を子オブジェクトに適用している場合、新しいフレームプリセットに対応するように子オブジェクトのサイズが変更されます。制約を適用していない場合は、フレーム内のオブジェクトの寸法と位置が維持されます。

    プロパティパネル

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

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

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

    Image of the top-right corner of the Design tab in the right sidebar. The width and height fields have a blue dashed rectangle around them

    ヒント 寸法フィールドを使用して計算を実行できます。これにより、オブジェクトを簡単に拡大縮小またはサイズ変更できます。

    • % パーセンテージ(例: 50%) 
    • + 加算 (例: +100) 
    • -  減算 (例: -20) 
    • *  乗算 (例: *4) 
    • /  除算 (例: /8) 

    幅または高さにパーセンテージを掛けることはできません。たとえば*50%と指定すると、元の数値に50%ではなく50が掛けられます。

    サイズ自動調整

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

    • キーボードショートカットを使用します。
      • macOS: ⌥ Option Shift ⌘ Command R
      • Windows: Alt Shift Control R
    • プロパティパネルの右上隅にあるをクリックします。Image showing the location of the resize to fit icon in the top-right corner of the Design tab in the right sidebar

    Related Videos