見出し画像

【FigmaのAuto Layoutをマスターしよう vol.1】 シンプルなボタン

【2024年5月追記】この記事は2020年に執筆したものであり現在のFigmaとは仕様が違うため参考にはなりません。昔はFigmaこうだったんだなぁという歴史資料として残しておきます。


みなさんFigmaのAuto Layout使ってますか?
私は普段アプリデザインの仕事をしていますが、Auto Layoutがリリースされてからプロトタイピングのスピードが2倍ぐらいになったのでは......?という感覚です。

というわけで、今回はシンプルなボタンを作りながらAuto Layoutの使い方を解説していきたいと思います!

Auto Layoutとは?

はじめに「Auto Layoutとはどんな機能なのか」という話ですが、簡単に言うと CSS でいう div です
divって高さや幅を指定しない限りは中身の大きさに従って勝手に伸びていきますよね?

画像10

FigmaではFrameに対してAuto Layoutを適用すると、テキストの量など中身に応じて伸び縮みしてくれる枠になります。

シンプルなボタンを作ろう

ではさっそくテキスト量に応じて大きさが変わるボタンを作りながらAuto Layoutの使い方を見ていきましょう。

1.ボタンの中身をFrameで囲む

テキストを打ちFrameで囲みましょう。

Frameで囲むショートカット:⌘Command+⌥Option+G

画像10

2.FrameにAuto Layoutを適用

次に「Auto Layout」パネルの+マークを押してFrameにAuto Layoutを適用します。

※GroupにもAuto Layout を適用することはできますが、 適用時に自動でFrameに変換されます。

画像10

Auto Layoutを適用するショートカット:⇧Shift+A

Auto Layoutが適用されるとレイヤー横のアイコンが長方形が2つ並んだもののになります。

スクリーンショット 2020-03-20 13.52 1

わかりやすいようにFrameに背景色をつけてみましたが、今のところAuto Layoutを適用したことによる見た目の変化はありません。

画像4

3.パディングの設定

左右のパディングを16px・上下のパディングを8pxに設定してみました。
(一番右側は要素間の指定に使いますが、今回は要素がテキスト1つだけなのでどんな値でも構いません。)

画像10

今の見た目はこんな感じ。
これはテキストを囲うdivに{ padding: 8px 16px; } があたっている状態です。

画像5

4.スタイリングして完成!

ラインをつけたり、角を丸くしたりして完成!!

画像6

......といってもここまではAuto Layoutを使わなくても作ることができます。

Auto Layoutの良さは中身に応じて外側が可変であることです。
つまりコンポーネントとして使いまわしていくときに非常に便利なわけです。

5.使ってみる

作ったボタンをコンポーネント化してたくさん並べてみましょう。

コンポーネント化するショートカット:⌘Command+⌥Option+K

画像10

そしてテキストを打ち替えてみると......

画像10

上下左右のパディングの値を保ってボタンが伸び縮みしましたね!!

以上、Auto Layoutを使ってつくるシンプルなボタンでした🐧

この記事が気に入ったらサポートをしてみませんか?