リピートグリッドで遊ぼう

Adobe XD Meeting #03

ネットパイロティング株式会社 

UIデザイナー

湯口りさ

自己紹介

フロントエンド→UI屋さんに

Fireworks＋Flash→Adobe XD ＋ IntellJ IDEA

Twitter: @risay

Adobe XD Advent Calendar 主催

Twitter @risay アカウントにて 

(期間:2016/3/15～12/15)

AdobeXDについて 

ツイート

AdobeXDについて 

話した日

615ツイート

177日

Windows版がでたので…

Windows版がでたので…

HololensでAdobeXD(リモートデスクトップ)しました

リピートグリッドをグループ化すると操作性が変わる

2016/07/121

★★★★★

ssss 2015/08/022

★★★★★

ssss 2015/07/243

★★★★★

ssss 

2016/07/124

★★★★★

ssss 2015/08/025

★★★★★

ssss 2015/07/246

★★★★★

ssss 

2016/07/127

★★★★★

ssss 2015/08/028

★★★★★

ssss 2015/07/249

★★★★★

ssss 

2016/07/1210

★★★★★

ssss 2015/08/021

★★★★★

ssss 2015/07/242

★★★★★

ssss 

2016/07/121

★★★★★

ssss 2015/08/022

★★★★★

ssss 2015/07/243

★★★★★

ssss 

2016/07/124

★★★★★

ssss 2015/08/025

★★★★★

ssss 2015/07/246

★★★★★

ssss 

2016/07/127

★★★★★

ssss 2015/08/028

★★★★★

ssss 2015/07/249

★★★★★

ssss 

斜め方向にも 

拡大縮小できる

活用例

敷き詰めるときに グループ化有効！

リピートグリッドのエリアはマスクのようなもの

HOME HOME HOME

HOME

HOME HOME HOME

リピートグリッド化してから 最初の要素を左にずらす

本来伸ばせない方向に伸ばす

オブジェクト を選択

リピート グリッド 化

180度 回転

中身を 180度 回転

上に 伸ばせる！

全てのオブジェクトで使える技！

プロパティで 高さ変えるだけ180度回転

して配置

フッターメニューは下付きのまま高さを 

変えたかったりする…

位置調整をコンポーネント配置に利用する

marginなど 

ルール通り配置を 

守って貰う必要が！

配置に気を使わないとマージンが違ってしまう事がある

リピートグリッドの位置をずらせば誰がおいても 

同じマージンになる

ピッタリ 

置いても

マージン統一

リピートグリッド2つで色違い表をつくろう

あああ あああ あああ あああ あああ

あああ あああ あああ あああ あああ

あああ あああ あああ あああ あああ

あああ あああ あああ あああ あああ

あああ あああ あああ あああ あああ

グループの特徴をおさらい

1 31 3

比率は 等しい

グループの特徴をおさらい

1 31 3

距離が 変わる

色違いの表の失敗しない作り方

あああ あああ あああ

あああ あああ あああ

あああ あああ あああ

あああ あああ あああ

あああ あああ あああ

テキスト→複数行テキスト

x,yで位置を調整

間隔を調整

同じサイズにしてグループ化したら 適度なサイズに

同じサイズにしてグループ化したら のばす

さらにグループ化をすすめると タイトル

あああああああああああああああああああ

ああああああああ

タイトル

あああああああああああああああああああ

ああああああああ

タイトル

あああああああああああああああああああ

ああああああああ

タイトル

あああああああああああああああああああ

ああああああああ

タイトル

あああああああああああああああああああ

ああああああああ

タイトル

あああああああああああああああああああ

ああああああああ

タイトル

あああああああああああああああああああ

ああああああああ

タイトル

あああああああああああああああああああ

ああああああああ

New

New

New

タイトル

あああああああああああああああああああ

ああああああああ

タイトル

あああああああああああああああああああ

ああああああああ

タイトル

あああああああああああああああああああ

ああああああああ

タイトル

あああああああああああああああああああ

ああああああああ

タイトル

あああああああああああああああああああ

ああああああああ

New

New

リピートグリッド内の重ね順 写真タイトル

写真タイトル

写真タイトル

間隔を 

マイナスに

リピートグリッド内の重ね順

写真タイトル

写真タイトル

写真タイトル

間隔を変えても 数は増減しない

生成順に 重なる

ページネーションはネストしたリピートグリッドで

1 2 3 4 5<< >>

1 2 3 4 5<< >>

内側 リピートグリッド

間隔を 大きく

ページネーションの使用例

今日の料理 今日の料理

今日の料理 今日の料理

1 2 3 4 5<< >>

1 2 3 4 5<< >>

リピートグリッドの間隔は選択した時だけ有効

今日の料理 今日の料理

今日の料理 今日の料理

1 2 3 4 5<< >>

1 2 3 4 5<< >>

間隔部分は選択を 妨害しない

リピートグリッドは演算合成できる

型抜き

リピートグリッドはテキスト入りでも演算合成できる

リピート

グリッド

演算

合体

演算合成の作例

ほぼ毎月

演算合成の作例…の失敗例

何か 違う…

FontAwesomeなどのアイコンフォント(OTF/TTF) 

をインストールしていれば…

アイコンフォントと組み合わせて使う

TXT

txtファイルはアイコンが表示されず編集しづらい…

豆腐に！

そこでBrackets！

ファイル＞環境設定でFontAwesome追加

{ “fonts.fontSize”: “20px”, “fonts.fontFamily”: “’SourceCodePro-Medium’, ＭＳ ゴシック, ‘MS Gothic’,

monospace” }

{ “fonts.fontSize”: “20px”, “fonts.fontFamily”: “’SourceCodePro-Medium’, ＭＳ ゴシック, ‘MS Gothic’,

‘FontAwesome’,monospace” }

アイコンを見ながら順番管理が簡単に！

アイコン

まとめ

グループ化するときは幅と高さをそろえると安全

リピートグリッドの要素はx,yの位置を調整が可能

実はシェイプとほぼ同等に扱える

アイコンフォントと合わせて使いたい

ご清聴ありがとうございました！