Agile育成ブログ
未来を変える喜びを
未分類

Adobe XD


Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

Webサイトやアプリケーションのデザインはもちろん、ワイヤーフレーム制作や企画段階の資料など幅広い用途で使用されています。

XDには無料で使用できるスタータープラン、XDのみの有料プラン、Adobe Creative Cloudのすべてのソフトが使用できるコンプリートプランが用意されています。

ワイヤーフレームの複製

Ctrl+D

illustratorからベクターデータを読み込む

トップページの作成

背景画像をぼかす

ヘッダーの編集

長方形を使ってヘッダーやフッターを作成します。

リピートグリッドを使う

ラインパーツを作成した時に繰り返して使いたいときにリピートグリッドが便利です。
ハンドルを縦横方向に移動させるとオブジェクトが繰り返し表示されます。

メニューページの作成

ハンバーガーアイコンを押したときに表示されるメニューページを作成します。

メニューページをトップページの上に重なるようにするにはオーバーレイにします。

コンポーネントについて理解する

コンポーネントとは
Webページの中で繰り返し使用する要素をコンポーネントすることで効率よくデザインを制作することができます。
コンポーネントに登録したオブジェクトはマスターコンポーネントになります。マスターコンポーネントには左上隅に緑色に塗りつぶされたひし形の目印がつきます。

種類左上のマーク親子関係マスターコンポーネントに変更を加えたとき
マスターコンポーネント🔶
インスタンス

マスターコンポーネントを編集するとマスターコンポーネントのコピー(インスタンス)も自動的に変更されます。インスタンスは正確なコピーなのでオリジナルと同じプロパティを持っています。

マスターコンポーネントのワイヤーフレームを作成しコンポーネントを作成。
他のワイヤーフレームにインスタンスを作成

リンク設定

プロトタイプの共有

プロトタイプを共有するためのリンクを作成します。

デスクトップ版デザインカンプ

スマホ版ページの内容をコピーする

ロゴの作成

You cannot copy content of this page