今回はFigmaの基礎編を解説します。
デザインファイルまでの作成は前回紹介しましたので参考にしてください。
関連記事: Figmaの使い方〜準備編〜 / Figmaの使い方〜基礎編１〜
本記事の完成デザインは下画像になります。
枠線の設定
前回はヘッダーとフッターを作成しました。
今回は最初にコンテンツ内のカードを作っていきます。
以下のgifは、フレームを作成後から始まっています。
Point
- 枠線を設定したい要素を選択
- 右ナビゲーション内のStrokeという項目を見つける
- Stroke項目の右に＋アイコンがあるのでクリック
- カラーコードが下に表示されるのでクリック
- カラーピッカー or カラーピッカー下の色履歴で任意の色を選択
- カラーコード下に表示されるので、三本線横の数字で線の太さを設定
これで枠線の設定ができました。
様々な要素の作成
カードの枠ができましたので中身を作成します。
下gifのようにタイトルテキストとコンテンツテキストを作っておきます。
次にコンテンツ下部に枠線とアバターアイコンを要素パーツを使用して設定します。
Point: 直線の作成
- ヘッダーの四角アイコン横の∨をクリック
- 下にいくつか項目が出てくるのでLineをクリック
- 作成したい場所までマウスを持っていく
- ドラッグアンドドロップで範囲指定
Point: 円の作成
- ヘッダーの四角アイコン横の∨をクリック
- 下にいくつか項目が出てくるのでEllipseをクリック
- 作成したい場所までマウスを持っていく
- ドラッグアンドドロップで範囲指定
- 中央や端まで移動すると補正が効きます
- Shit + 移動でx軸とy軸を固定できます
これでコンテンツ下部に枠線とアバターアイコンができました。
グループ化
カードフレームの要素が多くなってきたので一つにまとめていきます。
Point
- グループ化したい要素を選択（複数）
- 右クリックでメニューを表示
- メニュー内のGroup selectionを選択
- 左ナビゲーション内でShit + 選択したい範囲をクリックすると範囲選択
- 要素を選択した状態で Ctrl + Gでグループ化
これで要素を一つにまとめられました。
丸みの変更
カード内の要素として最後にアバターアイコン横にボタンを作成します
アバターアイコン横にフレームを作成して背景色を付けました。
ボタンフレーム丸みを付けたいのでボタンを丸くします。
Point
- 丸みを付けたい要素を選択
- 右ナビゲーション内のFrameという項目を見つける
- Frame項目の赤枠内の数字をクリック
- 数値の変更をして指定したい値まで変更
- 方向キー↑↓で1ピクセル変更可
これでカード内の要素を全て作成し終わりました。
コンポーネントの作成
カードは通常、複数存在するので複製していきます。
しかし前回行ったコピペによる複製ではなく、より強化された複製コンポーネント機能を使用します。
Point
- コンポーネント化したい要素を選択
- 右クリックでメニューを表示
- メニュー内のCreate componentを選択
- 要素を選択した状態でCtrl + Alt + Kでコンポーネント化
コンポーネント化はgifの通り色々な機能があります。
- マスターコンポーネントを調整すると子コンポーネントに反映
- 子コンポーネント内要素の調整（マスターコンポーネントには反映されない）
- 要素の表示、非表示切り替え機能
- 要素のテキスト変更機能
再利用しそうなフレームは積極的にコンポーネント化して、以後のデザイン調整を楽にするのがFigmaの最大メリットのひとつです。
オートレイアウトの作成
間違えてボタン内のテキストを間違えてしましました。
そこでオートレイアウト機能を使用してボタン内できすとを変更していきます。
Point: オートレイアウト化
- オートレイアウト化したい要素を選択
- 右クリックでメニューを表示
- メニュー内のAdd auto layoutを選択
- 要素を選択した状態でShift + Aでコンポーネント化
通常変更テキストが長くなると要素外に飛び出してしまうのですが オートレイアウト機能を使用するとgifの通り、上下左右の余白を保ってくれます。
フレーム内の要素の幅、高さが可変する時はオートレイアウト機能を使用します。
先程のオートレイアウトだとボタンが右に長くなっていき、右側の余白が小さくなってしまいます。
もうひと手間いれて右側の余白を維持したまま可変対応します。
Point: 始点の変更
- 始点の変更したい要素を選択
- 右ナビゲーション内のConstraintsという項目を見つける
- 四角図内になる青線を選択して、始点の変更
これでボタンオートレイアウトの始点を右下に変更し、右側の余白を維持したまま可変対応できました。
四角図の右にleftなど書かれている文字からも始点変更できます。
オートレイアウト機能にはもう一つ有効な機能があります。
その機能を利用して今度はカード周りの余白の大きさ、カード間の余白の大きさを調整します。
Point: オートレイアウトの調整
- オートレイアウト化したい複数要素を選択
- オートレイアウト化
- 右ナビゲーション内のAuto layoutいう項目を見つける
- Auto layout項目内の一番右の四角をクリック
- 要素の上下左右の余白ピクセルがでるので調整
- 三本線のアイコンをクリック
- オートレイアウト化した要素間の広さを調整
右ナビゲーション内のAuto layoutは余白の調整ができます。
同一の要素が複数表示される時はオートレイアウト機能を使い、要素外の余白＆要素間の余白が楽に調整できるので積極的に使用します。
完成
以上今回はFigmaの基礎編２を解説しました。
次回はFigmaをもっと管理しやすくする機能を解説します。
関連記事: Figmaの使い方〜基礎編３〜