Bài 07-Tài nguyên thiết kế

Thiết kế và phát triển hiệu quả hơn với cùng một thư viện.

Bộ thiết kế

Thiết kế thành phần Material UI có sẵn cho Figma, Sketch và Adobe XD, cung cấp các biểu diễn chính xác bằng thuật ngữ chung cho tất cả các trạng thái, biến thể và hoán vị của từng thành phần.

Bộ thiết kế bao gồm hơn 1.500 thành phần độc đáo được xây dựng để tăng tốc quá trình phát triển và tạo điều kiện giao tiếp cho các nhóm nhà thiết kế và nhà phát triển sử dụng thư viện.

[

Giao diện người dùng vật liệu cho Figma

](https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-figma)

[

Giao diện người dùng vật liệu cho Sketch

](https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch)

[

Material UI cho Adobe XD

](https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-adobe-xd)

Plugin Figma Đồng bộ hóa Material UI

Sync là plugin Figma giúp thu hẹp khoảng cách giữa nhà thiết kế và nhà phát triển bằng cách sử dụng Material UI.

Nó tạo ra một tệp chủ đề mà bạn có thể thêm vào cơ sở mã của mình với tất cả các mã thông báo thiết kế và tùy chỉnh thành phần từ Figma. Bạn có thể nhanh chóng xem trước tất cả các thay đổi thông qua bảng Storybook được nhúng trực tiếp trong giao diện plugin.

Sync hiện đang trong giai đoạn beta và có sẵn miễn phí trong Cộng đồng Figma. Bạn cũng có thể truy cập trang tài liệu Sync để tìm hiểu thêm.

Tài nguyên của bên thứ ba

UXPin

Material UI cho UXPin : Một bộ UI lớn gồm các thành phần Material UI. Công cụ thiết kế sẽ hiển thị các thành phần trong thời gian chạy web. Nó sử dụng cùng một triển khai React như môi trường sản xuất của bạn.