Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

AtomicDesignの運用方法

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for takanori sugawara takanori sugawara
December 18, 2017
Design
200
0

 AtomicDesignの運用方法

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

Avatar for takanori sugawara

takanori sugawara

December 18, 2017

More Decks by takanori sugawara

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

Other Decks in Design

See All in Design
Saving_the_King_-_Storyboard.pdf
Avatar for Terence Basart terencebasart
0
370
1000人規模の組織でデザインハーネスを導入するための第一歩
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
5
4.3k
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ～継承と挑戦を両立するデザイン手法～
Avatar for Cygames, Inc. cygames
PRO
4
5.3k
Jun Wei Portfolio 2026
Avatar for Wong Jun Wei wjw100788
PRO
1
340
染み出し好きの、 染み出しコントロール論
Avatar for Takeru Mukai mukai_takeru
0
480
Basket_of_love.pdf
Avatar for Terence Basart terencebasart
0
340
AVI 2026 Keynote "Vision-Driven Design"
Avatar for Hiroshi Ishii ishii_mit
0
190
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.8k
Design dependencies
Avatar for Teba_eleven teba_eleven
0
180
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
Avatar for Tsubasa SEKIGUCHI tinykitten
1
620
【CEDEC2026】派手さと見やすさは両立できる！『Shadowverse: Worlds Beyond』エフェクト・3D背景の超進化したビジュアル設計
Avatar for Cygames, Inc. cygames
PRO
2
2.1k
Navigating the journey into design leadership - Hatch Atelier, Berlin, 2026
Avatar for Andy Polaine apolaine
0
120

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
31k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
20k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
550
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.5k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
920
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.4k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k

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