初めてのボタンデザイン

このプロジェクトでは、ラベルの長さに基づいてサイズが自動的に変更されるシンプルなボタンを設計します。ボタンはUIデザインでよく使われる要素です。このプロジェクトでは、[テキスト]ツールとオートレイアウトを実際に体験していただきます。

ボタンを作成するには、以下の手順に従ってください。

1. テキストレイヤーを追加する
2. テキストレイヤーをオートレイアウトのフレームに変換
3. ボタンのスタイル
4. ボタンをコンポーネントに変える

手順通りに操作していくと、最終的なボタンは以下のようになります。

テキストレイヤーを追加する

まず、テキストレイヤーを追加します。

1. ツールバーでテキストツールをクリックするか、Tキーボードショートカットを使用して、テキストツールを有効にします。
2. キャンバスをクリックし、「ボタン」と入力してテキストレイヤーを作成します。

左サイドバーの[レイヤー]パネルに、「ボタン」という名前の新しいテキストレイヤーが表示されます。レイヤーをダブルクリックし、名前をラベルに変更します。

ここで、テキストレイヤーのフォントサイズを大きくしてみましょう。テキストレイヤーを選択した状態で、右サイドバーの[テキスト]セクションの設定を使用して、フォントサイズを16に変更します。ここではデフォルトのInterフォントを使用しますが、別のフォントスタイルを自由に選択してください。

テキストレイヤーをオートレイアウトのフレームに変換する

今のところボタンの見栄えは良くありませんが、これからオートレイアウトを使って手を加えていきます。

既存のフレームに自動レイアウトを適用したり、オートレイアウトを使用してレイヤーをフレームに変換したりできます。ここではレイヤーをフレームに変換します。[ラベル]レイヤーを選択し、ショートカットShift Aを使用します。

右サイドバーの[オートレイアウト]セクションで、[水平方向のサイズ調整]と[垂直方向のサイズ変更]の設定が両方とも[内包]に設定されていることを確認します。左サイドバーにある新しいフレームをダブルクリックし、名前をボタンに変更します。

ボタンのスタイル

色を追加する

1. [ボタン]レイヤーを選択し、右サイドバーの[塗り]セクションにあるプラス記号をクリックして塗りつぶしの色を追加します。
2. 色選択機能を使用して色を変更します。ここではカラーコード#33B249を使用します。
3. フレームレイヤーの内側にネストされている[ラベル]レイヤーを選択し、塗りを#FFFFFFに調整します。

角を丸くする

1. [ボタン]レイヤーを選択します。
2. 右のサイドバーで、 角の半径を6に設定します。

パディングを固定する

最後に、フレームのパディングを固定しましょう。テキストレイヤーをオートレイアウトのフレームに変換すると、フレームの境界と内側のテキストの間にパディングが自動的に追加されます。現時点ではすべての側面のパディングの値が同じです。上下のパディングの値を左右のパディングの値よりも小さくしたいと思います。

1. [ボタン]レイヤーを選択します。
2. 選択したフレームにカーソルを合わせます。表示されるハンドルを使用すると、パディングを変更できます。ハンドルをクリックし、ドラッグしてパディングを変更するか、ハンドルを1回クリックして表示されるボックスに数値を入力することもできます。
3. いずれかの方法でパディングの値を次のように更新します。
   • 上下のパディング: 8
   • 左右のパディング: 16

ボタンをコンポーネントに変える

ボタンのデザインが完成しました! 今後のデザインで再利用できるよう、プロジェクトを終了する前にコンポーネントに変換しましょう。

1. [ボタン]レイヤーを選択します。
2. 右サイドバーの[コンポーネントを作成]をクリックします。

左のサイドバーの[アセット]タブからボタンのインスタンスを追加できるようになるので、また最初からボタンをデザインする必要はありません。コンポーネントの使用方法の詳細についてはこちら →

次のステップ

おめでとうございます。Figma Designでオートレイアウトを使用したレスポンシブボタンを設計しました。次の課題に進みますか？インタラクティブボタンのデザインプロジェクトで、ハンズオン実習に挑戦してください。