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
380
1
Share
Documenting an Atomic Design System with Jekyll
A lightning talk presented at Explore UX / TriUPA.
Todd Moy
July 24, 2015
More Decks by Todd Moy
See All by Todd Moy
Wild Mushroom
toddmoy
1
110
Misdirection
toddmoy
0
140
Magic
toddmoy
0
240
The Secret Life of Usability (AIGA)
toddmoy
6
540
The Secret Life of Usability
toddmoy
11
610
Alternate Reality Games
toddmoy
1
200
Brain Bugs
toddmoy
3
210
Other Decks in Design
See All in Design
デザイナーが主導権を握る、AI協業の本音と実践
satosio
7
3.3k
セブンデックス プロジェクト事例 / innovation Scenes
sevendex
1
910
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
koyaman
1
1.9k
富山デザイン勉強会_デザイントレンド2026.pdf
keita_yoshikawa
3
210
はじめての演奏会フライヤーデザイン
chorkaichan
1
300
「親切なオンボーディング」 が招く罠 ー AI時代のUXデザイン
godlingkogami
0
120
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
nbkouhou
2
370
2026年の勢い / Momentum for 2026
bebe
0
450
図じゃなく言語で描く - Common Ground for Design AI Operations.
kazukiikeda
2
850
Build for the Web, Build on the Web, Build With the Web
csswizardry
0
420
デザインとフロントエンドの境界が融ける Claude Code × Figma
littlebusters
1
2.9k
TUNAG BOOK 2024
stmn
PRO
0
1.6k
Featured
See All Featured
Accessibility Awareness
sabderemane
1
130
Ruling the World: When Life Gets Gamed
codingconduct
0
240
Reality Check: Gamification 10 Years Later
codingconduct
0
2.2k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
200
Balancing Empowerment & Direction
lara
6
1.1k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
260
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.2k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
420
Art, The Web, and Tiny UX
lynnandtonic
304
22k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
520
Abbi's Birthday
coloredviolet
2
7.8k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
180
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