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
Cooperate with Adobe XD, Zeplin and Xcode
Search
asmz
February 25, 2019
Technology
1
2.9k
Cooperate with Adobe XD, Zeplin and Xcode
Adobe XD・Zeplin・Xcode連携で、iOSアプリのデザイン実装フロー効率化
Talked at 仙台 Adobe XD Meeting #3
asmz
February 25, 2019
Tweet
Share
More Decks by asmz
See All by asmz
Recommend Apple Human Interface Guidelines
asmz
1
1.8k
Overview of Swift and iOS App development
asmz
0
1.1k
How to get mobile app logs using Firebase Crashlytics
asmz
0
750
OK Google, Deploy the iOS app
asmz
1
740
phpconsen LT
asmz
0
640
SWWDC 39
asmz
1
150
Create voice assistant app by Dialogflow
asmz
0
770
SWWDC 34
asmz
0
620
SWWDC 30
asmz
1
2.4k
Other Decks in Technology
See All in Technology
Vista FinderMx
jtes
0
160
AI時代のアジャイル開発(XP祭り2024版) / Agile Development in the AI Era in XPJUG
takaking22
13
3.5k
入門 バックアップ
ryuichi1208
15
4.7k
Sansanにおける全社横断データ分析基盤の挑戦と未来 / Challenges and Future of Cross-Organizational Data Analytics Platform at Sansan
sansan_randd
2
310
RAGの性能を評価しよう
kurahara
1
280
Oracle GoldenGate 23ai 導入Tips
oracle4engineer
PRO
1
210
How CERN serves 1EB of data via FUSE
ennael
PRO
0
16k
【shownet.conf_】トポロジ図の歩き方
shownet
PRO
0
370
つよつよリーダーが 抜けたらどうする? 〜ナビタイムのAgile⽀援組織の変遷〜
navitimejapan
PRO
22
13k
Authenticator のエミュレーションによる パスキーのログインテスト/nikkei-tech-talk-25
nikkei_engineer_recruiting
0
140
XPを始める新人に伝えたい近道の鍵
nakasho
1
260
C# 13 / .NET 9 の新機能 (RC 1 時点)
nenonaninu
1
1.2k
Featured
See All Featured
RailsConf 2023
tenderlove
28
840
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
38
2.1k
Designing for Performance
lara
604
68k
Building Adaptive Systems
keathley
37
2.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Code Review Best Practice
trishagee
62
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4k
Design by the Numbers
sachag
278
19k
The Art of Programming - Codeland 2020
erikaheidi
50
13k
Transcript
Adobe XD・Zeplin・Xcode連携で、 iOSアプリのデザイン実装フロー効率化 2019/02/25 仙台 Adobe XD Meeting #3 Akira
Shimizu / asmz
2 誰なのか? • Akira Shimizu / asmz (@_asmz) • https://asmz.beer/
• 株式会社ビデオマーケット 仙台オフィス • iOSエンジニア • 個人開発:IT勉強会検索アプリ「EVENTech」 ◦ https://eventech.asmz.beer/
今日話すこと
アプリ開発におけるデザイン実装フロー デザイン設計 デザイン共有 デザイン実装 • デザイナーさんにてデザイン設計、そのデザインをエ ンジニアへ共有し、エンジニアが実装 主にAdobe XDが活躍 本日お話しする範囲
デザイナー・エンジニア間の アプリデザイン共有
デザインの共有・連携方法 • ちょっと前までは... ◦ デザイン全体のイメージ画像・カンプ(PDFとかPNGとかJPGとか) ◦ 各パーツ画像切り出し(PNGとかJPGとか) ◦ カラーガイド・スタイルガイド(別ドキュメントで) よろ〜
あいよ SPEC
デザインの共有・連携方法 • 発生しうる問題 MarginとかFont weightとか色味 とか... 思ってたんと 違う... MarginとかFont weightとか色味
とか... なるほど、 わからん
デザインの共有・連携方法 • なぜなのか? ◦ バラバラに共有された情報を組み合わせるコスト ◦ レイアウトと各リソースの対応づけ見誤り ◦ そもそもデザイン指示に漏れ ◦
: →足りない部分は都合がいい方法で実装しがち →結果、手戻り
Adobe XDの デザインスペック
Adobe XDのデザインスペック • XDで作成したデザイン がそのまま指示書に! デザイン・スタイル指示の箇所とその指示内容 が一目でわかる!
Adobe XDのデザインスペック • スペックから直接画像 の書き出しが出来る! その箇所に対応する画像ファイルを別途探す必 要がない!
Adobe XDのデザインスペック • その他メリット ◦ デザイン変更によるファイル差し替え不要 ▪ デザインスペックの更新だけで済む ◦ 不明な点はデザインスペック上でコメント可
▪ 不毛なメールのやりとりが不要 これだけでも充分な機能だが…
Adobe XD・Zeplin・Xcode 連携
Zeplinとは • https://zeplin.io/ • デザインファイル共有ツール ◦ XDのデザインスペック機能に特化したようなツール • Web /
デスクトップアプリで動作 • 各種デザイン作成ツールに対応 ◦ Sketch, Adobe XD CC, Figma, Adobe Photoshop CC
Xcodeとは • Apple公式iPhone/iPadアプリ開発ツール
Xcodeとは • グラフィカルに画面レイ アウトを作成できる 「Inteface Builder」を内 包
連携方法(Adobe XD→Zeplin) • デスクトップアプリをインストールするだけ! これが増える
連携方法(Zeplin→Xcode) • Zeplin Extension追加 ◦ https://extensions.zeplin.io/
デザイン指示書 • 概ねXDと同レベル ◦ 画像書き出し ◦ コメント機能
スタイルガイド作成 • 画面から必要なカラーやスタ イルを追加することでスタイ ルガイドが作れる
画像リソース連携 • Zeplinの画像リソースをそのままXcodeプロジェクトへ!
画像リソース連携 ファイルをダウンロード→zip解凍→Xcodeプロジェクトへコピー、 みたいな作業が不要!
カラーパレット連携 • カラーパレットもそのままXcodeプロジェクトへ!
カラーパレット連携
コード生成 • Swiftソースコードも自動的生成
POINT・TIPS • アセット命名 ◦ カラー名やスタイル名はソースコードとしてそのまま利用されるため 「lowerCamelCase」で ◦ 画像やカラーが何を意味しているのかを命名 ▪ ❌
色:white, black 画像:leftTriangle, redCircle ▪ ⭕ 色:primary, accent 画像:playButton, recordingButton • iOSのベクター画像の扱い ◦ PDF形式が利用可能 ◦ Retina用の@2x、@3xファイルが不要になる
デザイン実装フローが どう変わるか
ちょっと前まで 画像差し替え です〜 あいよ ・画像差し替え →画像ファイル書き出し →リネーム →zip圧縮 →メール添付 →メール送信
・画像ダウンロード →zip解凍 →Xcodeアセットに追加
XDデザインスペック共有 画像差し替え です〜 あいよ ・画像ダウンロード →zip解凍 →Xcodeアセットに追加 ・アートボード更新
XD・Zeplin・Xcode連携 画像差し替え です〜 あいよ ・アートボード更新 ・画像取り込み(半自動) 手作業がほとんど入らない
まとめ
デザイン共有の重要性 「漏れなく、ムダなく」の意識 • 「デザイナー」「エンジニア」という職種の異なる人同士の やりとり ◦ 技術・文化などの違いがあるので、漏れなく • 手作業を極力減らし「仕組み化」 ◦
人間誰しも間違えることはある ◦ ここのコストはあまり工数換算されないのでムダなく
2019/02/25 仙台 Adobe XD Meeting #3 Akira Shimizu / asmz
Enjoy Creating!
34 [PR] 個人開発アプリのご紹介 • ITイベント・勉強会検索アプリ「EVENTech」 ◦ 実際のところはconnpassクライアント ◦ https://eventech.asmz.beer/