This presentation describes how you can update your design flow to a more agile version. An agile design flow help you create an inner structure that prevents your UI design from generating design debt and bugs.

1. 2018.6.29 DevLOVE Atomic Design UI

2. YUSUKE GOTO
https://ygoto3.com/
@ygoto3_

5. Atomic Design
https://www.amazon.co.jp/dp/477419705X

9. Plan
Do
Check
Action

10. Plan
Check
Action Do

11. Plan
Check
Action Do

12. Do

13. Do

14. Do

19. https://dribbble.com/shots/1218034-Ui-Sketchhttps://www.pexels.com/photo/abstract-business-code-coder-270348/

20. https://dribbble.com/shots/1218034-Ui-Sketchhttps://www.pexels.com/photo/abstract-business-code-coder-270348/

22. https://devrant.com/rants/412300/code-formatting-is-important-when-its-not-too-long

23. https://devrant.com/rants/412300/code-formatting-is-important-when-its-not-too-long

24. https://devrant.com/rants/412300/code-formatting-is-important-when-its-not-too-long

25. https://pixabay.com/en/games-children-child-girl-toys-2801332/

26. https://pixabay.com/en/blocks-child-toy-education-game-503109/

27. https://pixabay.com/en/burden-heavy-man-overworked-people-1296754/

28. https://pixabay.com/en/freedom-silhouette-woman-back-light-2053281/

29.
Wikipedia
https://ja.wikipedia.org/wiki/
%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%8
2%B0_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)

30.
Wikipedia
https://ja.wikipedia.org/wiki/
%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%8
2%B0_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)

31. https://dribbble.com/shots/1218034-Ui-Sketchhttps://www.pexels.com/photo/abstract-business-code-coder-270348/

33. https://www.youtube.com/watch?v=Ai6PEagQpAs

34. https://www.youtube.com/watch?v=Ai6PEagQpAs

35. https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/

36. https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/

37. https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/

38. https://pixabay.com/en/burden-heavy-man-overworked-people-1296754/

39. https://pixabay.com/en/freedom-silhouette-woman-back-light-2053281/

40. https://www.websitedesign.co.uk/ordering-layers-in-photoshop/

41. https://www.websitedesign.co.uk/ordering-layers-in-photoshop/

42. https://www.websitedesign.co.uk/ordering-layers-in-photoshop/

56. https://www.amazon.co.jp/dp/4763131206

57. http://bradfrost.com/blog/post/atomic-design-book/

59. Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/

60. Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/

62. Pages
Templates
Organisms
Molecules
Atoms

63. Pages
Templates
Organisms
Molecules
Atoms

64. Pages
Templates
Organisms
Molecules
Atoms

65. Pages
Templates
Organisms
Molecules
Atoms

66. Pages
Templates
Organisms
Molecules
Atoms

67. Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

68.
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

69.
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

70. Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

71. Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

72. Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

73. Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

74. Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

75. Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

76. Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

77. Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

78.
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

79.
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

80.
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

81. Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

116. Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

117. Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

118. Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels

124. Organism A
Organism B
Organism D
Organism E
Organism C
Template A

125. Organism A
Organism B
Organism D
Organism E
Organism C
Organism A
Organism B
Organism C
Organism E
Organism D
Template A Template B

126. Organism A
Organism B
Organism D
Organism E
Organism C
Organism A
Organism B
Organism C
Organism E
Organism D
Template A Template B

130. Organism A
Organism B
Organism E
Organism C
Template A

131. Organism A
Organism B
Organism E
Organism C
Template A

132. Organism A
Organism B
Organism E
Organism C
Template A
Organism A
Organism B
Organism E
Organism C
Template A

161.
https://www.amebaownd.com/

162.
https://www.amebaownd.com/

189. https://sketchapp.com/docs/symbols/editing-symbols/

190. https://sketchapp.com/docs/symbols/editing-symbols/

191. https://sketchapp.com/docs/symbols/nested-symbols/

192. https://sketchapp.com/docs/symbols/nested-symbols/

193. https://sketchapp.com/docs/symbols/nested-symbols/

194. https://sketchapp.com/docs/symbols/nested-symbols/

195. https://sketchapp.com/docs/symbols/nested-symbols/

201. https://storybook.js.org/

218. https://blog.nagisa-inc.jp/archives/3459

223.
Interface Inventory

226. https://www.wantedly.com/companies/abema/post_articles/53312

233. Atomic Design
https://www.amazon.co.jp/dp/477419705X

235. YUSUKE GOTO
https://ygoto3.com/
@ygoto3_