FD4B: スキルリストを作成する

よくできました!これでカスタムシェイプとテキストレイヤーを組み合わせて、スキルリストを作成する準備が整いました。

スキルリストを構築する

1. キャンバスに新しいテキストレイヤーを追加し、短いプレースホルダーテキストを入力します。今のところはスキル名で問題ありません。
2. フォントはInterを使用しますが、他のフォントを選んでも構いません。
3. フォントのプロパティを変更します:
   • フォントウェイトをBoldやBlackのように、より重いものに設定します。
   • フォントサイズを48に設定します。
   • 行の高さを自動に設定します。
4. 左サイドバーのアセットタブからイモムシコンポーネントを見つけ、フレームにインスタンスを追加して、テキストレイヤーの垂直中央に揃えます。
5. 両方のレイヤーを選択して複製します。その後、新しいレイヤーを元のレイヤーの右側に移動します。

インスタンスを入れ替える

イモムシシェイプをダイヤモンド シェイプのインスタンスに置き換える必要があります。アセットタブからインスタンスを探して追加する代わりに、新しいインスタンスに入れ替えることもできます。

インスタンスを入れ換えるには:

1. 複製されたシェイプレイヤーを選択します。
2. 右側のサイドバーにあるインスタンスの入れ替えメニューを開きます。ここから、他のシェイプコンポーネントにアクセスでき、選択中のインスタンスと入れ替える形でデザインに直接追加できます。
3. インスタンスの入れ替えメニューからダイヤモンドコンポーネントを選択します。
4. Figmaはキャンバス上のシェイプレイヤーを自動的に新しいインスタンスで置き換えます。
5. テキストとシェイプレイヤーをもう一度複製し、次のシェイプでも同じ手順を繰り返します。
6. 1行目に3つのテキストとシェイプのセットが揃ったら、その下に2行目を作り、5つすべてのシェイプを使い終えるまで同じように配置していきます。

スキルリストにオートレイアウトを適用

ここで、再びオートレイアウトの出番です!

1. カーソルをクリックしてドラッグし、すべてのテキストとシェイプレイヤーを選択します。
2. Shift Aを押して、それらをオートレイアウトフレームに追加します。
3. このフレームの名前をコンテンツに変更します。
4. 最大幅を1000に設定します。
5. レイヤーがすでに複数の行に配置されていたため、Figmaは方向を折り返すに自動設定しました。
6. プレースホルダーテキストを、私たちの強みを示すスキルに更新してみましょう。その際、オートレイアウトがどのように反応するか確認してみてください。
7. 方向が折り返すに設定されたので、フレームには左右および上下の間隔プロパティが設定されています。両方の間隔を8に設定します。
8. パディングを0 (ゼロ)に設定します。
9. 配置を左揃えに設定します。

選択範囲の色を使って塗りを変更

シェイプをテキストと同じ色にしたいです。各シェイプの塗りを個別に変更する代わりに、右サイドバーの選択範囲の色セクションを使って、すべて一度に変更できます。名前が示すように、選択範囲の色は現在選択している要素で使用されているすべての単色またはグラデーションの塗りを表示します。

1. すべてのテキストとシェイプレイヤーを含むオートレイアウトフレームを選択します。
2. 選択範囲の色のグレーのカラースウォッチの隣のフィールドを使用して、塗りを#000000に変更します。

コンテナフレームを追加し、コンポーネントを作成

素晴らしいです! あとは、これまでの他のコンポーネントと同じように、この要素をコンテナフレームに追加するだけです。

1. コンテンツフレームの周りに新しいフレームを作成します。
2. ShiftAオートレイアウトを追加します。
3. フレームの名前をスキルセットに変更します。
4. フレームの塗りを削除します。
5. 以下のオートレイアウトプロパティを更新します:
   
   • 高さのサイズ変更をコンテンツを内包に設定
   • 配置を中央に設定
   • 水平パディングを24に設定
   • 垂直パディングを80に設定
6. スキルリストフレームをメインコンポーネントに変換します。
7. 新しいコンポーネントをコンポーネントページに移動します。

レッスンのまとめ

素晴らしいです!基本シェイプをブール演算で組み合わせたり、四角形のベクターパスを編集したり、楕円のアークプロパティを変更したりして、5つのカスタムシェイプを作成しました。次に、作成したシェイプをテキストレイヤーとオートレイアウトと組み合わせて、レスポンシブなスキルリスト要素を作成しました。最後に要素をメインコンポーネントに変換し、コンポーネントページに移動しました。

私たちの個別のポートフォリオ要素が完成しました!次のレッスンでは、これまでの努力が実を結び、すべての要素を組み合わせてポートフォリオデザインを作成します。