Service logo

    ジョブボード

    有益なデザイン情報をメールでお届けします。

    お役立ちのデザイン情報のみをお送りします。メールは多くとも週に一回で、もちろんスパムメールはありません。

    ツール
    • Figma
    Figma
    • プラグイン
    • 機能
    インスピレーション
    • ポートフォリオ
    • デザイン記事
    • ジョブボード

    Designpedia © 2025 / Trademarks, names, terms and IPs are property of their respective owners unless otherwise stated

    Legal Information

    Figma プラグイン

    Figma 機能

    figma logo

    Figma フレーム内のオブジェクトの配置を設定する

    フレーム内のオブジェクトの配置を設定する

    1. Figma
    2. 機能
    3. デザインパネル
    4. 制約
    eyecatch image

    概要

    フレーム内のオブジェクトを選択した時に設定できます。 フレームを拡大縮小しても、オブジェクトはフレーム内の設定した位置に常に固定されます。

    1. 水平方向の配置
    2. 垂直方向の配置
    3. スクロール時に位置を固定

    apply-constraints_image01.png

    1. 水平方向の配置

    ① 左:フレームの左からの距離を固定する ② 右:フレームの右からの距離を固定する ③ 左右:フレームの左右からの距離を固定する ④ 中央:フレームの中央に固定する ⑤ 拡大縮小:フレームに合わせて拡大縮小する

    apply-constraints_image02.png

    ① フレームの左からの距離を固定する(フレームに塗り設定をしております。)

    apply-constraints_image03.png

    フレームを拡大すると、写真は左に固定されたままフレームのみ大きくなります。

    apply-constraints_image04.png

    ② フレームの右からの距離を固定する(フレームに塗り設定をしております。)

    apply-constraints_image05.png

    フレームを拡大すると、写真は右に固定されたままフレームのみ大きくなります。

    apply-constraints_image06.png

    ③ フレームの左右からの距離を固定する(フレームに塗り設定をしております。)

    apply-constraints_image07.png

    フレームを拡大すると、写真はフレームからの左右の距離を保ちつつ、フレーム同様写真の横幅が大きくなります。

    apply-constraints_image08.png

    ④ フレームの中央に固定する(フレームに塗り設定をしております。)

    apply-constraints_image09.png

    フレームを拡大すると、写真は左右の中央に位置されます。

    apply-constraints_image10.png

    apply-constraints_image11-1.png

    ⑤ フレームに合わせて拡大縮小する

    apply-constraints_image10-1.png

    フレームを拡大すると、写真は余白を残したまま水平方向に大きくなります。 apply-constraints_image11.png

    2. 垂直方向の配置

    ① 上:フレームの上からの距離を固定する ② 下:フレームの下からの距離を固定する ③ 上下:フレームの上下からの距離を固定する ④ 中央:フレームの中央に固定する ⑤ 拡大縮小:フレームに合わせて拡大縮小する

    apply-constraints_image12.png

    ① フレームの上からの距離を固定する

    apply-constraints_image13.png

    フレームを拡大すると、写真は上に固定されたままフレームのみ大きくなります。

    apply-constraints_image13-1.png

    ② フレームの下からの距離を固定する

    apply-constraints_image14.png

    フレームを拡大すると、写真は下に固定されたままフレームのみ大きくなります。

    apply-constraints_image15.png

    ③ フレームの上下からの距離を固定する

    apply-constraints_image16.png

    フレームを拡大すると、写真はフレームからの上下の距離を保ちつつ、フレーム同様写真の縦幅が大きくなります。

    apply-constraints_image17.png

    ④ フレームの中央に固定する

    apply-constraints_image18.png

    フレームを拡大すると、写真は上下中央に固定されます。

    apply-constraints_image19.png

    ⑤ フレームに合わせて拡大縮小する

    apply-constraints_image20.png

    フレームを拡大すると、写真はフレームとともに拡大します。

    apply-constraints_image21.png

    3. スクロール時に位置を固定

    プレゼンテーション時に、スクロールしても位置が動かないよう固定する。

    apply-constraints_image22.png

    apply-constraints_image23.png

    apply-constraints_image24.png

    apply-constraints_image25.png

    apply-constraints_image26.png

    apply-constraints_image27.png

    author icon

    Designpedia Team

    2024年1月16日(火) 公開