Figmaで可変のボックスを作る方法

悩んでいる人

Figmaを使ってデザインしているんだけど、もっと効率よくデザインをしたいのよね。

本記事では、デザインツールFigmaを使ったちょっとしたTipsをご紹介します。

それでは、早速ご紹介していきますね。

スポンサーリンク

目次

目指す形

こんな感じで文字数に合わせてボタンのサイズが変わります。
しかも、文字を入力後でも上下左右の余白(padding)を変更することができちゃいます。

STEP1 要素の作成

ボタンと文字を準備します。

STEP2 Add Auto Layoutをする

ここで文字とボタンを選択して、右クリックします。
赤色で囲ってある、Add Auto Layoutを選択します。

STEP3 完成

これで文字数に合わせて可変するボタンの出来上がりです。
上下左右の余白は右側にあるパネルから編集が可能です。

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次
閉じる