Dev Mode là một tính năng mới được cập nhật vào Figma thời gian gần đây. Đây được cho là tính năng sẽ giúp UI/UX Designer và Coder làm việc với nhau dễ dàng hơn. Vậy nên trong bài viết này, chúng ta sẽ tìm hiểu về tính năng Dev Mode này nhé!
Dev Mode trong Figma là gì?
Dev mode trong Figma là một tính năng cho phép người dùng xem mã HTML, CSS và JavaScript của các thành phần trong thiết kế của họ. Nó cho phép nhà thiết kế kiểm tra và chỉnh sửa mã nguồn của các thành phần để đảm bảo tính tương thích và độ tin cậy của thiết kế. Dev mode cũng cung cấp cho nhà phát triển một cách để xem cấu trúc của các thành phần và tùy chỉnh chúng để phù hợp với nhu cầu của họ.
Bật/tắt chế độ Dev Mode trong Figma
Để bật/tắt chế độ Dev Mode trong Figma, bạn có thể chọn vào biểu tượng Dev Mode ở góc trên bên phải của ứng dụng hoặc sử dụng phím tắt Shift+d.
Dev Mode hỗ trợ những gì?
- Phân biệt những trang đã thiết kế xong với chức năng “Mark as ready for dev”
Chỉ với 1 nút ấn, bạn đã có thể giúp cho Coder của bạn biết được những trang nào đã thiết kế xong và có thể bắt đầu công đoạn viết code.
- So sánh các thay đổi của các phiên chỉnh sửa trước
Với Dev Mode, giờ đây bạn sẽ không còn phải thắc mắc những ai đã chỉnh sửa gì trong suốt quá trình thiết kế giao diện nữa với chức năng “compare changes”.
- Hỗ trợ viết mã code theo nhiều ngôn ngữ, định dạng code khác nhau
Bạn có thể tùy chọn ngôn ngữ lập trình mình sử dụng để có thể lấy những gợi ý về mã code, màu sắc và các item được sử dụng trong thiết kế.
- Làm việc nhóm dễ dàng hơn với Dev resources
Nếu như đội nhóm của bạn đang sử dụng Figma cho 1 dự án và quản lý công việc hay mã code bằng 1 ứng dụng bên thứ 3(Trello,Github,..) nhưng đang gặp khó khăn khi quản lý công việc giữa 2 nền tảng thì với Dev Mode, chức năng Dev resources sẽ giúp bạn giải quyết vấn đề này. Dưới đây sẽ là ví dụ cụ thể cho việc quản lý công việc trong Figma trên Github:
- Bước 1: Chọn layout cần quản lý.
- Bước 2: Nhấn dấu +(Add link) trong phần Dev resources.
- Bước 3: Gắn link file code tương ứng của Github.
Khi đội nhóm của bạn click vào layout này sẽ có thể biết các thông tin như địa chỉ cụ thể của file code bên Github, trạng thái của file và đoạn mã được liên kết hoàn toàn trong Figma. Điều này sẽ giúp giảm thiểu lỗi và tiết kiệm thời gian cho việc tìm kiếm file code tương ứng cho layout này.
Tổng kết
Được biết tính năng này hiện đang được cho phép sử dụng miễn phí và sẽ bắt đầu tính phí vào đầu năm 2024. Nhưng với những tính năng kể trên, chắc chắn Dev Mode sẽ là tính năng rất hữu ích và thông dụng trong quá trình làm việc giữa UI/UX Designer với Coder nói riêng và khi sử dụng Figma nói chung. Hy vọng nội dung của bài viết sẽ có ích cho các bạn trong quá trình học tập và làm việc với Figma.
Giảng viên: Nguyễn Thị Loan
Bộ môn Công nghệ thông tin
Trường Cao đẳng FPT Polytechnic cơ sở Hà Nội
