ヒーローの基本要素ができたので、それらを一緒に保つ方法が必要です。それらをフレームに追加しましょう。
レイヤーをフレームに追加
フレームは、Figmaの中核的な構成要素です。フレームは他のレイヤーのコンテナとして機能し、それらを一貫したデザインに整理することができます。フレームを使ってアイコンやボタンのような個別のアセットを作成することができます。また、デザインのさまざまなセグメント—ナビゲーションバー、画面、ウェブサイトやモバイルアプリのデザインのレイアウトなどを作成することができます。
レイヤーをフレームに追加する方法:
- ツールバーでフレームツールを選択するか、Fを押します。
- 全てのレイヤーの周りをクリックしてドラッグします。
- 左サイドバーのレイヤーセクションをダブルチェックして、すべての要素がフレーム内にネストされていることを確認します。もしそうであれば、要素はフレームの直下にインデントされ、キャンバス上で可視性アイコンをクリックすると非表示になります。フレームにない場合は、レイヤーをクリックしてフレームにドラッグすることができます。
- ヒーローを簡単に見つけるために、レイヤーセクションでフレームをダブルクリックし、
ランディングページヒーローに名前を変更します。
とりあえずランディングページヒーローフレームを脇に置きましょう。ポートフォリオのためにいくつかの要素を作成した後、後のレッスンで戻ってきます。
レッスンのまとめ
よくできました!基本的なレイヤー(シェイプ、テキスト、フレーム)を作成して、ポートフォリオウェブサイトの最初の要素を構築しました。Figma Designのジャーニーを通して、これらのレイヤーを何度も使用するでしょう。
シェイプに画像を塗りとして追加し、キータイポグラフィのプロパティを使用してビジュアル階層を作成することによって、いくつかの基本的なプロパティを適用する方法を学びました。最後に、すべてを整理するために名前が付けられたフレームにレイヤーを配置しました。
冒険心があるなら、作成したもののコピーを作成し、さまざまなレイヤープロパティで遊んでみてください。デザインは探索的なプロセスであり、リスクを取るのに最適な時期です。カラフルな背景を試してみたり、異なるフォントファミリーを試したりして、好きなものを見つけてください!