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

悩んでいる人

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

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

この記事を書いている人

プログラミングを学習開始して、1年後にShopify Experts企業に入社。愛知県の田舎からフルリモートで働いています。(21年2月入社予定)
Twitter( https://twitter.com/oka_jumboworld )

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

スポンサーリンク

目次

目指す形

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

STEP1 要素の作成

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

STEP2 Add Auto Layoutをする

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

STEP3 完成

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

スポンサーリンク

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

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

コメント

コメントする

目次
閉じる