Help us understand the problem. What is going on with this article?

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

WEB制作をしていると、ボタンデザインの使い回しをすることが多々あります。
こんな感じに中の文字数だけが異なるパターンですね。
640ccd4cee96b9b8f1d1950c44ea7b23.png

これをFigmaで簡単に作る方法についてご紹介します。

目指す形

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

STEP1 要素の作成

ボタンと文字を準備します。
1d14e0df8ab190f3432a0d88a5f97abb.png

STEP2 Add Auto Layoutをする

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

STEP3 完成

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

c6489018c2aacb671bb6e81f4a5a1681.png

OKALOG_info
知多半島でWebフリーランスをしています。 勉強の毎日です。
http://okalog.info/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away