Xin chào các bạn!
Lại là mình Quốc Hưng đến từ ABC Software Solutions Company.
Đa số các bạn beginner UI-UX khi bắt tay vào thiết kế một dự án mới thường rất băn khoăn không biết phải chọn font chữ nào, màu sắc bố cục hay các khoảng cách sao cho hợp lý để làm bản thiết kế của mình nổi bật hơn,… Để giúp trả lời câu hỏi đó trong bài viết này mình muốn chia sẻ đến các bạn thư viện rất hay đó là thư viện Material-UI trong Figma.
MUI (Material-UI) không phải là chủ đề mới nhưng nó vẫn rất hot. Khi nhắc đến Material-UI người ta sẽ nhớ đến React, đúng vậy những thư viện về MUI trên Figma cũng đa số tuân thủ theo quy tắc lập trình của React. Cụ thể thế nào cùng mình tìm hiểu sâu hơn về chủ đề thú vị cũng như vô cùng tuyệt vời này nhé.
Material-UI là gì?
Khái niệm về Material-UI xuất phát điểm là một thư viện các React Component đã được tích hợp thêm cả Google's Material Design. Theo như giới thiệu trên trang chủ thì được xây dựng nhờ mối liên hệ chặt chẽ với React và Google's Material Design.
Material UI đem đến cho bạn và trang web của bạn một giao diện hoàn toàn mới, với những button, textfield, toggle… được design theo một phong cách mới lạ, thay vì việc nhà nhà người người dùng Bootstrap như hiện nay. Việc sử dụng Material-UI giúp người dùng tiết kiệm rất nhiều thời gian từ các Component có sẵn. Với trên 20 Components thì có lẽ là đủ cho trang web của bạn sinh động cũng như rất dễ dàng để bảo trì code. Một số Components đáng chú ý:
- Layout: Layout hay gọi là cách bố trí cho một trang web. Với phần này Material-UI đã xây dựng các Components rất tiện dụng cho chúng ta như : Box, Container, Grid, Hidden, Image List.
- Inputs: Inputs là những components được xây dựng để nhận dữ liệu, thao tác với form. Với các Components như: Button, Button Group, Checkbox, Floating Action Button, Date/Time, Radio, Select, Slider, Switch, Text Field, Transfer List.
- Navigations: Với các Components đã tích hợp sẵn phục vụ cho mục đích Navigate hay điều hướng ứng dụng. Quá tiện lợi và không kém phần chuyên nghiệp khi chúng ta sử dụng thư viện UI này. Framework đã tích hợp sẵn các Components như: BottomNavigations, BreadCrumbs, Drawer, Link, Menu, Stepper, Tabs.
- Surfaces: Material cũng đã tạo cho chúng ta khung chứa nội dung có sẵn, chúng ta có thể sử dụng các Component như: App Bar, Paper, Card, Accordition.
- Feedback: Chúng ta có các Components giúp disabled chức năng tùy chỉnh trên màn hình và chờ đợi phản hồi xong components đó thì mới có thể hoạt động lại các chức năng khác. Có một số components như: Progress, Dialog, Snackbar, Backdrop. Trong đó đơn giản như Cmponent Progress chúng ta có thể tạo hiệu ứng Loading xoay tròn đợi phản hồi từ phía backend rồi mới tắt Loading đi.
- Data Display: Material-UI đã hỗ trợ cho chúng ta những cách hiển thị dữ liệu cơ bản mà hầu như là có tất cả những thứ cần trên một ứng dụng với các Components: Avatar, Badge, Chip, Divider, Icons, List, Table, Tooltip, Typography định dạng cho chữ).
Ngoài ra chúng ta còn có thể tận dụng rất nhiều Components khác giúp trang web chúng ta trở nên chuyên nghiệp hơn như: Modal, Poover, Transitions… mọi người có thể vào trong trang chủ để tham khảo thêm nhé.
Material-UI trong thiết kế Figma
Để tạo ra một giao diện người dùng đẹp cần tuân thủ rất nhiều quy tắc trong thiết kế (Color, Typography, Contrast, Spacing, Grid,…) những quy tắc này đa phần sẽ rất nhiều và khó hiểu cho người mới bắt đầu học thiết kế Figma vì vậy Material-UI trong Figma đã ra đời, giúp các designer có cái nhìn trực quan và dễ dàng xây dựng thiết kế hơn.
Với Material-UI trong Figma chúng ta có thể tận dụng các thư viện được cái designer trên khắp thế giới chia sẻ trên cộng đồng Figma, hãy mở ngay thư viện Material-UI sẽ giải đáp hết thắc mắc của bạn. Giống như React Component thì Figma cũng có các Component để dùng chung, Component ở Figma có chức năng chính là giúp designer dễ dàng quản lý các layers cũng như giúp tạo và quản lý các thiết kế nhất quán trong các dự án.
Khi làm việc với nhóm lập trình bạn nên dùng thống nhất một bộ Material-UI sẽ giúp tiết kiệm thời gian cũng như đảm bảo sẽ không phát sinh lỗi lặt vặt trong xuyên suốt quá trình thực hiện dự án. Với vai trò là designer cá nhân mình sau khi nhận được sự hướng dẫn, giúp đỡ của anh Tin Trần (Developer với nhiều năm kinh nghiệm) đã cho ra đời bộ UI Kit theo phong cách chuẩn code Tailwind CSS. Với việc sử dụng tài nguyên sẵn có của Tailwind CSS (color, Spacing, Typography, Borders, Effects, SVG,…) giờ đây khi bắt tay vào một dự án mới, chỉ cần sử dụng tài nguyên đã config sẵn rất tiện lợi.
Ý kiến cá nhân
Tất nhiên về cái đẹp thì tùy ý kiến cá nhân của mỗi người khác nhau, bạn có thể thấy các Material-UI trên cộng đồng Figma không được bắt mắt hay không đáp ứng được mục tiêu thiết kế của bạn. Hãy tự xây dựng cho mình một bộ UI Kit và chia sẻ cho mọi người nhé.
Còn về tính tiện lợi, rõ ràng Material UI đã cung cấp quá đủ cho một dự án, giúp quá trình làm việc cá nhân hoặc nhóm của chúng ta sẽ nhanh và hoàn hảo hơn. Ngoài ra các bạn cũng nên tham khảo các thiết kế trên cộng đồng của Figma lưu lại những bản design ấn tượng, tích góp cho mình khả năng thiết kế và tư duy logic.
Qua bài viết này mình muốn giới thiệu qua về Material-UI React cũng như Material-UI trên Figma và những lợi ích tuyệt vời mang lại cho các designer. Hi vọng bài viết này giúp đỡ mọi người một phần nào đó trong cách lựa chọn phong cách thiết kế của các bạn.
Mình là Hưng, cảm ơn các bạn đã quan tâm đến Blog của mình!!!