オートレイアウトを作成すると一部のテキストが右寄せになる

Figmaでオートレイアウトを作成すると一部のテキストが右寄せになる現象と対処法を紹介します。

現象

下図のデザインを準備します。


ドラッグして選択します。


選択後右クリックしポップアップメニューを表示します。メニューの[オートレイアウトを追加]の項目をクリックします。


オートレイアウトが作成されますが、一番下のテキストが右寄せになってしまいました。

原因と対処法

原因を確認して修正します。オートレイアウトの項目をダブルクリックしてグループ内の要素を選択します。 オートレイアウトの下部のテキストを選択します。


右側のパネルを下にスクロールし、[タイポグラフィー]のエリアの[配置]を確認します。 設定が[右揃え]に変更されています。


[配置]の設定の[左揃え]のボタンをクリックして、テキストを左揃えにします。


テキストが左揃えになりました。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。