Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Documenting an Atomic Design System with Jekyll

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Todd Moy Todd Moy
July 24, 2015
Design
1
370

Documenting an Atomic Design System with Jekyll

A lightning talk presented at Explore UX / TriUPA.

Avatar for Todd Moy

Todd Moy

July 24, 2015
Tweet

More Decks by Todd Moy

See All by Todd Moy
Wild Mushroom
Avatar for Todd Moy toddmoy
1
110
Misdirection
Avatar for Todd Moy toddmoy
0
140
Magic
Avatar for Todd Moy toddmoy
0
240
The Secret Life of Usability (AIGA)
Avatar for Todd Moy toddmoy
6
530
The Secret Life of Usability
Avatar for Todd Moy toddmoy
11
600
Alternate Reality Games
Avatar for Todd Moy toddmoy
1
200
Brain Bugs
Avatar for Todd Moy toddmoy
3
210

Other Decks in Design

See All in Design
TUNAG BOOK 2024
Avatar for 株式会社スタメン stmn
PRO
0
1.5k
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1.1k
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
390
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
310
Ralph Penel Portfolio
Avatar for ralphpenel ralphpenel
0
350
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
210
CULTURE DECK／Frontend Engineer
Avatar for M-HAND,Inc. mhand01
0
960
Treasure_Hunting
Avatar for Sol Metts solmetts
0
310
Figma MCPを活用するためのデザインハンドブック
Avatar for viviON Design vivion
3
10k
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
280
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
590
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
1
1.3k

Featured

See All Featured
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Between Models and Reality
Avatar for mayunak mayunak
2
230
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.2k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
540
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
9.9k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
69
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
480
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
99
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.4k
Designing for Performance
Avatar for Lara Hogan lara
611
70k

Transcript

  1. Documenting an A T O M I C Design System

    with Jekyll Presented by @toddmoy from @viget

  2. BACKGROUND handoff to their tech team 3

  3. AT0MIC DESIGN ATOMS MOLECULES ORGANISMS TEMPLATES PAGES 4

  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

  5. JEKYLL 8 A Static Site Generator

  6. 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

  7. BUILT JEKYLL WITH 22

  8. How we used it PROCESS OMNIGRAFFLE INVISION basecamp JEKYLL 11

  9. How we used it STRUCTURE 12

  10. How we used it EDITING 13

  11. How we used it Purpose & UsAGE SAMPLE SCREENS FUNCTIONAL

    REQUIREMENTS EDITORIAL Requirements STYLISTIC GUIDELINES INCLUDED COMPONENTS & ELEMENTS CONTENT 15

  12. How we used it COMMITS 16

  13. How we used it PULL REQUESTS 17

  14. How we used it HOSTING 18

  15. FUTURE PLANS? 19

  16. Thanks y’all! Presented by @toddmoy from @viget 21