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
Design Workflows with Sketch
Search
Revolve Conference
October 27, 2016
Design
0
480
Design Workflows with Sketch
A session by Clark Wimberly at Revolve Conference 2016
Revolve Conference
October 27, 2016
Tweet
Share
More Decks by Revolve Conference
See All by Revolve Conference
What is OTT and How is it Changing the Media Landscape?
revolveconf
11
740
Always Designing: From Designer To Design Leader
revolveconf
8
690
Creatively Recalculating Your Daily Design Routine
revolveconf
216
12k
Connecting Social Responsibility with Strategic Marketing
revolveconf
3
550
The Economy of Content: Why Supply and Demand Should Guide Your Organization’s Content Strategy
revolveconf
0
330
Crafting Your Content for Multiple Channels
revolveconf
0
290
Object-Oriented UX
revolveconf
0
500
Grow Revenue & Provide Customer Solutions with SEO
revolveconf
0
350
Story Building: Using Story to Connect Brands with Humans
revolveconf
2
440
Other Decks in Design
See All in Design
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
100
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
650
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
120
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
PRO
0
210
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
880
高卒公務員から Webデザイナーになるまで
kinomidesign
0
110
佐藤千晶|ポートフォリオ
chimi_chia
0
210
Yumika Yamada Portfolio
yumii
0
2k
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
680
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
530
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
620
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
340
Featured
See All Featured
How to Ace a Technical Interview
jacobian
280
24k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Making Projects Easy
brettharned
120
6.4k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
How STYLIGHT went responsive
nonsquared
100
5.8k
Embracing the Ebb and Flow
colly
88
4.9k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Why Our Code Smells
bkeepers
PRO
340
57k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
A better future with KSS
kneath
239
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Transcript
Design Workflow with Sketch Clark Wimberly, Designer at InVision
@clarklab #SketchWorkflow
#SketchWorkflow @clarklab @invisionapp
None
The Zebra “Priceline for Insurance” A team of about 30
folks One designer in the bunch
sxsw.com
Design Workflow with Sketch
<3
Vector-based 1 Artboards 2 Assets 3
"Sketch is an awesome minimalist app focused on UI design.
There’s none of that image-editing sh*t in there. The team really loves it. It helps us be as fast as we can possibly be.” Joshua Porter Director of UX at Hubspot
Sketch Anatomy 101
Sketch and Photoshop
Raster (pixels) Vector Sketch is vector-based
Not for photo editing Don’t do this!
Plugins Are awesome Make me a liar
Not just a tool, a toolchain
Pages
Artboards
Artboards
Artboards
Symbols and styles
Symbols Reusable elements Update one instance, all others change
Symbols Let’s update that header color!
Symbols Update a single instance
Symbols The rest fall in line!
“Master” screens Using one view in lots of places
Multiple views are a snap
Text Styles Reusable size, color, font, spacing, etc.
Text Styles Change one instance, all others change
Pull text styles as CSS /* Article Body */ font-family:
Helvetica; font-size: 20px; color: #4A4A4A; line-height: 35px;
Layer Styles Reusable fills, borders, shadows, etc
Pull layer styles as CSS /* button: */ background-image: linear-gradient(-180deg,
#C8BFDB 0%, #B8A6E4 100%); border-radius: 100px; /* button-type: */ font-family: Karla-Bold; font-size: 32px; color: #FFFFFF; text-shadow: 0px 2px 0px rgba(0,0,0,0.24);
Export like a boss
Photoshop Generator & Slicy naming conventions
Photoshop Generator & Slicy 400% tuningfork.png, 250×250 tuningfork.jpg40% naming nightmare
Exporting an icon
Exporting an icon as a 1x PNG file
Exporting an icon as a 1x, 2x PNG file and
resolution-independent SVG
Export in batches
or cherry pick the logos icons avatars
Have assets will travel 1x 2x svg png
Automate!
Automate!
Custom Icons Manage your collection in one place
Fresh baked icons Make some changes? Export the whole set
at once.
Craft Screen Design. Supercharged.
Duplicate Forget copy and paste
None
Library Cloud connected team design assets
Library Cloud connected team design assets
None
Data Design with real data
None
None
None
None
None
None
None
None
Prototype Hi-fi prototypes with your real design files
None
Resizing New in Sketch 39
None
None
SketchTool CLI for accessing .sketch innards
SketchTool Exporting all slices from an icon-filled file
SketchTool Results!
Pull data from your files The sky is the limit!
Also your ability.
SketchTool Cross-platform CLI for accessing .sketch innards sketchtool list pages
filename.sketch sketchtool dump filename.sketch sketchtool export artboards filename.sketch ——output ——scale ——formats
More than a design document
Sketch Mirror
Sketch Mirror
Sync Your team on the same page, automatically.
@clarklab #SketchWorkflow