第3章　Figmaの基本操作（基本的なプロトタイプの作成）

第2節　デザインモードでの作業

この項では、オブジェクトの操作方法を学習します。

第4項　繰り返し要素の作成 ①

この項の学習目標

• 複製を使用して繰り返し要素を作成する。

複製とは

複製は、Figmaの代表的な機能のひとつです。
Webサイト上ではメニューや目次など、同じ要素が繰り返し表示されることがよくあります。
複製はデザインしたパターンの繰り返し要素が作成できる機能です。
FigmaでWebデザインを行う際には頻繁に行う操作なのでぜひマスターしましょう。

フレームを着色する

前回作成したファイル「Prototype_01.fig」を使用します。
※途中ファイルがない場合は素材フォルダ [Figma03] - [complete] の中にあるファイル「Prototype_01_c.fig」で進めます。

（１）作業しやすいようにフレーム [Menu] をズームして拡大しましょう。

（２）フレーム [Menu] 上の任意の位置でクリックし、[デザインタブ] - [塗り] をクリックします。
カラーコードを「DAE9E4」と入力し、【Enterキー】を押します。

フレーム [Menu] 全体がライトグリーンで着色されました。

見出しを作成する

（１）[Menu] ページの見出しを作成します。
[テキスト] ツールで「Menu」と入力します。

（２）入力したテキストに対し、[デザインタブ] で以下を設定します。
[フォント]：「Noto Sans」
[文字太さ]：Regularを「Bold」に変更
[サイズ]：「32」
「水平方向の中央揃え」（文字のサイズを変更してから上部のアイコンをクリックして設定します）
[Y]：「42」
制約：「中央」
「テキストの中央揃え」
[Menu] ページの見出しができました。

（３）スタイル登録する。
設定した見出しをスタイルとして登録します。テキスト右側の[：：]アイコンをクリックしたあと、＋をクリックして出てくるダイアログボックスで、［名前］：「Header-1」、［説明］：「見出し１」と入力してスタイルの作成をクリックします。

メニューの項目を作成する

（１）メニューの画像が入る枠を作成します。
[楕円形] ツールでフレーム [Menu] の上でドラッグし、任意の大きさの楕円を作成します。

（２）楕円形が選択された状態で [デザインタブ] で以下を設定します。
[X]：「42」、 [Y]：「113」
[W]：「112」、[H]：「112」、
縦横比を固定

楕円形が正円になり、左上に移動します。

（３）[テキスト] ツールで「季節の特集」と入力し、[デザインタブ] で以下を設定します。
※さきほど設定したスタイルが適用されていて編集できない場合は「スタイルを解除」アイコンをクリックしてから設定します。
[フォント]：「Noto Sans」、 [サイズ]：「30」、 [フォントウェイト]：「Bold」
[文字揃え]：「左揃え」、 [X]：「180」、 [Y]：「145」

正円とテキストが並んで配置されました。

（４）正円とテキストをグループ化します。
[選択] ツールで「正円」と「テキスト」をドラッグで囲みます。

（５）メインメニューからオブジェクトを選択し、表示されたメニューから [選択範囲のグループ化] をクリックします。
または、ショートカットキー【Ctrl＋Gキー】でもグループ化できます。 ※Macは〔Command＋Gキー〕

2つの要素がグループ化されました。2つのオブジェクトは同時に選択することが可能です。

繰り返し要素の作成

（１）グループ化された要素を選択した状態で 【Shift】キーと【Altキー】を押しながら下方向にドラッグします。

円と文字のグループが複製されました。

（２）再度、グループを選択した状態で 【Shift】キーと【Altキー】を押しながら下方向にドラッグします。間隔はのちほど揃えるので任意の間隔にしておきます。

グループ化したオブジェクトが5つ表示されるよう繰り返し複製します。次の項目で間隔を揃えるので、ここでは等間隔でなくてもかまいません。

（３）複製した５つのグループをすべて選択し、マウスカーソルを選択しているオブジェクトに重ねると、右下に均等配置アイコンが表示されるので、表示されたアイコンをクリックします。

グループとグループの間隔が均等になります。

（４）グループ化したオブジェクト間のスペースにカーソルを置くとピンク色の　○　と　ー　が表示されます。
○とーのうち、ー　を上下にドラッグするとグループとグループの間の余白を直観的に調整することができます。
（○をドラッグすると、要素同士を入れ替えることができます）

おおまかな調整を行ったら、[デザインタブ] で、余白を「50」に微調整します。

余白を調整すると、標準ではフレームからはみ出たオブジェクトは表示されなくなります。今回は、はみ出たオブジェクトもスクロールさせて見せたいので、Menuフレームを選択して、[プロトタイプタブ] から、［オーバーフロースクロール］を［縦スクロール］に変更してから [プレゼンテーションを実行] をクリックして確認します。

画面が上下にスクロール可能になり、隠れていた部分が表示されることを確認します。余裕がある方は、オーバーフロースクロールを［スクロールなし］にした場合にどうなるかも確認しておきましょう。

（５）確認できたらプレビューはブラウザの閉じるボタン [×] で閉じます。

オートレイアウト

ここまでで複製機能を利用を利用してオブジェクトを並べましたが、Figmaにはオートレイアウトという機能があります。

（１）複製したグループをすべて選択して、［デザインタブ］のオートレイアウトの右側の[＋]アイコンをクリックします。（ショートカットは　【Shift + A】）

（２）レイヤーパネル上で、選択していたグループが新しいフレームに格納されていることと、デザインタブでオートレイアウトの設定項目が表示されることを確認します。レイヤーパネルのフレーム左側の記号をクリックし、フレームを開閉してグループが格納されていることを確認してみましょう。オートレイアウトの各項目も値を変更してみましょう。
オートレイアウトの各項目は値を変更したら元の状態に戻しておきます。

（３）レイヤーパネルでフレーム内のグループを１つだけ選択した状態で 【Ctrl + D】 を押すことで、オートレイアウトにした項目を等間隔で増やすことができます。（フレームからはみ出た部分は非表示になりますが、スクロールすることで表示できます。プレビューして確認しましょう。）
増やした項目については、レイヤーパネルでグループを選択した後、Delキーで削除して5個に戻しておきます。

（４）各項目を戻したら、レイヤーパネルでFrame2の名前をダブルクリックして、ul#menu_listに変更します。
ここまでの操作で下記のとおりの状態になっていることを確認します。Menuフレームの中に、オートレイアウトを適用したul#menu_listがあり、その中にGroup1～5が入っています。

この項のまとめ

オブジェクトの複製

• 複製機能で繰り返し要素を作成することができる。

以上でこの項の学習は終了です。
次の項へ進んでください。