Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AtomicDesignの運用方法
Search
takanori sugawara
December 18, 2017
Design
0
150
AtomicDesignの運用方法
AtomicDesignを運用する上気にしていることなどをまとめてみました
takanori sugawara
December 18, 2017
Tweet
Share
More Decks by takanori sugawara
See All by takanori sugawara
人によっては_明日から使えるFigmaテクニック
ts020
1
820
VueFes.pdf
ts020
5
9.7k
Other Decks in Design
See All in Design
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
370
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
140
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
160
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
430
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
820
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.2k
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
610
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
330
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
120
Les petites aventures de CSS, saison 2025
goetter
3
3.9k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
GraphQLとの向き合い方2022年版
quramy
44
13k
Being A Developer After 40
akosma
89
590k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
How to Ace a Technical Interview
jacobian
276
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Transcript
Farmnote, Inc How to use Atomic design Atomic design ͷӡ༻ํ๏
גࣜձࣾ ϑΝʔϜϊʔτ σβΠφʔΔϓϩάϥϚ ੁݪ ଇ ϑϨʔϜϫʔΫΛઃܭ͢Δͷͱ ΠϯλϥΫγϣϯͷ࣮͕ಘҙͰ͢ɻ σβΠϯͦΕͳΓʹΓ·͢
ڇʹηϯαʔΛ͚ͭͯεϚϗʹൃΛ௨ͨ͠Γ ཧɾੳΛ͢ΔͨΊͷαʔϏεΛ࡞ͬͯΔձࣾͰ͢ɻ
զ͕ࣾʹઐۀͷσβΠφʔ͕͓Βͣɺ ݱࡏ͕݉ۀσβΠφʔΛ͓ͯ͠Γ·͢
ڇͷࣄશવΘ͔ΒΜ
ίʔυॻ͔ͶͳΒΜ
͕࣌ؒͨΓΜ
्ҩͱϓϩάϥϚʹ σβΠϯͤ͞Ε͍͍ ͦ͏ͩʂʂʂ
Atomic Design
None
ͲΜͳײ͡Ͱ࡞͍ͬͯ Δͷ͔
͜ͷลΓΛσβΠφʔ ͕࡞ΓࠐΉ
͜ͷลΓͷୟ͖Λ ्ҩʹ࡞ͬͯΒ͏
σβΠφʔ্͕͛ Δ
࣮ࡍʹίʔυʹམͱͤΔͷʁ
ϓϩάϥϚͱσβΠφͰ ཻઃܭͷண؟͕ҧ ͏ͷͰٞ ཻΛௐ͢Δ
࣮ࡍʹ࡞Δͱཻ͕ͣΕͨΓ͢ ΔͷͰɺ୭Ͱ͍͍ͷͰɺඞͣ σβΠϯʹมߋΛөͤ͞Δ ҙʂ
࣮ࡍΔͱɺσβΠϯσʔλͷ ΓͱΓେม͡Όͳ͍ͷʁ
FigmaΛ͍·͢
Figma GoogleDriveͱSketchΛࠞͥͨΑ͏ͳπʔϧ
ͱΓ͋͑ͣ͜ΕͰσβΠϯʹ ใΛΕΔ͚ͩΓଓ͚Δ
ΈΜͳ͕ར༻Ͱ͖ͯ దʹϨΠΞτͯ ࣮͕αΫοͱऴΘΔ σβΠϯγεςϜ͕ग़དྷ্͕Δ ݁Ռ