今のFigmaで作れるボタン

2020.09時点のFigmaでできる事を使って、ボタンコンポーネントをいくつか作ってみました。今のFigmaに何ができるかと、よく作るボタンの作り方を紹介します。

基本のボタン

基本のボタンとして、アイコンとラベルが並んでいるものを作ります。

・アイコンとテキストを並べて Auto Layout を適用する
・Auto Layout のフレームに色をつけたり角丸をつけたりする
・テキストレイヤーと、アイコンレイヤーにわかりやすい名前をつける

🤣 テキストのオーバーライドは完璧

基本のボタンをコピーして、インスタンスのテキストを編集してみます。 Auto Layout で作ってあるので、多くしても少なくしても勝手にサイズが変わって、パディングが維持されます。

また、この状態で、同じ構造の（同じ名前のレイヤーがある）別のインスタンスに差し替えても、テキストが維持されます。

🙂 アイコンと色はオーバーライドできる、が、切替で元に戻る

インスタンスのアイコンと色はオーバーライドすることができます。しかし、別のインスタンスに切り替えると、アイコンと色は初期状態（切り替えたメインコンポーネントに指定されている状態）になってしまいます。

（「アイコン」と言ってますが、正しく言うと「ネストしたインスタンス」です。）

🤔 min-widthは、スペーサーでつくる

ボタンのmin-width（最小幅）は、希望の最小幅にしたフレームを上下に差し込むことでつくります。

右側は差し込んだフレームにピンク色をつけたものです。

・アイコンとラベルを一つの Auto Layout に入れ、横のパディングは欲しいだけ、縦は 0 にする
・最小幅 x 1px のフレームを作る（スペーサー）
・「スペーサー」、「アイコンとラベル」、「スペーサー」の順で、隙間を開けずに縦に積んで、 Auto Layout (Vertical) にする
・縦のパディングは「必要な高さ - 1」のサイズにする（スペーサーの1pxを打ち消し）

🤔 左右別のパディングもスペーサー

Auto Layout のパディングは左右が同じ値になります。左右で違う値にしたい場合は、フレームをスペーサーとして入れます。

ちょっと大袈裟に左右を変えてみました。

・ボタン本体の Auto Layout の左右のパディングは 0 にする
・アイコンの左に、パディング幅にしたフレームを入れて、アイコンとパディングを Auto Layout にする（隙間は 0）
・同じようにテキストの右にフレームを入れて、Auto Layout にする

おわりに

よくあるボタンの作り方と、Figmaの現時点で出来ること・出来ないことを紹介してみました。整理すると、

🤣 できる

・テキストのオーバーライド

🙂 できるけど、インスタンスを切り替えると元に戻る

・アイコンのオーバーライド
・色のオーバーライド

🤔 スペーサーを入れたらできる

・min-width
・左右で違うパディング

こんな感じです。参考になることが少しでもあったら嬉しいです。

今のプロジェクトではじめて Figma でお仕事をしていますが、Auto Layout の使い方が分かってからすごく柔軟で楽に使えるようになりました。ノウハウが溜まってきたら、また記事にしようと思いますのでご期待ください！