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

AtomicDesignの運用方法

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for takanori sugawara takanori sugawara
December 18, 2017
Design
190
0

 AtomicDesignの運用方法

AtomicDesignを運用する上気にしていることなどをまとめてみました

Avatar for takanori sugawara

takanori sugawara

December 18, 2017

More Decks by takanori sugawara

See All by takanori sugawara
人によっては_明日から使えるFigmaテクニック
Avatar for takanori sugawara ts020
1
910
VueFes.pdf
Avatar for takanori sugawara ts020
5
10k

Other Decks in Design

See All in Design
hicard_credential_202601
Avatar for hicard hicard
0
240
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
230
Техники структурирования беседы с собой, заказчиком и командо
Avatar for Andrew Shapiro ashapiro
0
160
The Art of Caring
Avatar for Klemens klemens
0
340
I.A. como meio, não como fim. Como avaliar o valor entregue?
Avatar for Viviane Delvequio videlvequio
0
340
AI時代に求められるUXデザインのアプローチ
Avatar for xtone xtone
1
4.7k
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
410
CULTURE DECK／Creative Director
Avatar for M-HAND,Inc. mhand01
0
1.2k
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
830
再設計される業務 - AIにより再設計される "デザインワークフロー" / AI Ops Lab #2 Redesigned orkflows
Avatar for kgsi kgsi
0
670
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
1.9k
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
6
1.2k

Featured

See All Featured
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.6k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
600
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
470
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.5k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
7
670
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
8.1k

Transcript

  1. Farmnote, Inc How to use Atomic design Atomic design ͷӡ༻ํ๏

  2. גࣜձࣾ ϑΝʔϜϊʔτ σβΠφʔ΋΍ΔϓϩάϥϚ ੁݪ ޹ଇ ϑϨʔϜϫʔΫΛઃܭ͢Δͷͱ ΠϯλϥΫγϣϯͷ࣮૷͕ಘҙͰ͢ɻ σβΠϯ΋ͦΕͳΓʹ΍Γ·͢

  3. ڇʹηϯαʔΛ͚ͭͯεϚϗʹൃ৘Λ௨஌ͨ͠Γ
 ຀৔؅ཧɾ෼ੳΛ͢ΔͨΊͷαʔϏεΛ࡞ͬͯΔձࣾͰ͢ɻ

  4. զ͕ࣾʹ͸ઐۀͷσβΠφʔ͕͓Βͣɺ ݱࡏ͸๻͕݉ۀσβΠφʔΛ͓ͯ͠Γ·͢

  5. ڇͷࣄશવΘ͔ΒΜ

  6. ίʔυ΋ॻ͔Ͷ͹ͳΒΜ

  7. ͕࣌ؒͨΓΜ

  8. ्ҩͱϓϩάϥϚʹ σβΠϯͤ͞Ε͹͍͍ ͦ͏ͩʂʂʂ

  9. Atomic Design

  10. None

  11. ͲΜͳײ͡Ͱ࡞͍ͬͯ Δͷ͔

  12. ͜ͷลΓΛσβΠφʔ ͕࡞ΓࠐΉ

  13. ͜ͷลΓͷୟ͖Λ ्ҩʹ࡞ͬͯ΋Β͏

  14. σβΠφʔ͕࢓্͛ Δ

  15. ࣮ࡍʹίʔυʹམͱͤΔͷʁ

  16. ϓϩάϥϚͱσβΠφͰ ͸ཻ౓ઃܭͷண؟఺͕ҧ ͏ͷͰ௒ٞ࿦ ཻ౓Λௐ੔͢Δ

  17. ࣮ࡍʹ࡞Δͱཻ౓͕ͣΕͨΓ͢ ΔͷͰɺ୭Ͱ΋͍͍ͷͰɺඞͣ σβΠϯʹมߋΛ൓өͤ͞Δ ஫ҙʂ

  18. ࣮ࡍ΍ΔͱɺσβΠϯσʔλͷ
 ΍ΓͱΓେม͡Όͳ͍ͷʁ

  19. FigmaΛ࢖͍·͢

  20. Figma GoogleDriveͱSketchΛࠞͥͨΑ͏ͳπʔϧ

  21. ͱΓ͋͑ͣ͜ΕͰσβΠϯʹ ৘ใΛ੝ΕΔ͚ͩ੝Γଓ͚Δ

  22. ΈΜͳ͕ར༻Ͱ͖ͯ
 ద౰ʹϨΠΞ΢τͯ΋ ࣮૷͕αΫοͱऴΘΔ σβΠϯγεςϜ͕ग़དྷ্͕Δ ݁Ռ