Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
リピートグリッドで遊ぼう
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 
2...
活用例
敷き詰めるときに 
グループ化有効!
リピートグリッドのエリアはマスクのようなもの
HOME HOME HOME
HOME
HOME HOME HOME
リピートグリッド化してから 
最初の要素を左にずらす
本来伸ばせない方向に伸ばす
オブジェクト
を選択
リピート
グリッド
化
180度
回転
中身を
180度
回転
上に
伸ばせる!
全てのオブジェクトで使える技!
プロパティで
高さ変えるだけ180度回転
して配置
フッターメニューは下付きのまま高さを 
変えたかったりする…
位置調整をコンポーネント配置に利用する
marginなど 
ルール通り配置を 
守って貰う必要が!
配置に気を使わないとマージンが違ってしまう事がある
リピートグリッドの位置をずらせば誰がおいても 
同じマージンになる
ピッタリ 
置いても
マージン統一
リピートグリッド2つで色違い表をつくろう
あああ あああ あああ あああ あああ
あああ あああ あああ あああ あああ
あああ あああ あああ あああ あああ
あああ あああ あああ あああ あああ
あああ あああ あああ あああ あああ
グループの特徴をおさらい
1 3
1 3
比率は 
等しい
グループの特徴をおさらい
1 3
1 3
距離が 
変わる
色違いの表の失敗しない作り方
あああ あああ あ
あああ あああ あ
あああ あああ あ
あああ あああ あ
あああ あああ あ
テキスト→複数行テキスト
x,yで位置を調整
間隔を調整
同じサイズにしてグループ化したら 
適度なサイズに
同じ...
さらにグループ化をすすめると タイトル
あああああああああああああああああああ
ああああああああ
タイトル
あああああああああああああああああああ
ああああああああ
タイトル
あああああああああああああああああああ
ああああああああ
タイトル
...
リピートグリッド内の重ね順 写真タイトル
写真タイトル
写真タイトル
間隔を 
マイナスに
リピートグリッド内の重ね順
写真タイトル
写真タイトル
写真タイトル
間隔を変えても 
数は増減しない
生成順に 
重なる
ページネーションはネストしたリピートグリッドで
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 ゴシック, ‘MS...
アイコンを見ながら順番管理が簡単に!
アイコン
まとめ
グループ化するときは幅と高さをそろえると安全
リピートグリッドの要素はx,yの位置を調整が可能
実はシェイプとほぼ同等に扱える
アイコンフォントと合わせて使いたい
ご清聴ありがとうございました!
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
HoloLens をかぶってパンを食べに行った話
Next
Download to read offline and view in fullscreen.

3

Share

Download to read offline

[Adobe XD] リピートグリッドで遊ぼう

Download to read offline

2017/02/07 (火) に開催されたAdobe XD Meeting #03 (https://xd-study.connpass.com/event/49530/) で発表したリピートグリッドを活用する方法を紹介したスライドです。

[Adobe XD] リピートグリッドで遊ぼう

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

    Jun. 30, 2019
  • barista

    Mar. 2, 2017
  • ngm4life

    Feb. 11, 2017

2017/02/07 (火) に開催されたAdobe XD Meeting #03 (https://xd-study.connpass.com/event/49530/) で発表したリピートグリッドを活用する方法を紹介したスライドです。

Views

Total views

2,232

On Slideshare

0

From embeds

0

Number of embeds

157

Actions

Downloads

6

Shares

0

Comments

0

Likes

3

×