FD4B: 形状と塗りを使ってあなたのアバターを作成しましょう

レッスン概要

このレッスンでは、Figma Designの基本的なレイヤータイプについて学び、それらを使ってポートフォリオウェブサイトのランディングページ用のヒーローを構築します。ヒーローとは、通常はメッセージを伝えたり、アクションを促したりするために使われるウェブページの上部にある大きなセクションです。

形状に画像を塗り込んでアバターを作成し、次にテキストレイヤーを使用して私たちの名前と簡単な説明を追加し、ポートフォリオへ来た訪問者を歓迎します。アバター用に写真が必要なので、次に進む前にコンピュータに準備しておいてください。

アバターを作成する

形状レイヤーと画像の塗りを使用してアバターを作成します。デザインを始める前に、ファイルのエクスプロレーションズページにいることを確認してください。

キャンバスに楕円を追加する

Figma Designには6つの形状ツールがあります：長方形、線、矢印、楕円、多角形、星。アバターを円形にしたいので、楕円ツールを使用します。

1. ツールバーから楕円ツールを選択するか、キーボードでOを押してください。
2. キャンバスのどこかをクリックして楕円を配置します。右側のサイドバーがどのように変わり、今、私たちのために編集可能な プロパティを提供しているかに注目してください。
3. レイアウトセクションでは、楕円の寸法が100 X 100に設定されています。幅と高さのフィールドに90を入力して変更を適用するためにEnterを押してサイズを変更しましょう。

楕円の塗りを変更する

キャンバスに形状を追加する際、実際にはその形状のアウトライン、つまりベクターネットワークを追加しています。デフォルトでは、Figmaは形状のアウトラインをソリッドグレーで塗りつぶします。

右側のサイドバーの塗りセクションを使用してレイヤーの塗りを変更できます。塗りはソリッドカラー、グラデーション、パターン、画像、アニメーションGIFやビデオ(有料プランでのみ利用可)にできます。

レイヤーは複数の塗りを持つことができます。これにより、たとえば画像の上にグラデーションを配置するなど、レイヤーをカスタマイズできます。追加の塗りを追加するには、塗り セクションのプラスをクリックしてください。塗りをクリック&ドラッグして順序を変更したり、マイナスをクリックして削除できます。

アバターにプロフィール写真を入れたいので、楕円の塗りを画像に変更しましょう。

1. 楕円を選択します。
2. 塗りセクションでスウォッチをクリックしてカラーピッカーを開きます。
3. 画像を選択します。
4. コンピュータからアップロードをクリックします。
5. コンピューターから画像を選択します。
6. 開くをクリックします。

画像が楕円のデフォルトのグレーの塗りを置き換えます。画像設定を使用して、露出、コントラスト、温度などの属性を調整できます。

知識を確認しましょう