Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Adobe XDの『こんな時どうする?』を集めました
Search
isaikaori
January 25, 2020
Design
0
730
Adobe XDの『こんな時どうする?』を集めました
Adobe XD ユーザーグループ名古屋 vol.4
isaikaori
January 25, 2020
Tweet
Share
More Decks by isaikaori
See All by isaikaori
熱狂が伝播するチームの作り方
isaikaori
0
1.4k
今日から始めるDesignOpsのヒント
isaikaori
1
700
Deep Dive Adobe XD - レイアウト編
isaikaori
0
230
アウトプットむずい
isaikaori
0
340
実践!a-blog cmsユーザーのためのsite2019.xd活用法
isaikaori
0
200
ECサイトで実現したい『体験』のあり方を考える
isaikaori
1
880
実務で活かすXD!制作を支える取り組みと代表機能の活用術
isaikaori
2
1.4k
a-blog cmsの初心者コンテンツを整備してる話
isaikaori
0
770
強・用・美から考えるテーマデザインのヒント_後編
isaikaori
0
750
Other Decks in Design
See All in Design
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
310
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.8k
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
620
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
510
mento Design Team Portfolio
mento0fficial
1
690
portfolio.pdf
onof003
0
160
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
Installing and Running decksh/pdfdeck
ajstarks
1
840
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
130
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
810
Bulletproof Design System with TypeScript
takanorip
7
4.1k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Gamification - CAS2011
davidbonilla
81
5.4k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Into the Great Unknown - MozCon
thekraken
40
2k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Music & Morning Musume
bryan
46
6.8k
A designer walks into a library…
pauljervisheath
207
24k
Building Applications with DynamoDB
mza
96
6.6k
Rails Girls Zürich Keynote
gr2m
95
14k
Balancing Empowerment & Direction
lara
3
620
Context Engineering - Making Every Token Count
addyosmani
3
54
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Transcript
Adobe XD の 「こんな時どうする?」を 集めました Adobe XD ユーザーグループ名古屋 vol.4
profile 井⻫花織@いおり 有限会社アップルップル デザイナー Adobe XD ユーザーグループ名古屋
XDの活⽤事例 受託制作 1 デザイン マテリアル作成 プロトタイプ (運⽤ドキュメント) フィードバック 素材提供
XDの活⽤事例 テンプレート 2
XDの活⽤事例 ⾃社CMS テーマファイル 3
XDの活⽤事例 プロモーション ムービー作成 5 https://www.a-blogcms.jp/
XDの活⽤事例 プレゼン スライド 4
XDの活⽤事例 ちょっとした ゲームコンテンツ 6 https://xd.adobe.com/view/ 8ce91590-0890-46ff-6e56- e3d73180e625-fad8/?fullscreen
XD = とにかく汎⽤性が⾼い
theme XDコトはじめ(私の場合) 『こんな時どうする?』特集
XDコトはじめ 1
よく聞かれること ① XD気になっているのですが、導⼊のハードルが⾼いです。 どうやって制作現場に取り⼊れましたか? 当事者ではないですが
2018 2020/01 現在
2018 2020/01 現在 最近XDがいい感じ! By先輩デザイナー 当時の Adobe XD デザインスペック(ベータ版) コメント機能強化中
Photoshop連携強化中 Sketch連携強化中 固定オブジェクト 数値フィールド内の四則演算
2018 2020/01 現在 最近XDがいい感じ! By先輩デザイナー 当時の Adobe XD デザインスペック(ベータ版) コメント機能強化中
Photoshop連携強化中 Sketch連携強化中 固定オブジェクト 数値フィールド内の四則演算
ちょうど同時期ぐらいに開催
導⼊の決め⼿ デザイナーにとどまらない共有の便利さ 1 他のAdobe製品との連携強化・⾒込み 2 無料で⼿軽に試しやすい環境があった 3
XDとどうやって仲良くなりましたか? よく聞かれること ② とにかく豊富な情報源を頼りにしてます
Adobe⾃⾝もかなり⼒を⼊れている 注⽬度の⾼いデザインツール
2019/12/3(⽕) Adobe MAX Japan
None
None
None
None
None
読む/触る/遊ぶ/質問するなど ⾃分にあった⽅法で無理なく情報を追う 1 周りの環境をできる限り整えて XDに触れる回数を増やす 2 XDと仲良くなるために
『こんな時どうする?』特集 2
機能編
リピートグリッドを崩さないで ⼀部を空⽩にしたい CASE1
⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります
プラグイン:RepeatGrid Fitter 1 透過PNG+spaceキー 2 おすすめの⽅法は2つ
プラグイン:RepeatGrid Fitter
透過PNG+spaceキー ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります
共有リンクで本番同様の シミュレーションがしたい CASE2
リンクを共有 デザインレビュー 1 開発 2 プレゼンテーション 3 ユーザーテスト 4 カスタム
5
リンクを共有 デザインレビュー 1 開発 2 プレゼンテーション 3 ユーザーテスト 4 カスタム
5 ⾒た⽬が⼀緒
ホットスポットの ヒント ユーザー テスト プレゼン テーション ナビゲーション コントロール ◦ ×
◦ × 出し分けたいなら「カスタム」を使う
リンクを共有 デザインレビュー 1 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/ 開発 2 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/ プレゼンテーション 3 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreen
ユーザーテスト 4 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreen&hints=off カスタム 5
リンクを共有 デザインレビュー 1 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/ 開発 2 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/ プレゼンテーション 3 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreen
ユーザーテスト 4 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreen&hints=off カスタム 5 リンク先が競合
XDで印刷⽤のデザインを 作りたい CASE3
【おことわり】 あまりおすすめはしない
XDはカラーマネジメント⾮対応 1 単位はpx・書き出しの解像度は72が前提 2 ⽤紙サイズ設定がない 3 印刷時はPDFに書き出す必要がある 4 事前注意事項
XDはカラーマネジメント⾮対応 1 単位はpx・書き出しの解像度は72が前提 2 ⽤紙サイズ設定がない 3 印刷時はPDFに書き出す必要がある 4 事前注意事項
プラグイン:Print Artboard 解像度調整 単位変換 ⽤紙サイズ変更
XDはカラーマネジメント⾮対応 1 単位はpx・書き出しの解像度は72が前提 2 ⽤紙サイズ設定がない 3 印刷時はPDFに書き出す必要がある 4 事前注意事項 ×
× 解決策なし 解決策なし
出来上がりイメージ スピード
効率化編
プロトタイプを もっと早く繋ぎたい CASE4
デザイン 画⾯ コンポーネント ノーマル プロトタイプ 画⾯ ◦ × ◦ ×
まとめてコピー&ペースト 個別にコピー&ペーストなら:右クリック→インタラクションをペースト
あるサイトやファイルの UIやスタイルを素早く参照したい CASE5
ジャンル別に4つ スポイト 1 画⾯内全てのカラーを参照 プラグイン「Mimic」 2 公開サイトのアセット類をインポート UIキット 3 iOS標準などのUIパーツがそのまま使える
アセットをリンク 4 別XDファイルのアセットをリンク
アセットをリンク ⾒出し1テキスト ⾒出し2テキスト 本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキ スト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト ドキュメント1 ドキュメント2 ドキュメント3 ドキュメント4
ソースドキュメントはクラウドに保存する 1 ローカルアセットにする⼿段がない 2 リンクしたアセットは削除できない 3 アセットをリンク ※ただしソースドキュメントで削除した場合は可能
theme XDコトはじめ 『こんな時どうする?』特集
ご静聴ありがとうございました twitter: @isaikaori facebook: isaikaori blog: https://isaikaori.com 井⻫花織@いおり