カスタムプロフィールカードを作成する
プロジェクトの概要
- 製品: Figmaデザイン
- トピック: フレーム、シェイプ、テキスト、画像の追加とスタイルの設定
- 所要時間: 20分
このプロジェクトでは、カスタムプロフィールカードを作成します。自分で使うために作成することも、チーム全員が自己紹介に使うテンプレートを作成することもできます。
Figmaデザインファイルを作成するには、ファイルブラウザの[ドラフト]をクリックし、次に[デザインファイルを新規作成]をクリックします。また、ウェブブラウザでfigma.newと入力して、直接新しいファイルを作成することもできます。
フレーム、シェイプ、テキストでレイアウトを作成する
まず、以下を含むすべてのオブジェクトをキャンバスに追加しましょう。
- デザインを含めるフレーム
- 背景の色や画像として使用する長方形
- アバターとして使用する楕円
- 自分の名前と情報を入力するためのテキストレイヤー2つ
シェイプは、キャンバスのどこに追加しても大丈夫です。これからデザインパネルを使用してオブジェクトを変更し、見た目を整えていきます。
フレームを追加する
フレームとは
フレームは、Figmaの主要なビルディングブロックです。フレームは、シェイプ、テキスト、画像などのデザイン要素を保持するコンテナです。フレームを使って、キャンバス上のデザイン要素を整理し、構造化することができます。
フレームは、サイズが自在で、任意の数のデザイン要素を含むことができます。また、フレームを別のフレーム内にネストして、複数階層からなる複雑なデザインを作成することもできます。
まず、フレームを作成してオブジェクトを追加してみましょう。
- ツールバーの フレームツールをクリックします。
- キャンバスをクリックして、100 x 100のフレームを作成します。フレームを作成すると、左サイドバーのレイヤーパネルに追加されます。
- 右サイドバーの[デザイン]パネルで幅を390に、高さを750に変更します。
ヒント: 手のひらツールを使用すると、オブジェクトを選択したり移動したりさせることなく、ファイルをパンすることができます。また、キーボードの を押すとズームイン、 を押すとズームアウトできます。
長方形と楕円を追加する
次に、フレーム内に1つの長方形と1つの楕円を追加しましょう。
- 長方形を追加する: [長方形]ツールを選択し、フレーム内をクリックします
- 楕円を追加する: [楕円]ツールを選択し、フレーム内をクリックします
寸法は大体でかまいません。後で調整できます。
テキストを追加する
- ツールバーの テキストツールをクリックします。
- フレーム内をクリックしてテキストレイヤーを作成します。
- 自分の名前を入力し、入力し終えたらキャンバス上の任意の場所をクリックします。
- 2番目のテキストレイヤーを作成して説明を入力します。
ヒント: ここまで来たら、オブジェクトがフレーム内に収まっているか再確認します。次のスクリーンショットの[レイヤー]パネルをご覧ください。
長方形、楕円とテキストは、フレームの下にネストされているはずです。ネストされていない場合は、キャンバス上の各オブジェクトを選択してフレーム内にドラッグする必要があります。
デザインパネルを使用してオブジェクトを変更する
キャンバス上のオブジェクトにはそれぞれ、位置と外観を決定するプロパティがあります。オブジェクトをクリックして選択すると、右サイドバーの[デザイン]パネルにそのオブジェクトの情報が表示されます。このセクションでは、オブジェクトのプロパティを変更して全体的なデザインを整えます。
カードの見栄えのする背景を作成する
- 長方形をフレームの左上隅にドラッグします。赤い線は、Figmaが長方形をフレームに揃えようとしていることを意味します。
- [デザイン]パネルで幅を390に、高さを200に設定します。
ヒント: オブジェクトのサイズは、選択してから角をドラッグして、手動で変更することができます。オブジェクトをサイズ変更したり移動したりすると、キャンバスに赤いガイドが表示されます。これは、シェイプをキャンバス上の他のオブジェクトと揃える際の目安になります。
次に、長方形に色を付けます。
- 長方形を選択し、[塗り]の下で色値をクリックします。
- カラーピッカーを使って色を試します。この例では、#FF567Fを使用しています。
円形アバターに自分の顔を追加する
サイズと位置を調整する
- 高さを185に、幅を185に設定します。
- 円をドラッグして、半分が長方形の上に重なり、水平方向でフレームの中央になるように配置します。
線を追加する
- 円を選択して、[線]の横の プラスアイコンをクリックします。
- 線の色を白、つまり#FFFFFFに変更します。
- 線の位置を外側に設定します。
- 線の幅を8に変更します。
画像の塗りを追加する
- 円を選択し、[塗り]の下で色値をクリックします。
- [単色]をクリックして、塗りのタイプを[画像]に変更します。
- オーバーレイの黒と白の市松模様にカーソルを合わせ、[画像を選択]をクリックします。
テキストの体裁を整える
名前を見出しにする
- 名前を入力したテキストレイヤーを選択します。
- テキストボックスの1辺をクリックしてドラッグし、手動でサイズを変更すると、幅と高さのプロパティに入力できるようになります。幅を320に設定します。
- [水平方向の中央揃え]をクリックします。
- [テキスト]の下で、テキストを [中央]に揃えます。
- フォントサイズを32に変更します。
- フォントの太さを[レギュラー]から[太字]に変更します。
- テキストレイヤーをアバターの下にドラッグします。
説明の幅と配置を調整する
- 説明を入力したテキストレイヤーを選択します。
- テキストボックスの1辺をクリックしてドラッグし、手動でサイズを変更すると、幅と高さのプロパティに入力できるようになります。幅を320に設定します。
- [水平方向の中央揃え]をクリックします。
- フォントサイズを16に変更します。
- テキストレイヤーを名前の下にドラッグします。
カードの角を丸くする
最後の仕上げとして、フレームを選択し、 [角の半径]を24に設定します。
おめでとうございます、完成です!🎉
出来上がった作品にアレンジを加えたければ、以下をお試しください。
- 長方形に画像の塗りを追加し、アバターの背景を見栄えよくする
- カードを他のユーザーも使えるコンポーネントに変える