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
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
プロセス改善による品質向上事例
tomasagi
1
1.6k
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
RSNA2024振り返り
nanachi
0
500
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
FastConnect の冗長性
ocise
1
9.6k
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
335
57k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Rails Girls Zürich Keynote
gr2m
94
13k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
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/