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

Documenting an Atomic Design System with Jekyll

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

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
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
130
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
290
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
190
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
210
“使いやすい”が生産性を変える！業務を効率化するためのUX/UI設計ポイント
ncdc
0
110
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
590
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
220
【デザイン初め新年会2025｜01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.7k
The Golden Whitney
ohtristanart
PRO
0
130
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5k
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.7k
(第１回) アーキテクト・テックリード育成講座
masakaya
0
160

Featured

See All Featured
Adopting Sorbet at Scale
ufuk
75
9.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Unsuck your backbone
ammeep
669
57k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Making Projects Easy
brettharned
116
6k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
115
51k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k

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