Nhiều khi các setting trên Figma không phải ngôn ngữ mà Dev hay dùng >> dẫn đến dễ gặp khó khăn khi bạn muốn nói sao cho dev hiểu, vì có khoảng gap giữa term phía designer (Figma) vs term phía dev (CSS).
Nên bài này để mình liệt kê ra từ điển mapping term giữa Figma và CSS.
Tham khảo thêm các loại
CSS tại trang này.
Tip: Nếu bạn muốn thử áp dụng thực tế thì mình nghĩ có thể
webflow
nhé. Dùng
Codepen
để thử preview code.
Fundamental
Trước hết ta phải hiểu về Box model, đơn giản có thể hiểu khác với design, ta đặt để layout các element một cách freedom được NHƯNG phía dev thì không, họ sẽ build UI dựa trên các block đặt để lên nhau, khi họ xây dựng UI đó phải có logic hơn rất nhiều, và mình cần hiểu điều đó thông qua khái niệm box model.
Tips: hãy áp dụng auto layout nhiều nhất có thể. Hoặc tốt hơn nữa hãy dùng Webflow để tự build portfolio cho bạn
(vì webflow hiện là web builder có giao diện trực quan nhất nằm giữa điểm cần bằng design & dev).
Spacing
Tiếp sau box model, là cách bạn hiểu về spacing cần khác với cách designer hay làm, mình cần làm quen với các khái niệm sau:
❇️ Stack, Inline spacing (gap in Figma) = margin
Layout
Again hãy cố gắng dùng auto layout nhiều nhất có thể để gần với cách dev hay xài.
Note: tiếc là Figma chưa có dạng layout grid như trên CSS.
Position
Để hiểu đúng về position, bạn phải bắt tay build prototype & hình dung UI sẽ behave ra sao >> lúc này có element scroll theo, có element thì fix cứng, có cái thì swipe ngang… tất cả những thứ này đều liên quan đến position trong css.
Statis Positioning (by default)
Nếu không set bất kỳ giá position nào, thì mặc định sẽ là static, các phần tử được sắp xếp theo luồng block by block (như lúc mình set auto layout trên Figma, các thành phần luôn theo order).
❇️ Scroll with parent = Static positioning (Default)
Phần tử tuân theo luồng tự nhiên (không bị ảnh hưởng bởi top, left, right, bottom).
Ví dụ: các list item
Relative Positioning
Loại định vị cho phép bạn di chuyển phần tử dựa trên vị trí ban đầu của nó trong luồng block.
❇️ Relative position
Giữ chỗ trong luồng nhưng có thể di chuyển dựa trên vị trí ban đầu bằng top, left, v.v.
Case có thể áp dụng: badge, highlight một đoạn text, mở card, hover…
❇️ Layer front, back = z index
Free Positioning
Loại "định vị tự do", không theo luồng block.
❇️ Fixed - stay in place (trên prototype Figma)
=
Fixed position
Cố định so với cửa sổ trình duyệt (viewport).
Ví dụ: thanh menu, pop up, FAB, toast message/ snackbar…
❇️ Absolute position (trên Figma) = Absolute position
Fixed position nhưng nằm trong 1 container.
*Default nó sẽ giống theo viewport, nếu muốn giống theo container A thì cần set container A có giá trị relative position (thay vì default là static).
Ví dụ: tooltip, red dot
❇️ Sticky - stop at top edge (trên prototype Figma) = Sticky position
Lai giữa relative positioning và fixed positioning. Phần tử với
position: sticky
sẽ hoạt động như relative khi ở trong giới hạn (container) của nó và sẽ chuyển sang fixed khi người dùng cuộn trang đến một điểm nhất định.
Ví dụ: header, tiêu đề bảng (table header), các mục lục (TOC) trong một bài viết…
Để dễ hình dung hơn, bạn xem cách build trên webflow nhé.
Resize
❇️ Fixed size = gán value bằng
px
hoặc
%
cho width, height
❇️ Fill container (tuỳ theo object đó đang được đặt trong layout dạng nào)
Nếu layout object đó trong container >>
width: 100%;
and/or
height: 100%;
Nếu layout theo flexbox >>
flex-grow: 1;
Nếu layout trong dạng grid >>
grid
fractional units (
1fr)
Nếu element đó tràn lên trên parent (ví dụ: pop up) >>
position: absolute
❇️ Stretch (left & right, top & bottom) = align-self: stretch (flexbox)
Text
❇️ Text case (UPPERCASE, lowercase, Title Case) = text-transform
❇️ font size scale by device size = em,rem
Blend mode (mutiply, screen, overlay,…)
❇️ Blend Mode = mix-blend-mode
Other
❇️ Hide (giống như set layer opacity = 0% trên Figma) = display: hidden
Delete (giống như xoá layer trên Figma) = display: none
❇️ Inside an object: left side = Leading; right side = Trailing; middle = Middle
❇️ Scale tool (ctrl + K in Figma) = transform: scale(2)
Image
❇️ Image (Fill) = object-fit: cover
❇️ Image (Fit) = object-fit: contain
❇️ Hình stretch theo width nhưng giữ đúng ratio của hình = width: 100%, height: auto
❇️ 4:3, 1:1, 16:9,… = aspect-ratio
❇️ Other object-fit: none, scale down, fill
Design system
Này căng ah, chưa rõ..
❇️ Component = Reusable Components / Classes / Functions
❇️ Variant = Props / Modifiers / Variations
❇️ Variants with States (Hover, Active, Focus) = Pseudo-classes
❇️ Variants with Element (Selection, Placeholder, Red dot) = Pseudo-element
❇️ Nested Variants (Complex States) = Dynamic Props or Logic
Tóm lại
Chắc là nhiều & rối não lắm, nhưng nếu bạn quan tâm đến trải nghiệm của dev, không muốn họ đoán già đoán non khi muốn xem design của bạn, cũng như bạn muốn design pixel perfect, đúng với design expectation
>> thì mình nghĩ cách hiệu quả nhất là bạn phải hiểu ngôn ngữ của họ. So, this’s matter.
