AdobeXD ワイヤーフレームの作成②

2022年8月25日

< 前回の内容 >



④メニューバーの作成

メイン画像下の6つのメニューバーを作成していきます



1.  長方形ツールとテキストツールを使用し、オブジェクトを作成します



2. リピートグリッド機能を使用し、オブジェクトを繰り返し配置します

【 Point 】リピートグリッド機能→同じデザインを何度でも繰り返し配置することができるとても便利な機能です


2-1. テキストと長方形の両方を選択した状態で、右側パネルにあるリピートグリッドボタンを選択します

<ショートカット> 
リピートグリッド → Ctrl または Command + R


2-3. ハンドルをドラッグして繰り返し配置します



3. オブジェクト間のスペースにカーソルを合わせてドラッグしながら間隔を調整します


4. テキストを選択・ダブルクリックで文字を打ち換えます


5. リピートグリッドを解除します

【Point】リピートグリッドを解除するとそれぞれを独立したオブジェクトとして扱うことができます

<ショートカット>
リピートグリッドの解除 → Shift + Ctrl または Command + G


6. テキストがオブジェクトの中央にくるように整列します


メニューバー部分が完成しました

<NEXT → ワイヤーフレームの作成③ 背景の作成とロック・タイル状の画像配置