Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
370
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
700
Always Designing: From Designer To Design Leader
revolveconf
8
640
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
Connecting Social Responsibility with Strategic Marketing
revolveconf
3
500
The Economy of Content: Why Supply and Demand Should Guide Your Organization’s Content Strategy
revolveconf
0
290
Crafting Your Content for Multiple Channels
revolveconf
0
260
Object-Oriented UX
revolveconf
0
470
Grow Revenue & Provide Customer Solutions with SEO
revolveconf
0
320
Story Building: Using Story to Connect Brands with Humans
revolveconf
2
400
Other Decks in Design
See All in Design
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.4k
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
280
Personal Story Sequence - Vendetta(WIP)
elrns88
0
310
root COMPANY DECK / We are hiring!
root_recruit
1
16k
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
900
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
200
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
940
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
3.8k
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
4
2.4k
アフォーダンスとシグニファイア
ryokanakai
1
340
Карта реализации историй — убийца USM
ashapiro
0
250
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2.2k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
890
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
A Philosophy of Restraint
colly
203
16k
Scaling GitHub
holman
458
140k
The Cost Of JavaScript in 2023
addyosmani
45
6.9k
For a Future-Friendly Web
brad_frost
175
9.4k
The World Runs on Bad Software
bkeepers
PRO
65
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Making the Leap to Tech Lead
cromwellryan
133
9k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
BBQ
matthewcrist
85
9.3k
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