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
Documenting an Atomic Design System with Jekyll
Search
Todd Moy
July 24, 2015
Design
1
360
Documenting an Atomic Design System with Jekyll
A lightning talk presented at Explore UX / TriUPA.
Todd Moy
July 24, 2015
Tweet
Share
More Decks by Todd Moy
See All by Todd Moy
Wild Mushroom
toddmoy
1
100
Misdirection
toddmoy
0
130
Magic
toddmoy
0
220
The Secret Life of Usability (AIGA)
toddmoy
6
520
The Secret Life of Usability
toddmoy
11
590
Alternate Reality Games
toddmoy
1
190
Brain Bugs
toddmoy
3
190
Other Decks in Design
See All in Design
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
780
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
620
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
3
3k
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
280
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
Museum Heist
allykae
0
120
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
820
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
120
セブンデックス カルチャーブック
sevendex
0
1.7k
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
120
LayerX DesignersDeck
layerx
PRO
0
2.5k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
We Have a Design System, Now What?
morganepeng
51
7.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
GitHub's CSS Performance
jonrohan
1030
460k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
4 Signs Your Business is Dying
shpigford
182
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Transcript
Documenting an A T O M I C Design System
with Jekyll Presented by @toddmoy from @viget
BACKGROUND handoff to their tech team 3
AT0MIC DESIGN ATOMS MOLECULES ORGANISMS TEMPLATES PAGES 4
DOCUMENTATION ISSUES DesignSystem_20150120.pdf DesignSystem_20141218.pdf DesignSystem_20141205.pdf DesignSystem_20141120.pdf DesignSystem_20141101.pdf DesignSystem_20141031.pdf DesignSystem_20151010.pdf FORMAT
NAVIGATION & USABILITY VERSIONING 6
JEKYLL 8 A Static Site Generator
JEKYLL MARKDOWN CONTENT static web pages # Title Integer
posuere erat a ante venenatis dapibus posuere velit aliquet. * Lorem ipsum * Dolor site amet … HTML + CSS TEMPLATES <%= partial(‘header’) %> <body> <%= yield => </body> <%= partial(‘footer’) %> 9
BUILT JEKYLL WITH 22
How we used it PROCESS OMNIGRAFFLE INVISION basecamp JEKYLL 11
How we used it STRUCTURE 12
How we used it EDITING 13
How we used it Purpose & UsAGE SAMPLE SCREENS FUNCTIONAL
REQUIREMENTS EDITORIAL Requirements STYLISTIC GUIDELINES INCLUDED COMPONENTS & ELEMENTS CONTENT 15
How we used it COMMITS 16
How we used it PULL REQUESTS 17
How we used it HOSTING 18
FUTURE PLANS? 19
Thanks y’all! Presented by @toddmoy from @viget 21