自己紹介を書く
アバターが完成したので、テキストレイヤーを使って挨拶とプロフィールを作成します。
テキストはデザインの重要な要素であり、情報を伝えたり行動を促したりするために使用できます。デザイン内のテキストのスタイリング方法は、視覚的な階層をサポートしたり、適切なトーンを伝えたり、デザインのアクセシビリティを左右したりするのに役立ちます。
テキストツールを使用して、キャンバスにテキストレイヤーを追加します。
テキストレイヤーを追加
- ツールバーでテキストツールを選択するか、Tを押します。
- アバターの下のキャンバスをクリックして名前を入力してください。左のサイドバーを見てみると、レイヤー名がキャンバス上の文字列を反映していることに気付くでしょう。これは、レイヤーの名前を変更するまで続きます。
- テキスト ツールが選択されたままにして、カーソルをドラッグして他のレイヤーの下にテキストボックスを作成します。テキストボックスがコンテンツに十分な大きさであることを確認してください。正確なサイズは気にしなくて大丈夫です。詳細は後のレッスンで調整します。
テキストを入力すると、テキストコンテンツがテキストボックス内に収まり、側面に流れ出ずに次の行に自動的に折り返されることがわかります。なぜこれは他のテキストレイヤーと違うのでしょうか?
テキストのサイズ変更
テキストレイヤーには、コンテンツが変更されたときにレイヤーの寸法がどのように反応するかを決定するリサイズプロパティがあります。テキストのリサイズオプションは3つあります:
- 自動幅: テキストレイヤーの幅は、内容が変更されるとその内容に応じて伸縮します。
- 自動高さ: テキストレイヤーの高さは内容の変化に応じて増減します。
- 固定サイズ: テキストレイヤーの幅と高さは、内容にかかわらず同じに保たれます。Figmaは、レイヤーの水平境界を超えないように追加のテキストを折り返します。
テキストのリサイズプロパティは、テキストレイヤーの作成方法に基づいて自動的に設定されますが、右のサイドバーの レイアウト セクションでいつでも設定を更新できます。テキストのサイズ変更の詳細はこちらをご覧ください。
レイヤーの整列
レイヤーが少し不揃いに見える場合は、右サイドバーの整列セクションを使って整列できます。
- キャンバスの空白の部分をクリックして、すべてのレイヤーを選択解除します。
- カーソルをドラッグしてアバターと2つのテキストレイヤーを選択します。
- 左に整列をクリックして、レイヤーの左端を整列させます。
テキストレイヤーのスタイリング
デフォルトのテキストスタイルは少し小さく、読みづらいです。テキストプロパティを使用して、視覚的な階層を作成し、いくつかの重要な領域に注意を引くのを助けることができます。
注:このコースではFigmaのデフォルトフォントファミリーであるInterを使用します。使用可能なフォントを自由に閲覧して他のものを選択してもかまいませんが、選択するフォントファミリーは、私たちが使用するのと同じウェイトオプションを用意していないかもしれないことを覚えておいてください。
- テキストレイヤーを選択し、右サイドバーのタイポグラフィセクションを見てみましょう。
- このテキストレイヤーに重みを追加するには、フォントウェイトを
Blackのようなより太いスタイルに変更します。 - フォントサイズを
40に変更します。
ヒント: レイヤーが重なり始めた場合、ナッジオプションを使用して迅速に再配置することができます。
Figmaには2種類のナッジがあります。
- スモールナッジは矢印キーを使用してレイヤーを再配置し、デフォルトで1の増分でレイヤーを移動します。
-
ビッグナッジは、矢印キーとともに
Shiftを使用し、デフォルトで10単位でレイヤーを移動します。
設定メニューからナッジ値を変更できます。ナッジ設定について詳しく学びます。
次は自己紹介テキストレイヤーを更新します:
- あなたのプロフィールを含むテキストレイヤーを選択します。
- フォントのウェイトを
Mediumに、サイズを28に更新します。 - テキストのリサイズを自動高さに変更して、コンテンツが境界ボックスの下端からはみ出さないようにします。
- コンテンツに息をする余裕を持たせるために、行の高さを
38、段落間隔を16に設定します。 - また、キャリアのハイライトや他の成果に注目を集めるために、太字やイタリック体などのテキストフォーマットを使用することもできます。