[adobe xd] リピートグリッドで遊ぼう
TRANSCRIPT
![Page 1: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/1.jpg)
リピートグリッドで遊ぼう
Adobe XD Meeting #03
ネットパイロティング株式会社
UIデザイナー
湯口りさ
![Page 2: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/2.jpg)
自己紹介
フロントエンド→UI屋さんに
Fireworks+Flash→Adobe XD + IntellJ IDEA
Twitter: @risay
Adobe XD Advent Calendar 主催
![Page 3: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/3.jpg)
Twitter @risay アカウントにて
(期間:2016/3/15~12/15)
AdobeXDについて
ツイート
AdobeXDについて
話した日
615ツイート
177日
![Page 4: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/4.jpg)
Windows版がでたので…
![Page 5: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/5.jpg)
Windows版がでたので…
HololensでAdobeXD(リモートデスクトップ)しました
![Page 6: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/6.jpg)
リピートグリッドをグループ化すると操作性が変わる
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
斜め方向にも
拡大縮小できる
![Page 7: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/7.jpg)
活用例
敷き詰めるときに グループ化有効!
![Page 8: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/8.jpg)
リピートグリッドのエリアはマスクのようなもの
HOME HOME HOME
HOME
HOME HOME HOME
リピートグリッド化してから 最初の要素を左にずらす
![Page 9: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/9.jpg)
本来伸ばせない方向に伸ばす
オブジェクト を選択
リピート グリッド 化
180度 回転
中身を 180度 回転
上に 伸ばせる!
![Page 10: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/10.jpg)
全てのオブジェクトで使える技!
プロパティで 高さ変えるだけ180度回転
して配置
フッターメニューは下付きのまま高さを
変えたかったりする…
![Page 11: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/11.jpg)
位置調整をコンポーネント配置に利用する
marginなど
ルール通り配置を
守って貰う必要が!
![Page 12: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/12.jpg)
配置に気を使わないとマージンが違ってしまう事がある
![Page 13: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/13.jpg)
リピートグリッドの位置をずらせば誰がおいても
同じマージンになる
ピッタリ
置いても
マージン統一
![Page 14: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/14.jpg)
リピートグリッド2つで色違い表をつくろう
あああ あああ あああ あああ あああ
あああ あああ あああ あああ あああ
あああ あああ あああ あああ あああ
あああ あああ あああ あああ あああ
あああ あああ あああ あああ あああ
![Page 15: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/15.jpg)
グループの特徴をおさらい
1 31 3
比率は 等しい
![Page 16: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/16.jpg)
グループの特徴をおさらい
1 31 3
距離が 変わる
![Page 17: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/17.jpg)
色違いの表の失敗しない作り方
あああ あああ あああ
あああ あああ あああ
あああ あああ あああ
あああ あああ あああ
あああ あああ あああ
テキスト→複数行テキスト
x,yで位置を調整
間隔を調整
同じサイズにしてグループ化したら 適度なサイズに
同じサイズにしてグループ化したら のばす
![Page 18: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/18.jpg)
さらにグループ化をすすめると タイトル
あああああああああああああああああああ
ああああああああ
タイトル
あああああああああああああああああああ
ああああああああ
タイトル
あああああああああああああああああああ
ああああああああ
タイトル
あああああああああああああああああああ
ああああああああ
タイトル
あああああああああああああああああああ
ああああああああ
タイトル
あああああああああああああああああああ
ああああああああ
タイトル
あああああああああああああああああああ
ああああああああ
タイトル
あああああああああああああああああああ
ああああああああ
New
New
New
タイトル
あああああああああああああああああああ
ああああああああ
タイトル
あああああああああああああああああああ
ああああああああ
タイトル
あああああああああああああああああああ
ああああああああ
タイトル
あああああああああああああああああああ
ああああああああ
タイトル
あああああああああああああああああああ
ああああああああ
New
New
![Page 19: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/19.jpg)
リピートグリッド内の重ね順 写真タイトル
写真タイトル
写真タイトル
間隔を
マイナスに
![Page 20: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/20.jpg)
リピートグリッド内の重ね順
写真タイトル
写真タイトル
写真タイトル
間隔を変えても 数は増減しない
生成順に 重なる
![Page 21: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/21.jpg)
ページネーションはネストしたリピートグリッドで
1 2 3 4 5<< >>
1 2 3 4 5<< >>
内側 リピートグリッド
間隔を 大きく
![Page 22: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/22.jpg)
ページネーションの使用例
今日の料理 今日の料理
今日の料理 今日の料理
1 2 3 4 5<< >>
1 2 3 4 5<< >>
![Page 23: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/23.jpg)
リピートグリッドの間隔は選択した時だけ有効
今日の料理 今日の料理
今日の料理 今日の料理
1 2 3 4 5<< >>
1 2 3 4 5<< >>
間隔部分は選択を 妨害しない
![Page 24: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/24.jpg)
リピートグリッドは演算合成できる
型抜き
![Page 25: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/25.jpg)
リピートグリッドはテキスト入りでも演算合成できる
リピート
グリッド
演算
合体
![Page 26: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/26.jpg)
演算合成の作例
ほぼ毎月
![Page 27: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/27.jpg)
演算合成の作例…の失敗例
何か 違う…
![Page 28: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/28.jpg)
FontAwesomeなどのアイコンフォント(OTF/TTF)
をインストールしていれば…
アイコンフォントと組み合わせて使う
TXT
![Page 29: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/29.jpg)
txtファイルはアイコンが表示されず編集しづらい…
豆腐に!
![Page 30: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/30.jpg)
そこでBrackets!
ファイル>環境設定でFontAwesome追加
{ “fonts.fontSize”: “20px”, “fonts.fontFamily”: “’SourceCodePro-Medium’, MS ゴシック, ‘MS Gothic’,
monospace” }
{ “fonts.fontSize”: “20px”, “fonts.fontFamily”: “’SourceCodePro-Medium’, MS ゴシック, ‘MS Gothic’,
‘FontAwesome’,monospace” }
![Page 31: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/31.jpg)
アイコンを見ながら順番管理が簡単に!
アイコン
![Page 32: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/32.jpg)
まとめ
グループ化するときは幅と高さをそろえると安全
リピートグリッドの要素はx,yの位置を調整が可能
実はシェイプとほぼ同等に扱える
アイコンフォントと合わせて使いたい
![Page 33: [Adobe XD] リピートグリッドで遊ぼう](https://reader036.vdocuments.mx/reader036/viewer/2022081507/58a2b2241a28ab5d408b56a3/html5/thumbnails/33.jpg)
ご清聴ありがとうございました!