V\u1eady ch\u00fang ta s\u1ebd \u201cl\u1eafp r\u00e1p\u201d m\u1ed9t giao di\u1ec7n theo t\u01b0 duy h\u00f3a h\u1ecdc nh\u01b0 th\u1ebf n\u00e0o?<\/p>\n
Atomic Design l\u00e0 g\u00ec?<\/h2>\n
Atomic Design l\u00e0 c\u00e1ch ph\u00e2n r\u00e3 m\u1ed9t giao di\u1ec7n ph\u1ee9c t\u1ea1p th\u00e0nh c\u00e1c th\u00e0nh ph\u1ea7n t\u1eeb r\u1ea5t nh\u1ecf \u0111\u1ebfn ho\u00e0n ch\u1ec9nh. Thay v\u00ec coi m\u1ed7i trang l\u00e0 m\u1ed9t thi\u1ebft k\u1ebf \u0111\u1ed9c l\u1eadp, ph\u01b0\u01a1ng ph\u00e1p n\u00e0y xem giao di\u1ec7n nh\u01b0 m\u1ed9t h\u1ec7 th\u1ed1ng g\u1ed3m nhi\u1ec1u component li\u00ean k\u1ebft v\u1edbi nhau.<\/p>\n
\u0110i\u1ec1u th\u00fa v\u1ecb l\u00e0 Frost kh\u00f4ng b\u1eaft \u0111\u1ea7u b\u1eb1ng quy tr\u00ecnh ho\u00e0n to\u00e0n m\u1edbi, m\u00e0 quan s\u00e1t c\u00e1ch nguy\u00ean t\u1eed (atoms) t\u1ea1o th\u00e0nh ph\u00e2n t\u1eed (molecules), r\u1ed3i nh\u1eefng ph\u00e2n t\u1eed ph\u1ee9c t\u1ea1p h\u01a1n t\u1ea1o n\u00ean sinh v\u1eadt (organisms). \u00d4ng \u0111\u01b0a tr\u1eadt t\u1ef1 \u0111\u00f3 v\u00e0o UI, gi\u00fap designer v\u00e0 developer c\u00f9ng nh\u00ecn v\u00e0o th\u00e0nh ph\u1ea7n \u1ea5y, g\u1ecdi n\u00f3 b\u1eb1ng m\u1ed9t t\u00ean chung v\u00e0 hi\u1ec3u n\u00f3 \u0111ang n\u1eb1m \u1edf \u0111\u00e2u trong to\u00e0n h\u1ec7 th\u1ed1ng.<\/p>\n
V\u00ec v\u1eady, giao di\u1ec7n gi\u1eef \u0111\u01b0\u1ee3c s\u1ef1 nh\u1ea5t qu\u00e1n nh\u01b0ng v\u1eabn linh ho\u1ea1t khi thay \u0111\u1ed5i. C\u00e1c component c\u0169ng d\u1ec5 \u0111\u01b0\u1ee3c d\u00f9ng l\u1ea1i \u1edf nhi\u1ec1u m\u00e0n h\u00ecnh. Khi c\u00f3 m\u00e0n h\u00ecnh m\u1edbi, ch\u00fang ta kh\u00f4ng ph\u1ea3i b\u1eaft \u0111\u1ea7u g\u1ea7n nh\u01b0 t\u1eeb \u0111\u1ea7u.<\/p>\n
Khi giao di\u1ec7n kh\u00f4ng c\u00f2n \u0111\u01b0\u1ee3c v\u1ebd theo t\u1eebng trang<\/h2>\n
Tri\u1ebft l\u00fd ch\u00ednh c\u1ee7a Atomic Design l\u00e0 thi\u1ebft k\u1ebf d\u1ef1a tr\u00ean c\u1ea5u ph\u1ea7n (component-driven design). Nh\u00e0 thi\u1ebft k\u1ebf kh\u00f4ng c\u00f2n m\u1edf Figma v\u00e0 v\u1ebd ri\u00eang t\u1eebng m\u00e0n h\u00ecnh t\u0129nh. H\u1ecd x\u00e2y t\u1eadp h\u1ee3p c\u00e1c component li\u00ean k\u1ebft ch\u1eb7t ch\u1ebd, sau \u0111\u00f3 gh\u00e9p ch\u00fang v\u00e0o nhi\u1ec1u m\u00e0n h\u00ecnh v\u00e0 b\u1ed1i c\u1ea3nh kh\u00e1c nhau.<\/p>\n
\u0110\u1ec3 h\u1ec7 th\u1ed1ng n\u00e0y kh\u00f4ng s\u1edbm \u201cv\u1ee1 tr\u1eadn\u201d, c\u00f3 3 nguy\u00ean l\u00fd:<\/p>\n
T\u00ednh k\u1ebf th\u1eeba tu\u1ea7n ti\u1ebfn (progressive inheritance):<\/strong> V\u1ec1 nguy\u00ean t\u1eafc, c\u1ea5p \u0111\u1ed9 cao h\u01a1n \u0111\u01b0\u1ee3c l\u1eafp ho\u00e0n to\u00e0n t\u1eeb nh\u1eefng c\u1ea5p \u0111\u1ed9 th\u1ea5p h\u01a1n. N\u1ebfu c\u00e1c component \u0111\u01b0\u1ee3c li\u00ean k\u1ebft \u0111\u00fang c\u00e1ch, vi\u1ec7c \u0111\u1ed5i m\u1ed9t thu\u1ed9c t\u00ednh \u1edf t\u1ea7ng atom s\u1ebd gi\u00fap nh\u1eefng t\u1ea7ng ph\u00eda tr\u00ean t\u1ef1 \u0111\u1ed9ng \u0111\u1ed3ng b\u1ed9 theo.<\/p>\n T\u00e1ch bi\u1ec7t c\u1ea5u tr\u00fac v\u00e0 n\u1ed9i dung:<\/strong> Template gi\u1eef ph\u1ea7n khung s\u01b0\u1eddn, c\u00f2n n\u1ed9i dung, d\u1eef li\u1ec7u v\u00e0 h\u00ecnh \u1ea3nh th\u1eadt \u0111\u01b0\u1ee3c \u0111\u01b0a v\u00e0o sau. H\u1ec7 th\u1ed1ng \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 th\u00edch \u1ee9ng v\u1edbi m\u1ecdi k\u1ecbch b\u1ea3n d\u1eef li\u1ec7u, k\u1ec3 c\u1ea3 nh\u1eefng tr\u01b0\u1eddng h\u1ee3p \u201ckh\u00f3 \u0111\u1ee1\u201d nh\u01b0 ti\u00eau \u0111\u1ec1 qu\u00e1 d\u00e0i hay \u1ea3nh c\u00f3 t\u1ef7 l\u1ec7 l\u1ea1.<\/p>\n Ng\u00f4n ng\u1eef chung:<\/strong> M\u1ee5c ti\u00eau l\u00e0 quy \u01b0\u1edbc t\u00ean g\u1ecdi v\u00e0 thu\u1ed9c t\u00ednh c\u1ee7a m\u1ed9t button trong Figma tr\u00f9ng kh\u1edbp v\u1edbi component t\u01b0\u01a1ng \u1ee9ng trong React hay Vue. \u0110i\u1ec1u n\u00e0y gi\u00fap designer v\u00e0 developer b\u1edbt ph\u1ea3i \u201cd\u1ecbch\u201d \u00fd c\u1ee7a nhau m\u1ed7i khi b\u00e0n giao.<\/p>\n N\u00f3i c\u00e1ch kh\u00e1c, Atomic Design kh\u00f4ng ch\u1ec9 l\u00e0 chuy\u1ec7n giao di\u1ec7n \u0111\u1eb9p hay x\u1ea5u. N\u00f3 c\u00f2n gi\u00fap c\u1ea3 \u0111\u1ed9i \u0111\u1ee9ng chung m\u1ed9t h\u1ec7 quy chi\u1ebfu, khi designer v\u00e0 developer d\u00f9ng c\u00f9ng t\u00ean g\u1ecdi, thu\u1ed9c t\u00ednh cho t\u1eebng component.<\/p>\n M\u00f4 h\u00ecnh Atomic Design g\u1ed3m 5 c\u1ea5p \u0111\u1ed9, \u0111i t\u1eeb tr\u1eebu t\u01b0\u1ee3ng \u0111\u1ebfn c\u1ee5 th\u1ec3: atoms, molecules, organisms, templates v\u00e0 pages<\/strong>.<\/p>\n Atom l\u00e0 ph\u1ea7n n\u1ec1n t\u1ea3ng c\u1ee7a h\u1ec7 th\u1ed1ng, kh\u00f4ng th\u1ec3 chia nh\u1ecf h\u01a1n m\u00e0 v\u1eabn gi\u1eef \u0111\u01b0\u1ee3c c\u00f4ng n\u0103ng thi\u1ebft k\u1ebf. Trong c\u00e1ch ph\u00e2n lo\u1ea1i n\u00e0y, atom g\u1ed3m nh\u1eefng y\u1ebfu t\u1ed1 phi v\u1eadt l\u00fd nh\u01b0 design token<\/strong> (m\u00e3 m\u00e0u, kho\u1ea3ng c\u00e1ch, \u0111\u1ed5 b\u00f3ng, bo g\u00f3c), c\u00f9ng c\u00e1c y\u1ebfu t\u1ed1 nh\u00ecn th\u1ea5y \u0111\u01b0\u1ee3c nh\u01b0 label, input, button v\u00e0 icon.<\/p>\n Atom \u0111\u1ee9ng ri\u00eang \u0111\u00f4i khi kh\u00e1\u2026 v\u00f4 d\u1ee5ng. Ch\u1eb3ng h\u1ea1n \u00f4 input tr\u1ed1ng v\u00e0 thi\u1ebfu label ch\u1ec9 d\u1eabn s\u1ebd kh\u00f4ng cho ng\u01b0\u1eddi d\u00f9ng bi\u1ebft h\u1ecd c\u1ea7n nh\u1eadp g\u00ec. Nh\u01b0ng c\u0169ng ch\u00ednh nh\u1eefng atom n\u00e0y l\u00e0 n\u01a1i \u0111\u1ecbnh h\u00ecnh to\u00e0n b\u1ed9 phong c\u00e1ch th\u1ecb gi\u00e1c (visual identity) c\u1ee7a s\u1ea3n ph\u1ea9m.<\/p>\n Khi c\u00e1c atom gh\u00e9p l\u1ea1i, ch\u00fang b\u1eaft \u0111\u1ea7u c\u00f3 m\u1ee5c \u0111\u00edch s\u1eed d\u1ee5ng r\u00f5 r\u00e0ng. Molecule th\u01b0\u1eddng ch\u1ec9 \u201cl\u00e0m t\u1ed1t m\u1ed9t vi\u1ec7c duy nh\u1ea5t\u201d (single responsibility), kh\u00f4ng \u00f4m nhi\u1ec1u ch\u1ee9c n\u0103ng c\u00f9ng l\u00fac.<\/p>\n Ch\u1eb3ng h\u1ea1n thanh t\u00ecm ki\u1ebfm \u0111\u01b0\u1ee3c t\u1ea1o t\u1eeb 3 atom: label gi\u00fap b\u1ea1n bi\u1ebft \u0111\u00e2y l\u00e0 g\u00ec, input nh\u1eadn t\u1eeb kh\u00f3a v\u00e0 button k\u00edch ho\u1ea1t l\u1ec7nh t\u00ecm. Ba ph\u1ea7n \u0111\u01a1n gi\u1ea3n gh\u00e9p l\u1ea1i th\u00e0nh m\u1ed9t ch\u1ee9c n\u0103ng ho\u00e0n ch\u1ec9nh. V\u00ec v\u1eady, molecule d\u1ec5 \u0111\u01b0\u1ee3c d\u00f9ng l\u1ea1i \u1edf nhi\u1ec1u m\u00e0n h\u00ecnh.<\/p>\n Organism l\u00e0 component l\u1edbn, ph\u1ee9c t\u1ea1p v\u00e0 c\u00f3 th\u1ec3 ho\u1ea1t \u0111\u1ed9ng nh\u01b0 m\u1ed9t c\u1ea5u ph\u1ea7n \u0111\u1ed9c l\u1eadp, th\u01b0\u1eddng \u0111\u1ea1i di\u1ec7n cho m\u1ed9t v\u00f9ng c\u1ee5 th\u1ec3 tr\u00ean giao di\u1ec7n. N\u00f3 c\u00f3 th\u1ec3 l\u1eb7p l\u1ea1i nhi\u1ec1u molecule gi\u1ed1ng nhau, nh\u01b0 m\u1ed9t Product Grid ch\u1ee9a 10 Product Card, ho\u1eb7c k\u1ebft h\u1ee3p nhi\u1ec1u molecule kh\u00e1c nhau, nh\u01b0 m\u1ed9t Header g\u1ed3m Logo, Menu \u0111i\u1ec1u h\u01b0\u1edbng v\u00e0 Thanh t\u00ecm ki\u1ebfm.<\/p>\n \u0110\u1ebfn c\u1ea5p \u0111\u1ed9 n\u00e0y, h\u1ec7 th\u1ed1ng r\u1eddi kh\u1ecfi ph\u00e9p \u1ea9n d\u1ee5 h\u00f3a h\u1ecdc v\u00e0 b\u01b0\u1edbc v\u00e0o ng\u00f4n ng\u1eef thi\u1ebft k\u1ebf th\u1ef1c t\u1ebf. Template l\u00e0 m\u1ed9t khung x\u01b0\u01a1ng ch\u01b0a c\u00f3 d\u1eef li\u1ec7u th\u1eadt, quy \u0111\u1ecbnh c\u00e1ch ph\u00e2n b\u1ed5 th\u00f4ng tin tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n \u1ede c\u1ea5p template, b\u1ea1n c\u1ea7n x\u00e1c \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc \u1ea3nh, gi\u1edbi h\u1ea1n s\u1ed1 ch\u1eef v\u00e0 v\u1ecb tr\u00ed c\u00e1c kh\u1ed1i ch\u1ee9c n\u0103ng tr\u00ean t\u1eebng k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh. V\u00ec v\u1eady, c\u00e2u h\u1ecfi template c\u1ea7n tr\u1ea3 l\u1eddi kh\u00f4ng ph\u1ea3i \u201cn\u1ed9i dung \u1edf \u0111\u00e2y l\u00e0 g\u00ec\u201d, m\u00e0 l\u00e0 \u201ch\u1ec7 th\u1ed1ng s\u1ebd co gi\u00e3n ra sao khi n\u1ed9i dung thay \u0111\u1ed5i?\u201d<\/p>\n Page l\u00e0 c\u1ea5p \u0111\u1ed9 c\u1ee5 th\u1ec3 nh\u1ea5t, khi template \u0111\u01b0\u1ee3c \u0111\u1ed5 \u0111\u1ea7y d\u1eef li\u1ec7u th\u1eadt, ch\u1eb3ng h\u1ea1n t\u1eeb API hay CMS. \u0110\u00e2y c\u0169ng l\u00e0 l\u00fac b\u1ea1n th\u1eed giao di\u1ec7n b\u1eb1ng nh\u1eefng t\u00ecnh hu\u1ed1ng x\u1ea3y ra trong th\u1ef1c t\u1ebf.<\/p>\n M\u1ed9t ti\u00eau \u0111\u1ec1 s\u1ea3n ph\u1ea9m qu\u00e1 d\u00e0i c\u00f3 l\u00e0m tr\u00e0n d\u00f2ng? Gi\u1ecf h\u00e0ng tr\u1ed1ng s\u1ebd tr\u00f4ng th\u1ebf n\u00e0o so v\u1edbi gi\u1ecf h\u00e0ng \u0111\u1ea7y? B\u00ean c\u1ea1nh vi\u1ec7c ki\u1ec3m tra nh\u1eefng tr\u01b0\u1eddng h\u1ee3p n\u00e0y, page c\u00f2n l\u00e0 c\u1ea5p \u0111\u1ed9 \u0111\u1ec3 ch\u1ea1y A\/B testing v\u00e0 t\u1ed1i \u01b0u h\u00e0nh vi chuy\u1ec3n \u0111\u1ed5i tr\u00ean giao di\u1ec7n th\u1eadt.<\/p>\n \u0110\u1ec3 d\u1ec5 h\u00ecnh dung, ch\u00fang ta c\u00f3 th\u1ec3 th\u1eed ph\u00e2n r\u00e3 m\u1ed9t giao di\u1ec7n gi\u1ecf h\u00e0ng th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed theo \u0111\u00fang 5 c\u1ea5p \u0111\u1ed9 tr\u00ean.<\/p>\n \u1ede t\u1ea7ng atom l\u00e0 nh\u1eefng ph\u1ea7n nh\u1ecf nh\u1ea5t: icon th\u00f9ng r\u00e1c, n\u00fat n\u1ec1n \u0111\u1ecf, \u0111o\u1ea1n text hi\u1ec3n th\u1ecb gi\u00e1, \u1ea3nh s\u1ea3n ph\u1ea9m v\u00e0 nh\u00e3n t\u00ean s\u1ea3n ph\u1ea9m. Gh\u00e9p \u1ea3nh v\u1edbi t\u00ean, ta c\u00f3 molecule \u201cTh\u00f4ng tin s\u1ea3n ph\u1ea9m\u201d. N\u00fat tr\u1eeb, s\u1ed1 l\u01b0\u1ee3ng v\u00e0 n\u00fat c\u1ed9ng t\u1ea1o th\u00e0nh \u201cB\u1ed9 t\u0103ng gi\u1ea3m s\u1ed1 l\u01b0\u1ee3ng\u201d, c\u00f2n icon th\u00f9ng r\u00e1c n\u1eb1m trong n\u00fat \u0111\u1ecf tr\u1edf th\u00e0nh \u201cN\u00fat x\u00f3a nhanh\u201d.<\/p>\n Ba molecule n\u00e0y c\u1ed9ng v\u1edbi ph\u1ea7n gi\u00e1 ti\u1ec1n t\u1ea1o n\u00ean organism \u201cD\u00f2ng s\u1ea3n ph\u1ea9m trong gi\u1ecf h\u00e0ng\u201d, n\u01a1i x\u1eed l\u00fd vi\u1ec7c hi\u1ec3n th\u1ecb v\u00e0 ch\u1ec9nh s\u1eeda m\u1ed9t s\u1ea3n ph\u1ea9m. M\u1ed9t organism kh\u00e1c l\u00e0 \u201cB\u1ea3ng t\u00f3m t\u1eaft thanh to\u00e1n\u201d, d\u00f9ng \u0111\u1ec3 gom c\u00e1c d\u00f2ng t\u00ednh ph\u00ed v\u00e0 n\u00fat thanh to\u00e1n.<\/p>\n Template \u0111\u1eb7t hai organism \u0111\u00f3 v\u00e0o b\u1ed1 c\u1ee5c 2 c\u1ed9t: danh s\u00e1ch d\u00f2ng s\u1ea3n ph\u1ea9m n\u1eb1m b\u00ean tr\u00e1i, b\u1ea3ng t\u00f3m t\u1eaft n\u1eb1m b\u00ean ph\u1ea3i v\u00e0 \u0111\u01b0\u1ee3c gi\u1eef c\u1ed1 \u0111\u1ecbnh khi ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n trang. \u0110\u1ebfn c\u1ea5p page, h\u1ec7 th\u1ed1ng nh\u1eadn d\u1eef li\u1ec7u c\u1ee7a m\u1ed9t kh\u00e1ch h\u00e0ng c\u1ee5 th\u1ec3, g\u1ed3m \u0111\u00fang s\u1ea3n ph\u1ea9m h\u1ecd \u0111\u00e3 ch\u1ecdn, \u0111\u00fang s\u1ed1 l\u01b0\u1ee3ng v\u00e0 \u0111\u00fang t\u1ed5ng ti\u1ec1n, s\u1eb5n s\u00e0ng cho n\u00fat thanh to\u00e1n \u0111\u01b0\u1ee3c b\u1ea5m. T\u1eeb m\u1ed9t icon th\u00f9ng r\u00e1c \u0111\u1ebfn c\u1ea3 trang gi\u1ecf h\u00e0ng ho\u00e0n ch\u1ec9nh, \u0111\u00f3 l\u00e0 h\u00e0nh tr\u00ecnh l\u1eafp r\u00e1p c\u1ee7a Atomic Design.<\/p>\n T\u00e1i s\u1eed d\u1ee5ng:<\/strong> Nh\u1eefng ph\u1ea7n UI gi\u1ed1ng nhau kh\u00f4ng c\u1ea7n \u0111\u01b0\u1ee3c vi\u1ebft l\u1ea1i tr\u00ean t\u1eebng trang. \u0110i\u1ec1u n\u00e0y gi\u00fap gi\u1ea3m t\u1ed1i \u0111a c\u00e1c \u0111o\u1ea1n tr\u00f9ng l\u1eb7p. M\u00e3 ngu\u1ed3n c\u00f3 th\u1ec3 nh\u1eb9 h\u01a1n v\u00e0 trang t\u1ea3i nhanh h\u01a1n.<\/p>\n Gi\u1eef giao di\u1ec7n \u0111\u1ed3ng b\u1ed9:<\/strong> N\u1ebfu b\u1ea1n mu\u1ed1n \u0111\u1ed5i bo g\u00f3c c\u1ee7a m\u1ecdi button t\u1eeb vu\u00f4ng sang tr\u00f2n, b\u1ea1n ch\u1ec9 c\u1ea7n ch\u1ec9nh thu\u1ed9c t\u00ednh t\u01b0\u01a1ng \u1ee9ng \u1edf c\u1ea5p atom. Nh\u1eefng component ph\u00eda tr\u00ean s\u1eed d\u1ee5ng atom \u0111\u00f3 s\u1ebd \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt theo.<\/p>\n R\u00fat ng\u1eafn th\u1eddi gian ph\u00e1t tri\u1ec3n:<\/strong> Khi th\u01b0 vi\u1ec7n component \u0111\u00e3 \u0111\u1ea7y \u0111\u1ee7, m\u1ed9t t\u00ednh n\u0103ng m\u1edbi ch\u1ee7 y\u1ebfu c\u00f2n l\u00e0 vi\u1ec7c l\u1eafp gh\u00e9p c\u00e1c kh\u1ed1i lego c\u00f3 s\u1eb5n. C\u1ea3 \u0111\u1ed9i kh\u00f4ng c\u1ea7n thi\u1ebft k\u1ebf v\u00e0 l\u1eadp tr\u00ecnh l\u1ea1i t\u1eeb \u0111\u1ea7u.<\/p>\n B\u1ea3o tr\u00ec d\u1ec5 h\u01a1n:<\/strong> N\u1ebfu thanh t\u00ecm ki\u1ebfm g\u1eb7p l\u1ed7i, developer bi\u1ebft ngay c\u1ea7n ki\u1ec3m tra molecule SearchForm. H\u1ecd kh\u00f4ng ph\u1ea3i r\u00e0 so\u00e1t h\u00e0ng ngh\u00ecn d\u00f2ng code c\u1ee7a c\u1ea3 trang.<\/p>\n Thu h\u1eb9p kho\u1ea3ng c\u00e1ch gi\u1eefa design v\u00e0 code:<\/strong> Figma v\u00e0 Storybook \u0111\u01b0\u1ee3c t\u1ed5 ch\u1ee9c theo c\u00f9ng m\u1ed9t c\u1ea5u tr\u00fac v\u00e0 h\u1ec7 t\u00ean g\u1ecdi. V\u00ec v\u1eady designer v\u00e0 developer kh\u00f4ng c\u00f2n ph\u1ea3i \u201cn\u00f3i hai th\u1ee9 ti\u1ebfng\u201d.<\/p>\n Quy tr\u00ecnh th\u1ef1c t\u1ebf th\u01b0\u1eddng \u0111i qua 5 b\u01b0\u1edbc: UI audit, \u0111\u1ecbnh ngh\u0129a token, thi\u1ebft k\u1ebf v\u00e0 l\u1eadp tr\u00ecnh, vi\u1ebft t\u00e0i li\u1ec7u, sau c\u00f9ng l\u00e0 l\u1eafp gh\u00e9p v\u00e0 th\u1eed nghi\u1ec7m<\/strong>.<\/p>\n Ki\u1ec3m k\u00ea giao di\u1ec7n hi\u1ec7n c\u00f3:<\/strong> N\u1ebfu \u0111ang t\u1ed1i \u01b0u m\u1ed9t s\u1ea3n ph\u1ea9m c\u00f3 s\u1eb5n, b\u1ea1n c\u00f3 th\u1ec3 gom to\u00e0n b\u1ed9 button, icon, b\u1ea3ng m\u00e0u v\u00e0 font ch\u1eef \u0111ang t\u1ed3n t\u1ea1i v\u00e0o c\u00f9ng m\u1ed9t n\u01a1i. K\u1ebft qu\u1ea3 th\u01b0\u1eddng th\u1ea5y l\u00e0 15 s\u1eafc xanh, 20 ki\u1ec3u button kh\u00e1c nhau, \u0111\u1ee7 \u0111\u1ec3 c\u1ea3 \u0111\u1ed9i nh\u1eadn ra h\u1ec7 th\u1ed1ng c\u1ea7n \u0111\u01b0\u1ee3c d\u1ecdn d\u1eb9p \u0111\u1ebfn m\u1ee9c n\u00e0o.<\/p>\n \u0110\u1ecbnh ngh\u0129a design token:<\/strong> Nh\u1eefng th\u00f4ng s\u1ed1 n\u1ec1n t\u1ea3ng nh\u01b0 Thi\u1ebft k\u1ebf v\u00e0 l\u1eadp tr\u00ecnh song h\u00e0nh:<\/strong> Ph\u00eda Figma d\u1ef1ng component c\u00f9ng nh\u1eefng bi\u1ebfn th\u1ec3 c\u1ea7n thi\u1ebft. M\u1ed7i component c\u00f3 c\u00e1c tr\u1ea1ng th\u00e1i Default, Hover, Focus, Active, Disabled. Trong khi \u0111\u00f3 ph\u00eda code x\u00e2y component t\u01b0\u01a1ng \u1ee9ng, sao cho props kh\u1edbp v\u1edbi c\u00e1c l\u1ef1a ch\u1ecdn \u0111\u00e3 c\u00f3 trong thi\u1ebft k\u1ebf.<\/p>\n Ghi l\u1ea1i t\u00e0i li\u1ec7u h\u01b0\u1edbng d\u1eabn:<\/strong> Storybook d\u00e0nh cho developer, c\u00f2n Zeroheight ho\u1eb7c m\u1ed9t trang n\u1ed9i b\u1ed9 gi\u00fap designer tra c\u1ee9u c\u00e1ch d\u00f9ng. T\u00e0i li\u1ec7u c\u1ea7n tr\u1ea3 l\u1eddi \u0111\u01b0\u1ee3c nh\u1eefng c\u00e2u h\u1ecfi c\u1ee5 th\u1ec3 nh\u01b0 khi n\u00e0o d\u00f9ng Button Primary, khi n\u00e0o d\u00f9ng Button Secondary.<\/p>\n L\u1eafp gh\u00e9p v\u00e0 th\u1eed nghi\u1ec7m v\u1edbi d\u1eef li\u1ec7u th\u1eadt:<\/strong> \u0110\u1eebng ch\u1ec9 \u0111\u1eb7t nh\u1eefng d\u00f2ng ch\u1eef v\u1eeba v\u1eb7n hay h\u00ecnh \u1ea3nh c\u00f3 c\u00f9ng t\u1ef7 l\u1ec7 v\u00e0o template. B\u1ea1n n\u00ean th\u1eed c\u1ea3 ti\u00eau \u0111\u1ec1 si\u00eau d\u00e0i, \u1ea3nh c\u00f3 t\u1ef7 l\u1ec7 l\u1ea1 v\u00e0 nh\u1eefng d\u1eef li\u1ec7u bi\u00ean kh\u00e1c \u0111\u1ec3 bi\u1ebft h\u1ec7 th\u1ed1ng ch\u1ecbu \u0111\u01b0\u1ee3c \u0111\u1ebfn \u0111\u00e2u.<\/p>\n Atomic Design gi\u00fap vi\u1ec7c t\u1ed5 ch\u1ee9c giao di\u1ec7n r\u00f5 r\u00e0ng h\u01a1n, nh\u01b0ng trong th\u1ef1c t\u1ebf h\u1ec7 th\u1ed1ng n\u00e0y v\u1eabn c\u00f3 th\u1ec3 \u201cv\u1ee1 tr\u1eadn\u201d v\u00ec m\u1ed9t s\u1ed1 l\u00fd do.<\/p>\n \u0110\u1ed9i thi\u1ebft k\u1ebf v\u00e0 l\u1eadp tr\u00ecnh c\u00f3 th\u1ec3 c\u00e3i nhau kh\u00e1 l\u00e2u \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh m\u1ed9t Product Card l\u00e0 molecule hay organism. C\u00e1ch \u0111\u01a1n gi\u1ea3n l\u00e0 xem molecule nh\u01b0 m\u1ed9t th\u00e0nh ph\u1ea7n t\u1ed1i gi\u1ea3n, \u0111\u01a1n nhi\u1ec7m, kh\u00f4ng th\u1ec3 b\u00f3c t\u00e1ch th\u00eam m\u00e0 v\u1eabn gi\u1eef \u0111\u01b0\u1ee3c ngh\u0129a, trong khi organism l\u00e0 t\u1ed5 h\u1ee3p \u0111a nhi\u1ec7m v\u00e0 qu\u1ea3n l\u00fd m\u1ed9t v\u00f9ng giao di\u1ec7n c\u1ee5 th\u1ec3.<\/p>\n Tuy nhi\u00ean n\u1ebfu v\u1eabn kh\u00f3 ph\u00e2n \u0111\u1ecbnh, g\u1ecdi chung l\u00e0 \u201ccomponent\u201d v\u00e0 ph\u00e2n c\u1ea5p theo m\u1ee9c \u0111\u1ed9 l\u1ed3ng nhau c\u0169ng ch\u1eb3ng sao.<\/p>\n T\u1ea1o qu\u00e1 nhi\u1ec1u atom hay molecule cho nh\u1eefng ph\u1ea7n ch\u1ec9 xu\u1ea5t hi\u1ec7n \u0111\u00fang m\u1ed9t l\u1ea7n s\u1ebd khi\u1ebfn th\u01b0 vi\u1ec7n ng\u00e0y m\u1ed9t ph\u00ecnh to. \u0110i\u1ec1u n\u00e0y c\u0169ng l\u00e0m t\u0103ng t\u1ea3i nh\u1eadn th\u1ee9c cho th\u00e0nh vi\u00ean m\u1edbi, b\u1edfi h\u1ecd ph\u1ea3i ghi nh\u1edb nhi\u1ec1u component nh\u01b0ng kh\u00f4ng ph\u1ea3i c\u00e1i n\u00e0o c\u0169ng th\u1ef1c s\u1ef1 \u0111\u01b0\u1ee3c t\u00e1i s\u1eed d\u1ee5ng.<\/p>\n M\u1ed9t c\u00e1ch x\u1eed l\u00fd l\u00e0 t\u00e1i c\u1ea5u tr\u00fac \u0111\u00fang l\u00fac (just-in-time refactoring). B\u1ea1n kh\u00f4ng c\u1ea7n thi\u1ebft k\u1ebf h\u1ebft m\u1ecdi atom tr\u01b0\u1edbc khi d\u1ef1ng trang. C\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u t\u1eeb m\u1ed9t v\u00e0i page ch\u00ednh \u0111\u1ec3 quan s\u00e1t to\u00e0n b\u1ed9 giao di\u1ec7n, r\u1ed3i ph\u00e2n r\u00e3 ng\u01b0\u1ee3c nh\u1eefng ph\u1ea7n t\u1eed \u0111\u00e3 l\u1eb7p l\u1ea1i t\u1eeb 2-3 l\u1ea7n tr\u1edf l\u00ean.<\/p>\n Designer thay \u0111\u1ed5i giao di\u1ec7n trong Figma nh\u01b0ng qu\u00ean b\u00e1o developer, ho\u1eb7c developer t\u1ef1 s\u1eeda CSS \u0111\u1ec3 k\u1ecbp ti\u1ebfn \u0111\u1ed9. Sau nhi\u1ec1u l\u1ea7n nh\u01b0 v\u1eady, design system c\u00f3 th\u1ec3 d\u1ea7n \u201cl\u1ec7ch s\u00f3ng\u201d m\u00e0 kh\u00f4ng ai \u0111\u1ec3 \u00fd.<\/p>\n \u0110\u1ec3 h\u1ea1n ch\u1ebf t\u00ecnh tr\u1ea1ng n\u00e0y, \u0111\u1ed9i ng\u0169 n\u00ean c\u00f3 quy tr\u00ecnh duy\u1ec7t thay \u0111\u1ed5i \u1edf c\u1ea5p atom\/molecule gi\u1eefa Lead Designer v\u00e0 Lead Front-end Developer. B\u00ean c\u1ea1nh \u0111\u00f3, \u0111\u1ed9i ng\u0169 c\u00f3 th\u1ec3 t\u1eadn d\u1ee5ng Figma Variables xu\u1ea5t sang JSON \u0111\u1ec3 code t\u1ef1 n\u1ea1p c\u00e1c gi\u00e1 tr\u1ecb m\u00e0u s\u1eafc, kho\u1ea3ng c\u00e1ch m\u00e0 kh\u00f4ng c\u1ea7n g\u00f5 l\u1ea1i b\u1eb1ng tay.<\/p>\n Atomic Design kh\u00f4ng d\u1eebng \u1edf c\u00e1ch v\u1ebd giao di\u1ec7n. V\u1ec1 c\u01a1 b\u1ea3n, \u0111\u00e2y l\u00e0 m\u1ed9t t\u01b0 duy t\u1ed5 ch\u1ee9c h\u1ec7 th\u1ed1ng. N\u1ebfu c\u00e1c c\u1ea5p \u0111\u1ed9 \u0111\u01b0\u1ee3c li\u00ean k\u1ebft \u0111\u00fang, m\u1ed9t button hay \u00f4 input nh\u1ecf c\u00f3 th\u1ec3 l\u1edbn d\u1ea7n th\u00e0nh m\u1ed9t s\u1ea3n ph\u1ea9m s\u1ed1 v\u1eadn h\u00e0nh tr\u01a1n tru tr\u00ean m\u1ecdi k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh.<\/p>\n Mu\u1ed1n bi\u1ebft h\u1ec7 th\u1ed1ng c\u1ee7a m\u00ecnh \u0111\u00e3 \u201ckh\u1ecfe\u201d hay ch\u01b0a, h\u00e3y ki\u1ec3m tra xem t\u00ean component trong Figma c\u00f3 tr\u00f9ng v\u1edbi t\u00ean file trong code. Margin v\u00e0 padding c\u0169ng c\u1ea7n d\u00f9ng chung m\u1ed9t b\u1ed9 spacing token, thay v\u00ec m\u1ed7i n\u01a1i t\u1ef1 \u0111\u1eb7t m\u1ed9t con s\u1ed1 kh\u00e1c nhau. C\u00e1c button, \u00f4 input c\u1ea7n c\u00f3 \u0111\u1ee7 5 tr\u1ea1ng th\u00e1i Default, Hover, Focus, Active, Disabled. V\u00e0 quan tr\u1ecdng nh\u1ea5t, h\u1ec7 th\u1ed1ng \u0111\u00e3 \u0111\u01b0\u1ee3c th\u1eed v\u1edbi nh\u1eefng d\u1eef li\u1ec7u \u201ckh\u00f3 \u1edf\u201d nh\u01b0 t\u00ean s\u1ea3n ph\u1ea9m si\u00eau d\u00e0i ho\u1eb7c gi\u1ecf h\u00e0ng tr\u1ed1ng ch\u01b0a?<\/p>\n","protected":false},"excerpt":{"rendered":" T\u1eeb m\u1ed9t button nh\u1ecf \u0111\u1ebfn c\u1ea3 trang gi\u1ecf h\u00e0ng, giao di\u1ec7n s\u1ed1 c\u0169ng \u0111ang \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng theo c\u00e1ch nguy\u00ean t\u1eed t\u1ea1o th\u00e0nh v\u1eadt ch\u1ea5t. B\u1ea1n \u0111\u00e3 bao gi\u1edd m\u1edf file Figma v\u00e0 th\u1ea5y hai button c\u00f3 c\u00f9ng ch\u1ee9c n\u0103ng, nh\u01b0ng m\u1ed7i c\u00e1i l\u1ea1i d\u00f9ng m\u00e0u s\u1eafc v\u00e0 ki\u1ec3u bo g\u00f3c kh\u00e1c nhau? B\u1ea3ng m\u00e0u […]<\/p>\n","protected":false},"author":1,"featured_media":4917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,36],"tags":[49],"class_list":["post-4916","post","type-post","status-publish","format-standard","has-post-thumbnail","category-cro","category-tam-ly-hoc-chuyen-doi","tag-tam-ly-hoc-thi-giac"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/posts\/4916","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/comments?post=4916"}],"version-history":[{"count":4,"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/posts\/4916\/revisions"}],"predecessor-version":[{"id":4927,"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/posts\/4916\/revisions\/4927"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/media\/4917"}],"wp:attachment":[{"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/media?parent=4916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/categories?post=4916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/tags?post=4916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Danh](\"https:\/\/vbaseup.com\/kien-thuc\/wp-content\/uploads\/2026\/09\/templates-pages-users-example.png\")
5 c\u1ea5p \u0111\u1ed9 c\u1ee7a Atomic Design<\/h2>\n
![\"S\u01a1](\"https:\/\/vbaseup.com\/kien-thuc\/wp-content\/uploads\/2026\/09\/atomic-design-process.png\")
Atoms (nguy\u00ean t\u1eed)<\/h3>\n
Molecules (ph\u00e2n t\u1eed)<\/h3>\n
![\"Bi\u1ec3u](\"https:\/\/vbaseup.com\/kien-thuc\/wp-content\/uploads\/2026\/09\/molecule-search-form.png\")
Organisms (sinh v\u1eadt)<\/h3>\n
![\"Header](\"https:\/\/vbaseup.com\/kien-thuc\/wp-content\/uploads\/2026\/09\/organism-header.png\")
Templates (b\u1ea3n m\u1eabu)<\/h3>\n
Pages (trang)<\/h3>\n
R\u00e1p th\u1eed m\u1ed9t trang gi\u1ecf h\u00e0ng<\/h2>\n
Atomic Design gi\u00fap g\u00ec cho m\u1ed9t d\u1ef1 \u00e1n s\u1ed1?<\/h2>\n
B\u1eaft \u0111\u1ea7u x\u00e2y design system t\u1eeb \u0111\u00e2u?<\/h2>\n
![\"B\u1ea3ng](\"https:\/\/vbaseup.com\/kien-thuc\/wp-content\/uploads\/2026\/09\/pnc-buttons.png\")
color-primary<\/code>, spacing-sm<\/code> hay font-body-regular<\/code> \u0111\u01b0\u1ee3c \u0111\u1eb7t t\u00ean d\u01b0\u1edbi d\u1ea1ng bi\u1ebfn. \u0110i\u1ec1u n\u00e0y gi\u00fap m\u00e0u s\u1eafc, kho\u1ea3ng c\u00e1ch v\u00e0 font ch\u1eef \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng \u0111\u1ed3ng b\u1ed9 trong to\u00e0n h\u1ec7 th\u1ed1ng.<\/p>\nNh\u1eefng l\u00fac Atomic Design d\u1ec5 \u201cv\u1ee1 tr\u1eadn\u201d<\/h2>\n
Molecule hay organism?<\/h3>\n
Chia nh\u1ecf qu\u00e1 m\u1ee9c<\/h3>\n
Design v\u00e0 code l\u1ec7ch pha<\/h3>\n
M\u1ed9t h\u1ec7 th\u1ed1ng Atomic Design \u201ckh\u1ecfe m\u1ea1nh\u201d tr\u00f4ng nh\u01b0 th\u1ebf n\u00e0o?<\/h2>\n