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

AtomicDesignの運用方法

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
980
人によっては_明日から使える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
Navigating the journey into design leadership - Hatch Atelier, Berlin, 2026
Avatar for Andy Polaine apolaine
0
120
2026/8/20　Polaris15周年イベント 『共創の場をつくる』 〜 誰もが『心地よく暮らし、心地よくはたらく』ことを選択できる社会へ 〜 関係性から地域をつくりなおす共創の土壌づくり 〜リビングラボの事例を通じて〜
Avatar for Kimura Atsunobu a2k
0
100
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
Avatar for NishaMe nishame
1
1.6k
信頼をデザインし、ブランドで市場を拓く。/ Designship2026
Avatar for Assured Inc. assuredjp
PRO
0
220
noteらしさを織り込むハーネスエンジニアリング
Avatar for uto usui uto
0
2.2k
From Desktop to Spatial Interfaces UX Design Implications of Evolving Interaction Paradigms
Avatar for h.crane hcrane
0
110
Rondo 1 Minute Short Storyboard
Avatar for Rachel Poon rezaline
0
110
Look Dev Meetup #50
Avatar for Baku Hashimoto baku89
1
520
SERVICE PAMPHLET
Avatar for M-HAND,Inc. mhand01
0
5.6k
JBUG大阪#9_登壇資料_引き継ぎで困らないためのBacklogWikiの整え方_ミスと属人化を防ぐために、 “次の人が動ける状態”をどう残すか
Avatar for Beeworks Marketing Design webnaut
2
290
言幹と言葉（Stems & Leaves）
Avatar for 加来幸樹 SIGNCOSIGN kakukoki
0
240
分裂するデザイン、取り残される空間—インクルーシブデザインスタジオが建築をやる理由
Avatar for インクルーシブデザインスタジオCULUMU culumu
0
150

Featured

See All Featured
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
142
7.7k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
7k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
18k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
5
800
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1369
210k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k

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