github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
66 lines
5.4 KiB
Plaintext
66 lines
5.4 KiB
Plaintext
---
|
|
title: Làm việc với Figma
|
|
info: Tìm hiểu cách bạn có thể cộng tác với Figma của Twenty
|
|
image: /images/user-guide/objects/objects.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Figma là công cụ thiết kế giao diện giúp cải thiện giao tiếp giữa các nhà thiết kế và nhà phát triển.
|
|
Hướng dẫn này giải thích cách bạn có thể cộng tác với Figma.
|
|
|
|
## Truy cập
|
|
|
|
1. **Truy cập liên kết chia sẻ:** Bạn có thể truy cập tệp Figma của dự án [tại đây](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
|
|
2. **Đăng nhập:** Nếu bạn chưa đăng nhập, Figma sẽ yêu cầu bạn làm như vậy.
|
|
Những tính năng chính chỉ có sẵn cho người dùng đã đăng nhập, chẳng hạn như chế độ dành cho nhà phát triển và khả năng chọn khung chuyên dụng.
|
|
|
|
<Warning>
|
|
|
|
Bạn sẽ không thể hợp tác hiệu quả nếu không có tài khoản.
|
|
|
|
</Warning>
|
|
|
|
## Cấu trúc Figma
|
|
|
|
Trên thanh công cụ bên trái, bạn có thể truy cập các trang khác nhau của Figma của Twenty. Đây là cách chúng được tổ chức:
|
|
|
|
- **Trang thành phần:** Đây là trang đầu tiên. Nhà thiết kế sử dụng nó để tạo và tổ chức các thành phần thiết kế có thể tái sử dụng trong suốt tệp thiết kế. Ví dụ, nút, biểu tượng, ký hiệu, hoặc bất kỳ thành phần tái sử dụng nào khác. Nó giúp duy trì sự nhất quán trên toàn bộ thiết kế.
|
|
- **Trang chính:** Trang thứ hai là trang chính, hiển thị toàn bộ giao diện người dùng của dự án. Bạn có thể nhấn _**Chạy**_ để sử dụng toàn bộ nguyên mẫu ứng dụng.
|
|
- **Trang tính năng:** Các trang khác thường dành riêng cho các tính năng đang trong quá trình phát triển. Chúng chứa thiết kế của các tính năng hoặc mô-đun cụ thể của ứng dụng hoặc trang web. Chúng thường vẫn đang trong quá trình phát triển.
|
|
|
|
## Mẹo hữu ích
|
|
|
|
Với quyền truy cập chỉ đọc, bạn không thể chỉnh sửa thiết kế, nhưng bạn có thể truy cập tất cả các tính năng hữu ích để chuyển đổi thiết kế thành mã.
|
|
|
|
### Sử dụng chế độ Dev
|
|
|
|
Chế độ Dev của Figma tăng cường khả năng làm việc của nhà phát triển bằng cách cung cấp điều hướng thiết kế dễ dàng, quản lý tài sản hiệu quả, các công cụ giao tiếp hiệu quả, tích hợp công cụ, đoạn mã nhanh chóng, và thông tin lớp quan trọng, thu hẹp khoảng cách giữa thiết kế và phát triển. Bạn có thể tìm hiểu thêm về Chế độ Dev [tại đây](https://www.figma.com/dev-mode/).
|
|
|
|
Chuyển sang chế độ "Phát triển" ở phần bên phải của thanh công cụ để xem thông số kỹ thuật thiết kế, sao chép CSS và truy cập tài nguyên.
|
|
|
|
### Sử dụng nguyên mẫu
|
|
|
|
Nhấp vào bất kỳ phần tử nào trên canvas và nhấn nút “Chạy” ở góc trên bên phải của giao diện để truy cập chế độ xem nguyên mẫu. Chế độ nguyên mẫu cho phép bạn tương tác với thiết kế như nếu đó là sản phẩm cuối cùng. Nó thể hiện luồng giữa các màn hình và cách các phần tử giao diện như nút, liên kết hoặc menu hoạt động khi tương tác với chúng.
|
|
|
|
1. **Hiểu về chuyển tiếp và hoạt ảnh:** Trong chế độ nguyên mẫu, bạn có thể xem các chuyển tiếp hoặc hoạt ảnh được nhà thiết kế thêm vào giữa các màn hình hoặc các phần tử giao diện, cung cấp chỉ dẫn hình ảnh rõ ràng cho các nhà phát triển về hành vi và phong cách dự định.
|
|
2. **Làm rõ việc thực hiện:** Nguyên mẫu cũng có thể giúp giảm bớt những sự mơ hồ. Nhà phát triển có thể tương tác với nó để hiểu rõ hơn về chức năng hoặc diện mạo của các phần tử cụ thể.
|
|
|
|
Để biết thêm chi tiết và hướng dẫn toàn diện về việc học nền tảng Figma, bạn có thể truy cập [Tài liệu Figma chính thức](https://help.figma.com/hc/en-us).
|
|
|
|
### Đo khoảng cách
|
|
|
|
Chọn một phần tử, giữ phím `Option` (Mac) hoặc phím `Alt` (Windows), sau đó di chuyển chuột lên trên phần tử khác để xem khoảng cách giữa chúng.
|
|
|
|
### Tiện ích mở rộng Figma cho VSCode (Đề xuất)
|
|
|
|
[Figma cho VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension) cho phép bạn điều hướng và kiểm tra tệp thiết kế, cộng tác với nhà thiết kế, theo dõi thay đổi và tăng tốc triển khai - tất cả mà không cần rời khỏi trình chỉnh sửa văn bản của bạn.
|
|
Đây là một trong những tiện ích mở rộng được đề xuất của chúng tôi.
|
|
|
|
## Cộng tác
|
|
|
|
1. **Sử dụng Bình luận:** Bạn có thể sử dụng tính năng bình luận bằng cách nhấp vào biểu tượng bong bóng ở phần bên trái của thanh công cụ.
|
|
2. **Chat con trỏ:** Một tính năng thú vị của Figma là Chat con trỏ. Chỉ cần nhấn `;` trên Mac và `/` trên Windows để gửi tin nhắn nếu bạn thấy ai đó khác đang sử dụng Figma cùng lúc với bạn.
|