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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Todd Moy
July 24, 2015
Design
1
370
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
110
Misdirection
toddmoy
0
140
Magic
toddmoy
0
230
The Secret Life of Usability (AIGA)
toddmoy
6
530
The Secret Life of Usability
toddmoy
11
600
Alternate Reality Games
toddmoy
1
200
Brain Bugs
toddmoy
3
210
Other Decks in Design
See All in Design
公開スライド)熊本市様-電子申請中級編
garyuten
0
830
Goodpatch Tour💙 / We are hiring!
goodpatch
31
1M
アイデアを加速させる!Firefly ボードで発想の幅を広げよう
connecre
1
300
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
290
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
1.9k
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
200
AIエージェントが対話的なUIを返す!MCP−UIで変わるユーザ体験
daitasu
1
140
これからの「Webデザイン」の話をしよう~デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値~
ds35mm
0
540
図じゃなく言語で描く - Common Ground for Design AI Operations.
kazukiikeda
1
670
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
790
mount_company_profile
mount_inc
0
4.9k
Storyboard Assignment: Storyboard from Comic Strip
lynteo
3
180
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
55
12k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
450
The Language of Interfaces
destraynor
162
26k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
140
A designer walks into a library…
pauljervisheath
210
24k
Being A Developer After 40
akosma
91
590k
Six Lessons from altMBA
skipperchong
29
4.1k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
340
From π to Pie charts
rasagy
0
120
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.7k
Designing for Timeless Needs
cassininazir
0
130
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
140
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