Chào mừng mọi người đã quay lại với serie học gì chia sẻ nấy và mình là Tuyền. Với các nội dung chia sẻ trước đó về các lĩnh vực code, BA thì hôm nay mình sẽ dẫn dắt các bạn tiếp cận đến với một lĩnh khác cũng góp phần giúp cho dự án trở nên thành công không thể kể đến vai trò của designer.
Đối với một designer ngoài kĩ năng được học hoặc tiếp thu kiến thức từ nhiều nguồn thì những công cụ có thể giúp họ thể hiện ý tưởng, sự tự do sáng tạo,... cũng là một phần thành công. Phải kể đến các công cụ hữu ích như: Adobe Creative Suite (Photoshop, Illustrator,...), Figma,... Riêng đối với mình thì 2 công cụ này khá hữu dụng đối với một dân designer như mình.
Các bạn thường được nghe dân design nói tôi dùng phần mềm này phần mềm kia để thiết kế nhưng chúng ta chỉ nghe và không hề hiểu rõ về chúng. Lỡ sau này chúng ta cần dùng đến thì chúng ta cũng phải hỏi lại họ về tên các phần mềm đó. Với bất cập đó, mình viết bài blog này là muốn chia sẻ phần mềm mà mình hay dùng nhất khi design đó là Figma.
Figma là một phần mềm thiết kế được ra mắt vào năm 2015 và nhanh chóng được sử dụng rộng rãi trong cộng đồng thiết kế và cho phép người dùng tạo ra các bản vẽ thiết kế tương tác và chia sẻ chúng với các thành viên khác của nhóm dự án.
Figma cung cấp hàng loạt tính năng hữu ích như các công cụ vẽ hình học, phông chữ, màu sắc và cả các tính năng để tạo ra các bản vẽ tương tác và các mẫu thiết kế. Ngoài ra, còn tích hợp được với nhiều công cụ khác như Sketch, Photoshop và các công cụ quản lý dự án như Jira và Trello. Một tính năng đặc biệt của Figma là cho phép người dùng tương tác hoạt động (các nút bấm, liên kết,...) của bản thiết kế như một trang web.
Với sự linh hoạt và tính năng tuyệt vời của Figma mang lại và bạn có thể tận dụng điều này để là cho nó trở nên tốt hơn thông qua việc cải thiện sự trải nghiệm và làm cho việc thiết kế trở nên dễ dàng hơn không thể thiếu sự trợ giúp của các plugin.
Như bài blog “https://www.abcsoftwarecompany.com/vi/blog/nhung-plugin-figma-thong-dung-danh-cho-thiet-ke-ui” của bạn Quốc Hưng chia sẻ thì bạn cũng là một dân designer và bạn cũng từng sử dụng các plugin thông dụng trong thiết kế của bạn như: Stylelist, remove.bg, lorem ipsum, unsplash, iconify,... và mình cũng thế. Nhưng bản thân mình lại vô tình phát hiện những điều tuyệt vời hơn của một số plugin của Figma mang lại, cụ thể: anima, content reel, design lint.
Anima
Anima là một plugin cho phép người dùng tạo ra các button, form, dropdown và nhiều hơn nữa với tính năng chia sẻ và tái sử dụng linh hoạt giúp trang web và ứng dụng hoạt động mượt mà và có tính tương tác cao.
Có thể tham khảo UI của các components: button, form, dropdown,...
Plugin này hỗ trợ những sự linh hoạt, UI, code giúp cho dân dev dễ dàng tham khảo và code không bị sai lệch yêu cầu và mục đích của khách hàng với designer.
Sau khi một designer thiết kế xong 1 page (frame) thì chúng ta chọn frame đó để export sang code theo các ngôn ngữ tùy chỉnh mà plugin Anima hỗ trợ. Mình có thể demo cho các bạn xem một ví dụ nhỏ:
- Mình lựa chọn một frame (Home page) đã được design trước đó và chuột phải nhấn chọnPlugin -> Anima -> Get code. Nhưng trước khi sử dụng được plugin này bạn cần phải cài đặt plugin này nhé ^^!
- Sau khi Get code bạn có thể lựa chọn ngôn ngữ để plugin hỗ trợ export sang code
Bạn có thể export ra code theo các ngôn ngữ được hỗ trợ sẵn như: HTML, React, Vue
- Cuối cùng kết quả hiển thị code cho frame (Home page). Nhưng lưu ý, tính năng này còn hạn chế nếu bạn muốn export code và download source về thì nên bỏ thêm tí $ để tiện đôi đường nhé. Còn có cách khác lách luật hơn tí bạn có thể mở sang code pen như mình và xem trực tiếp luôn.
Đây là một plugin hay nhưng lại bị hạn chế tính năng dùng free. Vậy nên muốn trải nghiệm tốt và có điều kiện bạn nên thêm tí $ để có những trải nghiệm tuyệt vời hơn nhé!!!!
Ngoài ra, plugin này còn có một tính năng tuyệt vời hơn là Auto Layout cho phép các phần tử tự động thay đổi kích thước và định vị khi kích thước của khung bao quanh nếu chúng thay đổi. Điều này giúp giảm thiểu thời gian cần để cập nhật và sắp xếp các phần tử trong thiết kế.
Content Reel
Là một plugin giúp cho việc thể hiện content (hình ảnh, nội dung, đoạn video, gif và hình ảnh động) trong thiết kế trở nên sinh động, đẹp mắt.
Design Lint
Là một plugin giúp kiểm tra chất lượng và tiêu chuẩn của thiết kế: đảm bảo tính nhất quán trong toàn bộ bản thiết kế, màu sắc, khoảng cách, phông chữ và các quy tắc thiết kế khác, giúp người dùng tìm ra các lỗi thiết kế và sửa chúng một cách nhanh chóng.
Mình có một bài tập cá nhân sau khi mình design và tiến hành nhờ plugin hỗ trợ để kiểm tra thì kết quá mình nhận được khá bất ngờ.
Chỉ một page thôi mà mình đã sai rất nhiều tiêu chuẩn, con số rất kinh ngạc. Mình nghĩ plugin này khá hay nó sẽ giúp cho dân designer tụi mình nâng cao tiều chuẩn design và nâng sao sự quan sát, tỉ mỉ và cẩn thận hơn rất nhiều
Nhận thấy rằng những plugin tuy là một phần nhỏ giúp cho việc thiết kế của chúng ta trở nên đẹp mắt, hoàn hảo hơn rất nhiều. Nó góp phần giúp chúng ta giảm thiểu thời gian, công sức để làm nhiều thứ mới mẻ và lớn lao. Nhờ vào tính năng tự động hoá và các công cụ hỗ trợ đắc lực, các designer có thể tập trung vào việc tạo ra các sản phẩm đáp ứng yêu cầu của khách hàng và thị trường.
Trên đây, là một số plugin mà mình tự tìm tòi được trong quá trình học hỏi để trở thành designer. Mình sẽ chia sẻ những kiến thức mà mình khám phá được trong quá trình học. Hi vọng sẽ giúp ích được cho các bạn.
Cảm ơn các bạn đã đọc đến đây!!!!
Hẹn các bạn ở blog tiếp theo nhé và mình là Tuyền.
Bài viết được tạo bởi ChatGPT và đã được chỉnh sửa.