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
3k
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
React Native+Expoで始めるWebフロント開発
asmz
0
180
UIデザインを考える全ての人たちに捧げる Apple Human Interface Guidelinesのススメ
asmz
1
2.1k
Overview of Swift and iOS App development
asmz
0
1.1k
How to get mobile app logs using Firebase Crashlytics
asmz
0
810
OK Google, Deploy the iOS app
asmz
1
810
phpconsen LT
asmz
0
690
SWWDC 39
asmz
1
200
Create voice assistant app by Dialogflow
asmz
0
810
SWWDC 34
asmz
0
680
Other Decks in Technology
See All in Technology
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
事業継続を支える自動テストの考え方
tsuemura
0
300
FastConnect の冗長性
ocise
1
9.6k
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
660
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
プロセス改善による品質向上事例
tomasagi
1
1.6k
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
A designer walks into a library…
pauljervisheath
205
24k
Six Lessons from altMBA
skipperchong
27
3.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Designing for humans not robots
tammielis
250
25k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Producing Creativity
orderedlist
PRO
343
39k
Music & Morning Musume
bryan
46
6.3k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Git: the NoSQL Database
bkeepers
PRO
427
64k
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/