【Figma】オートレイアウトを使ったシンプルなボタンの作り方

挨拶と本日の内容

こんにちは。可茂IT塾のともやです。

今回は、Figmaでオートレイアウトを使ったシンプルなボタンを作る方法を紹介します。

テキスト入力

まずはボタンに表示したい文字を入力します。例えば「送信」「OK」など。

フォントサイズ：14〜16px（一般的なUIでの本文やボタン標準サイズ）

オートレイアウトを適用

テキストを選択した状態で Shift + A を押すと、オートレイアウトが適用されます。 または、右クリックで「オートレイアウトを追加」でも適用されます。 これでボタンの枠が自動的にテキストサイズに合わせて変化するようになります。

上下左右のパディングは、使用用途によって変わるので調整してみてください。

ボタンの背景と角丸を設定

オートレイアウトのフレームに背景色をつけて、必要に応じて角丸を設定します。 ブランドカラーやデザインガイドラインに合わせて調整しましょう。

まとめ

Figmaでのボタン作成方法は多くありますが、こちらが一番シンプルでコンポーネントした時にも最適な作り方です。

ぜひFigmaでボタンを作る際は参考にしてみてください。