Chuyển UI design sang code trong nửa nốt nhạc (Adobe XD to Flutter)

Theo một nghiên cứu của đại học OXFORD, có đến 47% các công việc sẽ được tự động hóa vào năm 2030. Ngay cả lập trình viên cũng có “nguy cơ” bị thay thế bởi chính những chương trình mà họ viết ra. Và “XD to Flutter” là một trong số đó. Plugin của Adobe XD (một công cụ thiết kế UI/UX) này là một công cụ mạnh mẽ, dễ sử dụng để xuất các thiết kế Adobe XD thành những mã code với ngôn ngữ DART, sử dụng cho Flutter. Mặc dù trong tương lai, các chương trình này có thể khiến các lập trình viên mất việc. Nhưng ở thời điểm hiện tại, nó giúp chúng ta giảm công số, tăng hiệu suất làm việc. Vậy thì dại gì mà không dùng?

Vậy làm thế nào để sử dụng?

Adobe XD

• Đầu tiên thì bạn cần phải có 1 mẫu thiết kế XD để thử nghiệm. Ở đây, mình đã clone lại UI của ứng dụng Bluezone. Một ứng dụng cảnh báo nếu bạn đã tiếp xúc gần với người nhiễm COVID-19. Mà trong hoàn cảnh cả đất nước đang cùng đồng lòng chống dịch thì việc cài đặt ứng dụng này là rất tốt. Hoài Link của các bạn đây, nhớ cài đặt nha: https://bluezone.gov.vn/ (づ￣ ³￣)づ

• Cùng thử Preview nào.

• Tiếp theo bạn cần cài đặt plugin có tên là: “XD to Flutter”.

• Rồi sau đó chỉnh sửa, đặt tên cho pages và components để cho phần quản lý code và ảnh sau khi export được dễ dàng hơn.

• Chọn folder chứa project Flutter đã tạo trước đó. Ấn chọn “Export All Widgets” và “Export All Images”. Vậy là đã xong phần bên Adobe XD rồi (つ≧▽≦)つ

Flutter

• Sau khi export từ Adobe XD xong thì trong folder project sẽ được add thêm các file .dart. Nó sẽ báo lỗi vì mình chưa cài package hỗ trợ.

• Truy cập vào file “pubspec.yaml”, thêm đường dẫn các ảnh được export vào phần assets và “adobe_xd: ^2.0.0+1” vào dưới phần dependencies. Sau đó ấn “pub get”.

• Chỉnh sửa file “main.dart”, import file “HomePage.dart” được export từ XD và gọi đến component HomePage.

• Chạy với simulator và xem thành quả nào ʕっ•ᴥ•ʔっ

Tham khảo:

• https://blog.adobe.com/en/publish/2020/09/10/xd-flutter-plugin-now-available.html#gs.2pjl44

• https://pub.dev/packages/adobe_xd/install

You need to login in order to like this post: click here