最初のボタンのデザイン
このプロジェクトでは、Figmaデザインのボタンを作成します。ボタンはユーザーインターフェースで作成する最も一般的な要素であり、このプロジェクトは、テキストツールとオートレイアウトを使用して実際に体験できるように設計されています。
手順に従えば、次のようなボタンを作成できます:
ボタンを作成するには、次の手順に従ってください。
テキストレイヤーの作成
テキストレイヤーを追加するにはテキストツールを使用します。それにはツールバーで テキストツールをクリックするか、Tを押します。
テキストツールをアクティブにしたままキャンバスをクリックし、「ボタン」と入力してテキストレイヤーを作成します。左サイドバーに「ボタン」という名前のテキストレイヤーが表示されます。テキストレイヤーの名前は、レイヤーパネルの名前を手動で変更するまではキャンバスに入力したものと同じです。レイヤー名を変更するには、左サイドバーでそのレイヤーをダブルクリックし、新しい名前を入力します。
ここで、テキストレイヤーのフォントサイズを大きくしましょう。テキストレイヤーを選択して、右サイドバーのテキストセクションに移動してフォントサイズを16に変更します。フォントはひとまずデフォルトにしておきますが、 いつでも変更できます。
テキストレイヤーをオートレイアウトのフレームに変換
今のところボタンの見栄えは良くありませんが、心配いりません。これからオートレイアウトを使って手を加えていきます。
オートレイアウトとはオートレイアウトはFigmaの最も強力な機能の1つです。オートレイアウトを使って、デバイスタイプ、オブジェクトの配置、コンテンツサイズなどの変更に自動的に適応するレスポンシブデザインを作成することができます。
このプロジェクトでは、オートレイアウトの機能のほんの一部を説明しています。詳細を知りたい場合は、オートレイアウト動画プレイリストをご覧ください。
オートレイアウトは既存のフレームに適用したり、レイヤーをフレームに変換する場合にも使用できます。後者を試してみましょう。テキストレイヤーを選択し、ショートカットShift Aを使用します。オートレイアウトが適用されると、いくつか変更点があることに気が付くでしょう。
- フレーム内にテキストレイヤーができました。オートレイアウトはフレームとコンポーネントにのみ適用できるため、Figmaが機能して新しいフレームにテキストレイヤーを配置しました。フレームに色を塗っていませんが、後でボタンをスタイルする際に色を適用します。
- フレームを選択すると、右サイドバーにオートレイアウト設定が表示されるようになりました。このプロジェクトではオートレイアウトのプロパティを変更しませんが、詳しく知りたい場合は「オートレイアウトのプロパティを調べる」記事をご覧ください。
- フレームは、テキストの変更に合わせて大きくも小さくもなります。このようなダイナミックエレメントは、さまざまなデバイスタイプに表示されるコンテンツをデザインする場合や、さまざまな言語に翻訳する場合に時間を節約します。現段階ではそれほど優れていることには思えないかもしれませんが、いくつかスタイリングを追加してオートレイアウトの威力を実感してみましょう。
ボタンのスタイル
それでは、ボタンをスタイルしましょう。
ますは色を追加してみましょう。フレームレイヤーを選択し、右サイドバーの[塗り]設定でをクリックします。カラーピッカーで色を変更します。ここでは、カラーコード#33b249を使用しています。
次に、テキストレイヤーを選択して、塗りを#FFFFFFに調整します。
角を丸くしてボタンを滑らかにできます。フレームをもう一度選択し、右サイドバーの設定で角の半径を6に変更します。
最後に、フレームのパディングを修正しましょう。テキストレイヤーをオートレイアウトのフレームに変換すると、フレームの境界と内側のテキストの間にパディングが自動的に追加されます。現時点ではすべての側面のパディングの値が同じです。上下のパディングの値を左右のパディングの値よりも小さくしたいと思います。変更してみましょう。
フレームを選択します。フレームの上にカーソルを合わせると、ピンクのハンドルが表示されてパディングを変更できます。フレームの各側面のパディングを個別に変更できます。ハンドルをクリックしドラッグしてパディングを変更するか、ハンドルを1回クリックして表示されるボックスに数値を入力することもできます。
いずれかの方法でパディングの値を次のように更新します。
- 上下のパディング: 8
- 左右のパディング: 16
ヒント: 次のショートカットを使用して、上下のパディングと左右のパディングを同時に変更できます。
- ⌥ OptionまたはAltを押さえながらパディング領域をクリックして、反対側のパディング値を入力します
- ⌥ OptionまたはAltを押しながらハンドルをドラッグして、反対側のパディングを変更します
ボタンの見栄えは良くなりましたが、ラベルを更新してみましょう。テキストをダブルクリックし、編集して「Sign up」と入力します。入力に合わせてボタンのサイズが変わるのが分かると思います。素晴らしいですね!
次のステップ
おめでとうございます。Figmaでテキストツールとオートレイアウトを使用してボタンを作成できました。別の課題に進みますか？インタラクティブなボタンのデザインのミニプロジェクトで、ハンズオン実習に挑戦してください。