hovanban
Well-known member
Để trở thành một Full-stack Developer, hiểu biết về UI/UX design là một trong những yếu tố quan trọng mà bạn cần học hỏi. Điều này có thể bắt đầu trước hết bằng việc bạn biết cách dùng những công cụ UI như Figma. Dưới đây là một số các thao tác cơ bản developer có thể thực hiện:
1. Xem tab Kiểm tra
Tab Kiểm tra (Inspect) trên Figma cho phép developer xem được thuộc tính về màu sắc, kích thước, khoảng cách, biến thể, font… của các element. Developer cũng có thể xuất nó sang file PNG, SVG hoặc xuất dưới dạng code bằng CSS, Swift hoặc XML. Nếu team muốn làm nhiều hơn việc đo lường và hiển thị CSS đơn giản, Figma cũng có sẵn plugin Zeplin có thể hỗ trợ.
2. Chọn element
Nhấp chọn vào các element để xem thông số thiết kế và đo lường là một thao tác quan trọng cho developer. Hầu hết các mẫu thiết kế đều gồm nhiều layer, do đó:
Developer cũng có thể export CSS trực tiếp từ file thiết kế và tương thích nó với hệ điều hành IOS và Android. Để xuất ra các asset mong muốn, bạn có thể sử dụng 2 cách:
– Xuất ra các asset riêng lẻ: Nhấp chọn và bấm nút export
– Xuất tất cả asset có thể cùng một lúc: Sử dụng tổ hợp phím Control / Command + Shift + E để hiện ra bảng Export Panel.
4. Kiểm tra khoảng cách và kích thước
Khi chọn một element, bạn có thể xem được thông số biểu thị trực quan khoảng cách của element đó với các đối tượng xung quanh. Để làm điều này:
Để định vị component (thành phần) chính trên bất kỳ màn hình nào, hãy nhấp chuột phải vào component đó và chọn Main Component > Go to Main Component từ menu.
6. Tìm kiếm các layer
Bạn có thể tìm kiếm các layer một cách dễ dàng bằng cách sử dụng Plugin Find / Focus trong Figma. Sau khi nhập từ khóa tìm kiếm, plugin này sẽ giúp chọn lọc các layer có chứa từ khóa tương ứng và zoom vào chúng để bạn có thể dễ dàng quan sát. Việc tìm kiếm nhanh này giúp developer kiểm soát một tệp lớn với nhiều khung trang.
7. Xem mô phỏng thiết kế
Developer có thể xem mô phỏng cách người dùng tương tác với thiết kế thông qua prototypes và Figma sẽ chỉ hiển thị những frame có kết nối prototypes. Ngoài ra, developer còn có thể dùng tính năng Live device preview để xem mô phỏng thiết kế trên điện thoại di động, hoặc có thể chỉnh sửa kích thước khung hình để xem độ tương thích của thiết kế trên các định dạng thiết bị khác nhau.
CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn
1. Xem tab Kiểm tra
Tab Kiểm tra (Inspect) trên Figma cho phép developer xem được thuộc tính về màu sắc, kích thước, khoảng cách, biến thể, font… của các element. Developer cũng có thể xuất nó sang file PNG, SVG hoặc xuất dưới dạng code bằng CSS, Swift hoặc XML. Nếu team muốn làm nhiều hơn việc đo lường và hiển thị CSS đơn giản, Figma cũng có sẵn plugin Zeplin có thể hỗ trợ.
2. Chọn element
Nhấp chọn vào các element để xem thông số thiết kế và đo lường là một thao tác quan trọng cho developer. Hầu hết các mẫu thiết kế đều gồm nhiều layer, do đó:
- Nếu nhấp chọn một element, chương trình sẽ tự động chọn element ở layer trên cùng.
- Để chọn một element ở các layer bên trong, nhấn Command + element mong muốn. Hoặc nhấp chuột phải vào element để hiển thị bảng Select Layer.
Developer cũng có thể export CSS trực tiếp từ file thiết kế và tương thích nó với hệ điều hành IOS và Android. Để xuất ra các asset mong muốn, bạn có thể sử dụng 2 cách:
– Xuất ra các asset riêng lẻ: Nhấp chọn và bấm nút export
– Xuất tất cả asset có thể cùng một lúc: Sử dụng tổ hợp phím Control / Command + Shift + E để hiện ra bảng Export Panel.
4. Kiểm tra khoảng cách và kích thước
Khi chọn một element, bạn có thể xem được thông số biểu thị trực quan khoảng cách của element đó với các đối tượng xung quanh. Để làm điều này:
- Chọn Code Panel (Bảng mã)
- Nhấp chọn vào element muốn đo
- Di chuyển con trỏ qua một layer khác
Để định vị component (thành phần) chính trên bất kỳ màn hình nào, hãy nhấp chuột phải vào component đó và chọn Main Component > Go to Main Component từ menu.
6. Tìm kiếm các layer
Bạn có thể tìm kiếm các layer một cách dễ dàng bằng cách sử dụng Plugin Find / Focus trong Figma. Sau khi nhập từ khóa tìm kiếm, plugin này sẽ giúp chọn lọc các layer có chứa từ khóa tương ứng và zoom vào chúng để bạn có thể dễ dàng quan sát. Việc tìm kiếm nhanh này giúp developer kiểm soát một tệp lớn với nhiều khung trang.
7. Xem mô phỏng thiết kế
Developer có thể xem mô phỏng cách người dùng tương tác với thiết kế thông qua prototypes và Figma sẽ chỉ hiển thị những frame có kết nối prototypes. Ngoài ra, developer còn có thể dùng tính năng Live device preview để xem mô phỏng thiết kế trên điện thoại di động, hoặc có thể chỉnh sửa kích thước khung hình để xem độ tương thích của thiết kế trên các định dạng thiết bị khác nhau.
CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn