Figma file structure
Figma file structure

⁠

1. Vấn đề gặp phải.

Đối với Figma, việc tổ chức các thư mục thiết kế là rất quan trọng. Trong một team có nhiều PO/ Design, việc mỗi người làm việc trên file khác nhau sẽ dẫn đến tình trạng khó kế thừa các tài nguyên component & quản lý chung dự án. Mỗi lần chúng ta cần tìm một bản draft để demo với khách hàng hoặc các stakeholder, việc bơi lội trong hàng loạt file design thật sự rất tốn thời gian và kém chuyên nghiệp.

Ngoài ra, sự nhập nhằng giữa các bản design cho các giai đoạn phát triển dự án tạo rất nhiều khó khăn cho đội ngũ developer. Việc tái tổ chức & chuẩn hóa cấu trúc của file thiết kế trên Figma là rất cần thiết.

⁠

2. Giải pháp tổ chức file thiết kế.

⁠

Tính năng Team của Figma thật sự rất hữu ích trong những trường hợp thế này. Cấu trúc của 1 team figma cho đến một file design cụ thể sẽ là Figma Team > Project > File > Page.

Chúng ta sẽ quy ước với nhau:

Figma Team = Physical team

Project = Product (iLotusLand Web Global , iLotusLand Mobile, iLotusLand Custom, Billing, QLNT, Solar,…)

File = Feature (Mỗi tính năng sẽ được tạo 1 file design mới theo cấu trúc sẵn có. Nếu tính năng quá nhỏ hoặc có liên hệ với những tính năng khác có thể gom chung trong 1 file thiết kế)

Trong mỗi file thiết kế, cụ thể chúng ta có thể có một số page như sau:

🔖 Cover: Nội dung cover thể hiện bao gồm Tên tính năng phát triển, miêu tả ngắn gọn về tính năng này, tình trạng phát triển của tính năng (In Development, On Hold, Done,…), ngày bắt đầu & kết thúc quá trình thiết kế của tính năng. Nên đánh dấu cover của mỗi tính năng khác nhau để dễ nhận biết.

⁠

✅ Spec: Final design cho từng giai đoạn, dev sẽ quan tâm ở đây, Các bản design luôn phải là mới nhất

🎈 Playground: Là nơi làm việc chính của PO, Designer. Có thể tạo thêm nhiều trang để draft ý tưởng

⁠

↪ Prototype: là nơi set up prototype để demo với khách hàng. Khi chia sẻ cho khách hàng, chỉ gửi link prototype

⁠

⚰ Graveyard: là nơi bỏ các design cũ, không phù hợp. Chúng ta không nên vứt bỏ những idea cũ. Rất có thể trong tương lai, những design đó sẽ có thể sử dụng.

🔀 Flowchart: là nơi bỏ các process, logic. Có thể vẽ từ

draw.io⁠

hoặc bất kỳ tool nào và import ảnh vào đây.

1. Vấn đề gặp phải.

2. Giải pháp tổ chức file thiết kế.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

Figma file structureFigma file structure

1. Vấn đề gặp phải.

2. Giải pháp tổ chức file thiết kế.

Figma file structure
Figma file structure