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
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
160
セブンデックス カルチャーブック
sevendex
0
1.7k
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
150
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
210
Dive Deep into Communication
yomtsu
0
210
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
570
Dinosaur Mayhem
storyartist
0
140
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
370
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
510
Featured
See All Featured
BBQ
matthewcrist
86
9.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
It's Worth the Effort
3n
184
28k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Transcript
Farmnote, Inc How to use Atomic design Atomic design ͷӡ༻ํ๏
גࣜձࣾ ϑΝʔϜϊʔτ σβΠφʔΔϓϩάϥϚ ੁݪ ଇ ϑϨʔϜϫʔΫΛઃܭ͢Δͷͱ ΠϯλϥΫγϣϯͷ࣮͕ಘҙͰ͢ɻ σβΠϯͦΕͳΓʹΓ·͢
ڇʹηϯαʔΛ͚ͭͯεϚϗʹൃΛ௨ͨ͠Γ ཧɾੳΛ͢ΔͨΊͷαʔϏεΛ࡞ͬͯΔձࣾͰ͢ɻ
զ͕ࣾʹઐۀͷσβΠφʔ͕͓Βͣɺ ݱࡏ͕݉ۀσβΠφʔΛ͓ͯ͠Γ·͢
ڇͷࣄશવΘ͔ΒΜ
ίʔυॻ͔ͶͳΒΜ
͕࣌ؒͨΓΜ
्ҩͱϓϩάϥϚʹ σβΠϯͤ͞Ε͍͍ ͦ͏ͩʂʂʂ
Atomic Design
None
ͲΜͳײ͡Ͱ࡞͍ͬͯ Δͷ͔
͜ͷลΓΛσβΠφʔ ͕࡞ΓࠐΉ
͜ͷลΓͷୟ͖Λ ्ҩʹ࡞ͬͯΒ͏
σβΠφʔ্͕͛ Δ
࣮ࡍʹίʔυʹམͱͤΔͷʁ
ϓϩάϥϚͱσβΠφͰ ཻઃܭͷண؟͕ҧ ͏ͷͰٞ ཻΛௐ͢Δ
࣮ࡍʹ࡞Δͱཻ͕ͣΕͨΓ͢ ΔͷͰɺ୭Ͱ͍͍ͷͰɺඞͣ σβΠϯʹมߋΛөͤ͞Δ ҙʂ
࣮ࡍΔͱɺσβΠϯσʔλͷ ΓͱΓେม͡Όͳ͍ͷʁ
FigmaΛ͍·͢
Figma GoogleDriveͱSketchΛࠞͥͨΑ͏ͳπʔϧ
ͱΓ͋͑ͣ͜ΕͰσβΠϯʹ ใΛΕΔ͚ͩΓଓ͚Δ
ΈΜͳ͕ར༻Ͱ͖ͯ దʹϨΠΞτͯ ࣮͕αΫοͱऴΘΔ σβΠϯγεςϜ͕ग़དྷ্͕Δ ݁Ռ