BEIT APP Từ thiết kế đến mã phản ứng thân thiện với nhà phát triển trong vài phút với Anima

Trong bài viết này, chúng ta sẽ tìm hiểu cách biến các thiết kế tĩnh của chúng ta thành một nguyên mẫu dựa trên mã trực tiếp với các trường, biểu mẫu, bản đồ và hoạt ảnh thực, và lần lượt, chuyển đổi nguyên mẫu này thành mã React – tất cả đều được tích hợp vào một công cụ.

Đây là một bài báo được tài trợ thân thiện được viết với sự hỗ trợ tử tế của những người bạn thân yêu của chúng tôi tại Anima , những người giúp bạn thiết kế các nguyên mẫu có độ tương tác cao hoàn toàn với Sketch, Figma hoặc Adobe XD. Cảm ơn bạn!

Lời hứa về thiết kế liền mạch để dịch mã trở lại với những người xây dựng trang WYSIWYG ban đầu. Mặc dù đạt được mục tiêu đáng ngưỡng mộ, nhưng lỗ hổng lớn nhất của họ (trong số nhiều người) là đoạn mã khủng khiếp mà họ đã tạo ra. Chủ nghĩa hoài nghi vẫn còn cho đến ngày nay và bất cứ khi nào ý tưởng này xuất hiện trở lại, mối quan tâm lớn nhất luôn liên quan đến chất lượng và khả năng bảo trì của mã.

Điều này sắp thay đổi khi các sản phẩm mới đã có những bước nhảy vọt đi đúng hướng. Mục tiêu cuối cùng của họ là tự động hóa thiết kế để xử lý mã, nhưng không phải trả giá bằng chất lượng mã. Một trong những sản phẩm này, Anima , đang cố gắng thu hẹp khoảng cách bằng cách cung cấp một thiết kế hoàn chỉnh cho nền tảng phát triển.

Anima Là Gì? 

Anima là một công cụ thiết kế để phát triển. Nó nhằm mục đích biến quá trình bàn giao thiết kế thành một sự cộng tác liên tục. Các nhà thiết kế có thể sử dụng Anima để tạo ra các nguyên mẫu đáp ứng đầy đủ trông và hoạt động giống hệt như thành phẩm (không cần viết mã). Đến lượt nó, các nhà phát triển có thể lấy những thiết kế này và xuất chúng thành mã React / HTML thân thiện với nhà phát triển. Thay vì viết mã giao diện người dùng từ đầu, họ có thể tự do tập trung vào logic và kiến ​​trúc.

Nó thực hiện điều đó với sự trợ giúp của một plugin kết nối trực tiếp với công cụ thiết kế của bạn và cho phép bạn định cấu hình các thiết kế và đồng bộ hóa chúng với nền tảng web của Anima. Đó là nơi những người còn lại trong nhóm có thể truy cập vào nguyên mẫu, thảo luận về nó và chọn các thông số kỹ thuật hoặc nội dung hữu ích. Ngoài chức năng cộng tác, nó mang lại cho các nhà phát triển một khởi đầu thuận lợi nhờ vào mã được tạo.

Điều này có thể tạo ra sự khác biệt lớn trong điệu nhảy qua lại truyền thống giữa nhà thiết kế và nhà phát triển. Nó giữ mọi thứ ở một nơi, đồng bộ và cho phép cả hai bên thực hiện thay đổi bằng cách sử dụng mã hoặc công cụ thiết kế.

Cài Đặt Plugin Và Thiết Lập Dự Án  

Bắt đầu với Anima rất đơn giản. Trước tiên, bạn cần tạo một tài khoản và sau đó cài đặt plugin. Trong khi tôi sẽ sử dụng Figma cho hướng dẫn này, Anima hỗ trợ tất cả các công cụ thiết kế chính: Sketch, Figma và Adobe XD.

• Anima cho Sketch
• Anima cho Figma
• Anima dành cho Adobe XD

Plugin Anima có sẵn cho Sketch , Figma và Adobe XD

Sau khi hoàn thành việc này, hãy đảm bảo rằng bạn tạo một dự án trên nền tảng của Anima – đó là nơi các thiết kế của chúng tôi sẽ xuất hiện khi chúng tôi đồng bộ hóa chúng.

 

Bản thân plugin được chia thành ba phần chính, mỗi phần có một danh sách các tùy chọn. Hầu hết những gì chúng ta sẽ làm chỉ đơn giản là chọn một trong những tùy chọn đó và sau đó áp dụng một lớp hoặc khung cụ thể trong Figma .

Với các tùy chọn để chọn các tùy chọn lớp, luồng hoặc bố cục thông minh

Tạo Một Mẫu Thử Nghiệm Đáp Ứng

Với mục đích của bài viết, chúng tôi đã thiết kế một trải nghiệm tích hợp sẽ được chuyển đổi thành một nguyên mẫu tương tác. Cho đến nay, chúng tôi đã chuẩn bị màn hình cho ba điểm ngắt phổ biến nhất và chúng tôi đã liên kết chúng với nhau bằng cách sử dụng các tính năng tạo mẫu của Figma.

Một trong những điều thú vị mà chúng tôi có thể đạt được với Anima là tạo ra các nguyên mẫu phù hợp với mọi kích thước màn hình. Các nguyên mẫu truyền thống làm bằng hình ảnh có thể nhấp được là hình ảnh tĩnh và thường bị lỗi dưới các kích thước màn hình khác nhau.

Để làm điều đó, hãy nhấp vào tùy chọn “Breakpoints” và Anima sẽ yêu cầu bạn cung cấp các khung mà bạn muốn kết nối. Chọn tất cả các khung để thêm chúng làm điểm ngắt. Sau đó xác nhận lựa chọn của bạn bằng cách nhấp vào “Xong”.

Làm Cho Các Thiết Kế Của Bạn Trở Nên Sống Động Với Các Lớp Thông Minh

Chúng ta có thể đưa mọi thứ đi xa hơn một chút. Vì Anima chuyển đổi thiết kế thành mã, khả năng là vô tận cho những thứ chúng tôi có thể thêm vào để làm cho nguyên mẫu của chúng tôi thực tế hơn.

Hoạt ảnh và hiệu ứng di chuột sẽ là một cách tuyệt vời để làm cho nguyên mẫu sống động hơn và gây ấn tượng với các bên liên quan. Anima cung cấp nhiều tùy chọn có thể được áp dụng cho bất kỳ lớp hoặc thành phần nào. Trong trường hợp của chúng tôi, chúng tôi sẽ chọn lớp tiêu đề, sau đó chọn “Hoạt ảnh lối vào” và “Làm mờ dần”. Trong trường độ trễ, chúng tôi sẽ thêm 0.5.

Đối với mỗi trường, chúng tôi sẽ thêm hiệu ứng ánh sáng khi di chuột. Chọn lớp trường, sau đó chọn “Hiệu ứng di chuột” và chọn “Phát sáng”. Lặp lại tương tự cho nút.

Một trong những tính năng độc đáo mà Anima cung cấp là khả năng thêm các trường và biểu mẫu trực tiếp vào nguyên mẫu. Vì chúng tôi đang thiết kế trải nghiệm tham gia, điều này thực sự sẽ thực sự hữu ích cho chúng tôi. Nhập dữ liệu là một trong những điểm khó khăn lớn nhất trong bất kỳ trải nghiệm sản phẩm nào và thực sự khó để thử nghiệm các ý tưởng mà không tính đến nó.

Tương tự như cách chúng ta đã thêm các hiệu ứng trước đó, bây giờ chúng ta chọn thành phần trường và chọn “Trường văn bản”. Từ đó, chúng ta sẽ phải chọn loại trường mà chúng ta cần. Ví dụ: nếu chúng ta chọn trường mật khẩu, đầu vào sẽ bị ẩn và Anima sẽ thêm chức năng hiển thị / ẩn vào trường.

Như bạn có thể thấy, các trường hiện hoạt động như dự kiến. Cũng có thể thu thập tất cả dữ liệu được thu thập từ các trường đó trong một bảng tính. Chọn nút “Tiếp tục” và sau đó nhấp vào tùy chọn “Nút Gửi” trong Anima. Thao tác này sẽ mở ra một hộp thoại bổ sung, tại đây chúng ta cần chọn hộp “Thêm vào bảng tính” và chọn các điểm đến chuyển hướng trong trường hợp thành công hoặc thất bại.

Tiếp theo, chúng tôi sẽ thêm hoạt ảnh Lottie cho màn hình thành công của chúng tôi vì nó sẽ là một cách tuyệt vời để làm cho trải nghiệm hấp dẫn hơn một chút. Để làm được điều đó, chúng ta cần thêm một lớp giữ chỗ vào vị trí của hoạt ảnh, sau đó chọn nó và chọn tùy chọn “Video / GIF / Lottie” trong plugin.

Sau đó, chúng tôi sẽ dán URL của hoạt ảnh Lottie của mình và chọn các hộp “Tự động phát” và “Không có điều khiển”. Trong trường hợp của chúng tôi, chúng tôi không muốn có bất kỳ điều khiển trình phát video nào, vì đây là một hoạt ảnh thành công.

Nhà Phát Triển Có Thể Lấy Mã Phản Ứng Có Thể Tái Sử Dụng

Như đã đề cập trước đó, với tư cách là các nhà phát triển, chúng tôi thường nghi ngờ các công cụ tạo mã, chủ yếu là bởi vì viết một cái gì đó từ đầu luôn nhanh hơn việc cấu trúc lại một cái gì đó được viết kém. Để tránh điều này, Anima đã áp dụng một số phương pháp hay nhất để giữ cho mã sạch, có thể tái sử dụng và ngắn gọn.

Khi chuyển sang chế độ “Mã”, chúng tôi có thể di chuột và kiểm tra các yếu tố trong thiết kế của mình. Bất cứ khi nào chúng tôi chọn một phần tử, chúng tôi sẽ thấy mã được tạo bên dưới. Các giao diện mặc định là Phản ứng , nhưng chúng tôi cũng có thể chuyển sang HTML và CSS. Chúng tôi cũng có thể điều chỉnh các tùy chọn trong quy ước cú pháp và đặt tê

Các lớp sử dụng lại tên của các lớp trong công cụ thiết kế của bạn, nhưng cả nhà thiết kế và nhà phát triển cũng có thể đổi tên các lớp. Tuy nhiên, điều quan trọng là phải đồng ý về các quy ước đặt tên thống nhất sẽ rõ ràng và dễ hiểu đối với cả nhà thiết kế và nhà phát triển.

Ngay cả khi chúng tôi đã để một số lớp không được đặt tên, các nhà phát triển thực sự có thể ghi đè chúng và thực hiện các thay đổi khi cần thiết. Trải nghiệm này khiến tôi nhớ đến tính năng Kiểm tra phần tử của Chrome và tất cả các thay đổi đều được lưu và đồng bộ hóa với dự án.

Nếu bạn đang sử dụng Vue hoặc Angular, dự kiến ​​Anima cũng sẽ bắt đầu hỗ trợ các framework này trong tương lai gần.

Hướng Về Tương Lai

Như chúng ta có thể thấy, khoảng cách giữa thiết kế và mã liên tục bắc cầu. Đối với những người viết mã, việc sử dụng một công cụ như vậy là rất thiết thực vì nó có thể giảm bớt rất nhiều công việc lặp đi lặp lại trong giao diện người dùng. Đối với những người thiết kế, nó cho phép tạo mẫu, cộng tác và đồng bộ hóa mà rất khó đạt được nếu gửi qua lại các hình ảnh tĩnh.

Điều chắc chắn là Anima loại bỏ rất nhiều hoạt động lãng phí trong quá trình thực hiện và cho phép cả nhà thiết kế và nhà phát triển tập trung vào điều quan trọng: xây dựng sản phẩm tốt hơn. Tôi mong muốn được xem những gì sẽ xảy ra tiếp theo trong Anima!

Nguồn: https://www.smashingmagazine.com/2021/01/design-developer-friendly-react-code-animaapp/