オートレイアウトについてさらに理解したので、それを使ってボタンを作成しましょう。
テキストレイヤーの作成
ボタンのラベルとして機能する新しいテキストレイヤーを追加することから始めます。
- テキストツールを有効にします。
- キャンバスをクリックして
ボタンと入力します。 - フォントファミリーをInterに設定したままにするか、お好きなフォントを選択してください。
-
タイポグラフィセクションを使用して、次のように変更します:
-
フォントの太さを
セミボールドに設定します。 -
フォントサイズを
18に設定します。 - 行の高さを自動に設定します。
- 配置を中央に設定します。
-
フォントの太さを
オートレイアウトを追加
さて、オートレイアウトを適用する準備が整いました。
- テキストレイヤーを選択します。
- Shift Aを押します。Figmaは、テキストレイヤーの周りに、オートレイアウトが適用された新しいフレームを自動的に作成します。
- フレーム名をダブルクリックして、ボタンに名前を変更します。
ボタンのスタイル
オートレイアウトのプロパティを調整する前に、まずボタンをスタイリングしましょう:
- ボタンフレーム内のテキストレイヤーを選択します。
-
塗りセクションのカラースウォッチの横のフィールドに
Fと入力し、Enterを押します。Figmaは私たちが入力したFを取り、ヘックスコードを#FFFFFFとして設定し、塗りを純白にします。 - ボタンフレームを選択します。
- プラスをクリックして、塗りセクションに塗りを追加します。
- フィールドに
0(ゼロ)を入力し、Enterを押します。前と同じように、Figmaは入力したゼロを取り、フィールドの残りの部分をゼロで埋め、塗りを黒にします。 - 右サイドバーの外観セクションで角の半径を
8に変更します。
ヒント: ボタンデザインのベストプラクティスについてさらに学びたいですか?最初のボタンをデザインするプロジェクトをご覧ください。
オートレイアウトのプロパティを調整する
ボタンフレームを選択すると、右サイドバーのセクションがオートレイアウトに変更され、追加のプロパティが含まれていることに気付くかもしれません。寸法フィールドも変更され、現在はリサイズフィールドになっています。
フレームに固定の幅と高さを設定できるだけでなく、親フレームをコンテンツを内包するオプションも追加されました。これにより、ボタンラベルの長さに応じて自動でサイズが変わります。このボタン要素を異なる文脈で再び使用するので、リサイズプロパティは最大の柔軟性のためにコンテンツを内包のままにしておきます。これにより、ボタンのラベルを変更したり、別の言語に翻訳したりする場合、手動でリサイズする必要がなくなります。
テストしてみましょう!ボタンラベルを「続ける」または「次へ」に変更するとどうなるか見てみましょう。
他のオートレイアウトプロパティを調整してボタンの見た目をカスタマイズします:
-
オブジェクト間の水平ギャップを
10に設定します。 -
水平パディングを
16、垂直パディングを10に設定します。
オートレイアウトを追加するとFigmaがなぜパディングを10に設定するのか不思議に思うかもしれません。Figmaは私たちの大きな調整の好みを自動的に使用し、それが10に設定されています。もしテキストレイヤーの周りに既存のフレームがあり、その後オートレイアウトを適用した場合、Figmaはテキストレイヤーとフレーム間の距離を維持します。調整の設定について詳しくはこちらをご覧ください。
ボタンをメインコンポーネントに変える
最終デザインに複数のボタンが含まれるため、このボタンをメインコンポーネントに変えます。
- ボタンフレームを選択します。
- 右サイドバーの[コンポーネントを作成]をクリックします。
ボタンが紫色の境界ボックス内に配置され、レイヤーセクション 内のアイコンが四つのダイヤモンドアイコンに変わったことに気づくでしょう。これはレイヤーがメインコンポーネントであることを示しています。次の章では、コンポーネントについてもっと学び、デザインのワークフローをより速くするためにどのように利用できるかを学びます。