【Figma】両端にオブジェクトを配置する方法

Webサイトデザインを作る中で、つまずいたポイントの備忘です。

1-1

1-2

1-3

Webサイトデザインを作る中で、つまずいたポイントの備忘です。

両端にオブジェクトを配置する方法

ボタンの右端に+、左側にボタン名を書きたいときなど、両端にオブジェクトを配置する方法は

これで、cssでいうdisplay: flexとjustify-content: space-betweenをFigmaで再現できます。

↓両端にオブジェクトを配置

コーディングのことを考えれば、オートレイアウトした要素間の幅は固定値に設定しましょう。（デフォルトでは「自動」と表示されます。）

同じようなパターンのレイアウトをする場合は、全体でバリアントで「数値」を設定しておけばルール化でき、デザインに統一感が生まれます。

左側に揃えたいものを一度オートレイアウトでグループ化してから作りましょう。

「コンテンツに合わせて拡大」にするためには、囲いの部分の幅を「固定」にする必要があります。誤って「コンテンツを内包」にしている場合は設定ができません。

レイアウトずれがちな問題として、オートレイアウトがルール化できていないことがあります。パターンを蓄積して、効率化していきたいですね！

ABOUT ME

うめこ

元ITエンジニア

会計事務所パート勤務

結婚・休職・転職・生活など

さまざまなライフステージに

役立つ情報を発信

将来の夢はマイホームで

悠々自適な生活を送ること！