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
0
180

 AtomicDesignの運用方法

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

Avatar for takanori sugawara

takanori sugawara

December 18, 2017
Tweet

More Decks by takanori sugawara

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

Other Decks in Design

See All in Design
セブンデックス プロジェクト事例 / innovation Scenes
Avatar for セブンデックス sevendex
1
280
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
1M
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.7k
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
580
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
170
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
7
9.4k
Diverse Design Team Deck
Avatar for Diverse diverse
0
1k
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
250
maki setoguchi
Avatar for Maki / Web Designer maki_setoguchi
0
720
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
240
AIエージェントが対話的なUIを返す！MCP−UIで変わるユーザ体験
Avatar for daitasu daitasu
1
170
結びながら、ひらく - にじむ境界のデザイン
Avatar for Hiroki Tani hilokifigma
3
1.5k

Featured

See All Featured
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
87
How to make the Groovebox
Avatar for あそなす asonas
2
2k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
150
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
140
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
150
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.5k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
240
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
86

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