Figma フレーム内のオブジェクトの配置を設定する
フレーム内のオブジェクトの配置を設定する
- Figma
- 機能
- デザインパネル
- 制約

概要
フレーム内のオブジェクトを選択した時に設定できます。 フレームを拡大縮小しても、オブジェクトはフレーム内の設定した位置に常に固定されます。
- 水平方向の配置
- 垂直方向の配置
- スクロール時に位置を固定

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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






Designpedia Team
2024年1月16日(火) 公開