Designer có cần biết code không? Mức đủ dùng cho UI, web

Bài dành cho designer đồ hoạ, UI/UX, web và motion đang phân vân nên học code tới đâu: mức HTML/CSS đủ để làm việc với developer, một card dựng thật ở 390 px và 1280 px, hai công cụ ColorME giúp trao đổi bằng con số và lộ trình học 4 tuần.

Designer có cần biết code không? Không bắt buộc phải viết code như lập trình viên. Nhưng nếu bạn thiết kế giao diện web hay app, nên đọc hiểu HTML và CSS ở mức "nói chung một ngôn ngữ" với developer: box model, đơn vị px và rem, flex và grid, breakpoint, design token và cách đọc thông số trong Figma Dev Mode. Graphic designer làm in ấn gần như không cần code; web designer tự dựng trang thì cần nhiều hơn.

Bài này đi qua mức "đủ dùng" đó bằng một ví dụ thật: một card workshop do ColorME dựng bằng HTML/CSS, đặt cạnh bản thông số, chạy ở bề ngang 390 px và 1280 px. Muốn thử con số ngay khi đọc, mở công cụ Tính lưới cột của ColorME để lấy đoạn CSS Grid từ số cột, gutter và lề, hoặc Kiểm tra tương phản để xem màu chữ có đủ dễ đọc.

Mức code "đủ dùng" theo bốn vai trò thường gặp. Bảng do ColorME tổng hợp theo đầu việc của từng vai trò.

Designer có cần biết code không: trả lời theo từng vai trò

Câu hỏi này hay bị trả lời theo kiểu "có" hoặc "không" cho mọi người, trong khi thứ bạn giao ra mới quyết định bạn cần bao nhiêu code. Cách nghĩ thực tế hơn: code nào giúp bản thiết kế của bạn được dựng đúng, nhanh, và ít phải sửa đi sửa lại?

Graphic designer: biết đủ để không làm hỏng file web

Nếu việc chính là logo, bộ nhận diện, ấn phẩm in và ảnh mạng xã hội, bạn không cần học lập trình. Thứ đáng biết là ảnh cho web khác ảnh cho in (pixel, hệ màu RGB, dung lượng), và đọc được một đoạn HTML ngắn khi cần sửa một dòng chữ trong email marketing hay banner. Bảng mã màu HTML/CSS là điểm bắt đầu nhẹ nhàng.

UI/UX designer: đọc hiểu là đủ, viết sản phẩm là việc của dev

Đây là nhóm hỏi câu "ui designer có cần biết code không" nhiều nhất. Bạn không cần tự viết ứng dụng, nhưng cần hiểu vật liệu bạn đang thiết kế: một nút bấm trong Figma sẽ thành một khối có padding, viền, bo góc và cỡ chữ trong CSS. Hiểu điều đó giúp bạn vẽ thứ dựng được, đặt tên token đúng, ghi chú trạng thái đủ, và đọc được khi developer nói "cái này phải viết riêng". Nếu đang bắt đầu, đọc thêm UI/UX là gì và lộ trình học Figma.

Web designer: viết được HTML và CSS

Web designer thường vừa thiết kế vừa dựng, bằng Webflow, WordPress, Framer hoặc code tay. Ở vai trò này, HTML và CSS là kỹ năng làm việc hằng ngày: bố cục co giãn, sửa một khoảng cách bị lệch, thêm một breakpoint. JavaScript ở mức đọc và sửa được đoạn có sẵn là đủ cho phần lớn trang giới thiệu, landing page hay portfolio.

Motion designer: expression và giới hạn của màn hình

Trong After Effects, expression là đoạn mã tự động hoá chuyển động (lặp, nảy, liên kết thuộc tính). Trang tra cứu của Adobe ghi rõ bạn dùng "the After Effects expression elements along with standard JavaScript elements" để viết expression (Adobe, Expression language reference). Khi animation đi vào web hay app, bạn cần thêm một hiểu biết nữa: chuyển động nào chạy nhẹ, chuyển động nào khiến trang giật trên máy yếu.

Mức "đủ dùng" để làm việc với developer

Sáu khái niệm dưới đây chiếm phần lớn các cuộc trao đổi giữa designer và developer. Các mô tả về CSS lấy theo tài liệu MDN của Mozilla.

1. Box model và box-sizing

Trên web, mỗi phần tử là một chiếc hộp gồm bốn lớp: nội dung (content), đệm bên trong (padding), viền (border) và khoảng cách ra ngoài (margin). MDN ghi rõ trình duyệt mặc định dùng box model chuẩn (MDN, The box model). Ở chế độ mặc định content-box, width chỉ tính phần nội dung; MDN lấy ví dụ một hộp khai báo width 350px với viền 10px sẽ rộng thật 370px. Với border-box, width đã gồm padding và viền nên hộp rộng đúng 350px (MDN, box-sizing). Đây là lý do nhiều dự án đặt border-box cho mọi phần tử: con số trên bản thiết kế khớp với con số trên màn hình.

Bốn lớp của một hộp trên web, và cùng khai báo width: 350px; border: 10px cho hai kết quả khác nhau. Ví dụ theo MDN, ColorME vẽ lại đúng tỉ lệ.

2. Khoảng cách và cỡ chữ: px hay rem

Trong Figma mọi thứ là px. Trong CSS, developer hay đổi sang rem: theo MDN, rem bằng cỡ chữ của phần tử gốc (thường là thẻ html), và "a common browser default is 16px". MDN cũng khuyên dùng đơn vị tương đối như em, rem cho cỡ chữ vì đơn vị tuyệt đối không co giãn theo cài đặt của người dùng (MDN, length). Với cỡ gốc 16px, phép đổi rất gọn:

Thói quen nhỏ giúp ích nhiều: dùng bước khoảng cách theo bội số của 4 hoặc 8 (4, 8, 12, 16, 24, 32). Dev đổi sang rem dễ, và cả trang có nhịp đều. Cỡ chữ cũng vậy, xem cách dựng thang cỡ chữ (type scale).

3. Flex, grid và gap

Auto layout trong Figma gần như là flexbox: xếp các phần tử thành hàng hoặc cột, có khoảng cách giữa chúng. Layout guide dạng cột gần với CSS Grid. Thuộc tính gap trong CSS chính là gutter: MDN mô tả gap "sets the gaps (also called gutters) between rows and columns" cho flex, grid và multi-column (MDN, gap). Nếu bạn đã quen auto layout và lưới 12 cột cho web, 4 cột cho mobile, bạn đã hiểu được nửa cách dev dựng bố cục.

4. Responsive và breakpoint

MDN định nghĩa breakpoint là những điểm mà media query bắt đầu có hiệu lực và bố cục thay đổi. Cách làm phổ biến là dựng một cột cho màn hẹp trước, rồi thêm cột khi màn đủ rộng, gọi là mobile first; MDN cũng khuyên đặt breakpoint bằng đơn vị tương đối thay vì kích thước của một thiết bị cụ thể (MDN, Responsive design). Trang còn cần thẻ meta viewport, dạng khuyến nghị là width=device-width (MDN, viewport meta). Với designer, điều này có nghĩa: hãy vẽ ít nhất khung nhỏ nhất và khung lớn nhất, và nói rõ bố cục đổi ở đâu (xem breakpoint trong thư viện thuật ngữ).

5. Design token và biến CSS

Design token là tên gọi chung cho một quyết định thiết kế: màu nhấn, khoảng cách bước 3, bo góc lớn. Trong Figma, bạn lưu chúng thành Variables; trong CSS, developer lưu thành custom property (biến CSS). MDN giải thích custom property cho phép định nghĩa một giá trị ở một chỗ rồi dùng lại ở nhiều chỗ, và tên như --main-text-color dễ hiểu hơn một mã hex (MDN, Using CSS custom properties). Khi hai bên dùng cùng một tên, đổi màu thương hiệu chỉ còn là sửa một dòng. Đọc thêm về design system.

Cùng một tên token trong Figma Variables và trong CSS. Quy đổi rem theo cỡ chữ gốc 16px. Bảng do ColorME dựng từ card mẫu.

6. Đọc Figma Dev Mode hoặc bảng Inspect

Theo trang trợ giúp của Figma, Dev Mode là "a developer-focused workspace for inspecting designs, viewing properties and generated code, downloading assets, comparing changes, and managing design handoff"; mở bằng nút Dev Mode hoặc phím Shift + D trong một file thiết kế (Figma, Guide to Dev Mode). Cùng trang ghi Dev Mode có trên các gói Professional, Education, Organization, Government và Enterprise. Designer nên tự mở chế độ này một lần trên file của chính bạn: nếu số đo lẻ (13px, 17px), layer tên "Frame 482" hay màu không dùng token, developer sẽ thấy đúng như vậy. Tham khảo thêm Dev Mode trong thư viện thuật ngữ ColorME.

Demo: một card từ bản thiết kế tới code chạy thật

Để thấy các khái niệm trên khớp với nhau thế nào, ColorME dựng một card cho Xưởng Giấy Mực, một xưởng in và làm sổ giả định ở Hà Nội. Card gồm ảnh tỉ lệ 4:3, nhãn loại workshop, tiêu đề, dòng ngày giờ, số chỗ còn lại và nút "Giữ chỗ". Toàn bộ là HTML và CSS thuần, không thư viện.

Bảy con số trên card (bo góc, đệm, tỉ lệ ảnh, nhãn, tiêu đề, chữ phụ, nút) và đúng dòng CSS vẽ ra chúng. Card mẫu của ColorME. Ảnh trong card: Vitalii Abakumov / Unsplash.

Vài điểm đáng chú ý khi đọc hình trên:

• Bo góc lồng nhau: card bo 22px, đệm 12px, nên ảnh bên trong bo 10px (22 = 10 + 12). Nếu ảnh cũng bo 22px, góc trong sẽ trông dày và lệch.
• Ảnh khung cố định: aspect-ratio 4/3 cùng object-fit: cover giữ mọi ảnh trong một khung, dù ảnh gốc dọc hay ngang.
• Nút cao tối thiểu 44px (2.75rem) để dễ bấm bằng ngón tay; min-height cho phép nút cao thêm nếu chữ dài.
• Hàng cuối đẩy xuống đáy bằng margin-top: auto, nên nút "Giữ chỗ" ở các card trong một hàng luôn thẳng nhau dù tiêu đề dài ngắn khác nhau.

Phần bố cục chỉ cần ba dòng quan trọng: một cột mặc định, hai cột từ 48rem (768px) và ba cột từ 64rem (1024px). Hình dưới là cùng một file chụp thật ở hai bề ngang:

Cùng một trang HTML/CSS: 1 cột ở 390 px, 3 cột ở 1280 px. Trang mẫu của ColorME (thương hiệu giả định). Ảnh: Vitalii Abakumov / Unsplash, Lucas George Wendt / Unsplash, Buddy AN / Unsplash.

Điều designer rút ra từ demo: bản vẽ của bạn càng đặt trên token và lưới, đoạn CSS càng ngắn. Card này không có con số "lạ" nào; mọi khoảng cách đều nằm trong thang 4, 8, 12, 16, 24.

Cái gì nhanh, cái gì nên hỏi dev trước

Biết code ở mức đọc hiểu giúp bạn đoán được chi phí của một ý tưởng trước khi trình khách. Không phải để từ bỏ ý tưởng khó, mà để hỏi sớm và chừa thời gian.

Những thứ thường dựng nhanh, và những thứ nên hỏi dev trước khi chốt. Bảng do ColorME tổng hợp, mang tính định hướng: mức độ thật tuỳ dự án.

Trường hợp gây tranh cãi nhiều nhất là chữ dài ngắn không đoán trước. Trong mockup, tiêu đề card vừa một dòng; ngoài đời, dữ liệu thật có thể dài ba dòng hoặc có tên riêng rất dài. Hãy vẽ thêm một phiên bản "chữ dài" và một phiên bản "thiếu ảnh" cho mỗi component quan trọng, developer sẽ biết khung cần co giãn ra sao.

Hai công cụ ColorME giúp nói chuyện bằng con số

Tính lưới cột: từ lưới trong Figma ra đoạn CSS Grid

Trang Tính lưới cột ghi ở phần câu hỏi thường gặp: "Miễn phí, không cần đăng nhập và chạy ngay trên trình duyệt." Ở lần kiểm tra ngày 03/11/2026 (chưa đăng nhập), chọn mẫu Laptop 1280 cho kết quả mỗi cột rộng 74px, vùng nội dung 1.152px, 12 cột, gutter 24px và lề 64px mỗi bên. Bên dưới, công cụ hiện đoạn CSS Grid (repeat(12, minmax(0, 1fr)) với column-gap 24px) và thông số Layout guide để nhập lại vào Figma. Đổi sang khung 390px, 4 cột, gutter 16 và lề 16 thì mỗi cột rộng 77,5px. Công cụ không tạo code cho cả trang; nó chỉ cho phần lưới.

Mẫu Laptop 1280 (12 cột, gutter 24, lề 64) và đoạn CSS Grid đi kèm. Ảnh chụp màn hình công cụ của ColorME, chưa đăng nhập, ngày 03/11/2026.

Kiểm tra tương phản: chữ phụ màu xám có đủ dễ đọc

Chữ phụ màu xám là chỗ hay bị bỏ sót khi bàn giao. Trang Kiểm tra tương phản ghi: "Miễn phí, không cần đăng nhập và chạy ngay trên trình duyệt máy tính lẫn điện thoại." Nhập màu chữ #555B66 và nền #FFFFFF của dòng ngày giờ trong card, công cụ cho tỉ lệ 6.83 : 1, đạt AA cho cả chữ thường và chữ lớn, chưa đạt AAA cho chữ thường, và gợi ý màu #525863 để đạt AAA. Theo phần câu hỏi thường gặp của công cụ, chữ thường cần tối thiểu 4.5:1 để đạt AA.

Dòng ngày giờ của card (#555B66 trên nền trắng) và kết quả 6.83 : 1 trong công cụ Kiểm tra tương phản. Card mẫu và ảnh chụp màn hình công cụ của ColorME, chưa đăng nhập, ngày 03/11/2026.

ColorME còn có công cụ Ảnh giao diện thành code, nhận ảnh chụp giao diện và tạo một file HTML/CSS để tham khảo. Theo trang công cụ, đây là công cụ AI "dành cho tài khoản được ColorME cấp quyền dùng AI, bạn cần đăng nhập để chạy"; bài này không thử công cụ đó. Trang công cụ cũng nói mã tạo ra "là bản dựng nhanh để tham khảo", nên nó không thay được phần hiểu box model và breakpoint ở trên.

Lộ trình 4 tuần học code cho designer

Lộ trình dưới đây dành cho người đi làm, khoảng 4 đến 5 giờ mỗi tuần. Mỗi tuần kết thúc bằng một thứ bạn làm ra được, không phải một chứng chỉ.

Bốn tuần, mỗi tuần một đầu ra cụ thể. Lộ trình gợi ý của ColorME.

Mẹo cho tuần đầu: chọn một component bạn đã thiết kế (card, nút, ô nhập) và dựng lại đúng nó, thay vì làm theo bài mẫu của người khác. Bạn sẽ gặp ngay các câu hỏi thật: chữ này cách ảnh bao nhiêu, nút này cao bao nhiêu, khi chữ dài thì sao.

Khi nào nên học sâu hơn mức đủ dùng

Học tiếp JavaScript hoặc một framework khi bạn muốn tự làm prototype có dữ liệu thật, tự dựng portfolio có tương tác, hay nhận dự án web trọn gói. Nếu mục tiêu là làm UI/UX trong một nhóm có developer, thời gian thường đáng đầu tư hơn vào nghiên cứu người dùng, hệ thống component và kỹ năng trình bày. Biết code ở mức đọc hiểu là để hai bên làm nhanh hơn, không phải để designer làm thay việc của dev.

Nếu muốn học bài bản từ wireframe, Figma tới bàn giao cho developer, tham khảo khoá học Thiết kế UI/UX của ColorME.

Câu hỏi thường gặp về designer và code

Designer có cần biết code không?

Không bắt buộc với mọi designer. Graphic designer làm in ấn gần như không cần; UI/UX designer nên đọc hiểu HTML và CSS; web designer tự dựng trang thì cần viết được HTML, CSS và một chút JavaScript.

UI designer cần biết code đến mức nào?

Đủ để nói chung một ngôn ngữ với developer: box model, đơn vị px và rem, flex và grid, breakpoint, design token và cách đọc thông số trong Figma Dev Mode. Không cần tự viết ứng dụng.

Học HTML, CSS cho designer mất bao lâu?

Với khoảng 4 đến 5 giờ mỗi tuần, khoảng 4 tuần là đủ để dựng một trang card co giãn đúng ở điện thoại và máy tính, đọc được CSS của developer và bàn giao file gọn hơn.

Biết code có giúp designer dễ xin việc hơn không?

Thường là có lợi, nhất là ở công ty nhỏ hoặc vị trí web designer, vì bạn thiết kế thứ dựng được và trao đổi nhanh hơn. Tuy vậy portfolio và tư duy giải quyết vấn đề vẫn là thứ được xem trước.

Nên dùng px hay rem khi bàn giao cho developer?

Cứ thiết kế bằng px trong Figma, nhưng dùng bước khoảng cách và cỡ chữ đều đặn (4, 8, 12, 16, 24). Developer đổi sang rem theo cỡ chữ gốc, thường là 16px, để chữ co giãn theo cài đặt của người dùng.

Figma Dev Mode có thay được việc biết code không?

Không. Dev Mode cho developer xem thông số và đoạn code gợi ý, nhưng chỉ chính xác khi file của bạn gọn: dùng auto layout, token và tên layer rõ ràng. Hiểu CSS giúp bạn tổ chức file để Dev Mode đọc ra đúng.