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 Systems in Sketch
Search
XaverLoeffelholz
February 19, 2018
Design
0
100
Design Systems in Sketch
XaverLoeffelholz
February 19, 2018
Tweet
Share
Other Decks in Design
See All in Design
Ride or Die Animatics
warwatkar
0
140
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
300
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
310
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
590
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
280
Web 組版の課題とその解法
yamatoiizuka
0
110
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
490
root Design Partnership Policy
root_recruit
0
4k
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
360
Product-Writing
aguringo
6
2.8k
他人事じゃないWebアクセシビリティ入門
arihiro17
0
210
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
330
Featured
See All Featured
What the flash - Photography Introduction
edds
64
11k
Done Done
chrislema
178
15k
The Language of Interfaces
destraynor
151
23k
Git: the NoSQL Database
bkeepers
PRO
422
63k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Building an army of robots
kneath
300
41k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
How GitHub (no longer) Works
holman
304
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Optimizing for Happiness
mojombo
370
69k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Transcript
Design Systems in Sketch Xaver Loeffelholz & Jeroen van Dongen
None
With a design system... … there is less work for
designers and developers … user interface becomes more consistent … a more collaborative workflow is created
Atomic Design http://atomicdesign.bradfrost.com/
What is atomic design?
None
None
Sketch Libraries • Available since Sketch 47 (October 2017) •
Replacement for template files • Symbols are always up-to-date
Our implementation Sketch library screenshots, maybe a video?
Updates in the library
None
Nested symbols
None
Pages • Combined use of molecules and organisms • Highly
customizable • Still always up-to-date
None
Creating an Atomic design system • What is an Atom,
what is a Molecule? • Agree on wording • Create a clear structure • There will always be exceptions
Problems • Overrides do not work well with organisms •
Sketch slows down
Trade-offs Big Design system Hard to find object that is
needed Small Design system Probably missing some elements
Limitations • No resize of symbols based on text •
Plugins available, but problematic
Treat design system like a product
Questions? Thank you! … BTW. We are hiring! delightex.com