Nhà thiết kế cho nhà phát triển Handoff: Cách tạo thành phần phản ứng từ tệp thiết kế Figma

Như chúng ta đã biết, một phần công việc của nhà phát triển sản phẩm là chuyển đổi thiết kế từ Figma thành mã với khuôn khổ lựa chọn và nó có thể phức tạp nếu dự án quan trọng. Bản chất của việc giao nhà thiết kế với nhà phát triển là nhà phát triển triển khai các màn hình từ thiết kế thành các thành phần chính xác và hoàn hảo đến từng pixel.

Trong bài viết này, chúng tôi sẽ mở rộng chức năng của AWS Amplify Studio để xây dựng một ứng dụng từ Figma và nhập các thành phần vào React. Sự kết nối giữa Figma và React, với sự trợ giúp của Amplify, tạo ra các thành phần React có thể tái sử dụng giúp bạn tiết kiệm thời gian và không phải viết những dòng mã dài. Quá trình chuyển đổi từ Figma sang mã diễn ra liền mạch và giúp các nhà phát triển xây dựng nhanh hơn một cách hiệu quả (đó có thể là lý do tại sao Abode mua lại Figma với giá hàng tỷ USD ).

Điều kiện tiên quyết

Để hiểu và hoàn thành hướng dẫn này, cần có những điều sau:

• Một tài khoản Figma. Đăng ký miễn phí
• Node> = 14.0.0 và npm> = 5.6 được cài đặt trên máy cục bộ của chúng tôi để cài đặt gói
• Một trình soạn thảo mã
• Cài đặt AWS Amplify CLI trên thiết bị đầu cuối của chúng tôi. Chạy lệnh này:

 npm install -g @aws-amplify/cli

• Kiến thức về JavaScript và React
• Có tài khoản AWS. Đăng ký tài khoản tại đây

Tạo bộ giao diện người dùng mẫu trên Figma

Trước khi tạo các thành phần React từ bộ giao diện người dùng, chúng ta cần thiết lập dự án Figma. Khi đã ở trên Figma, hãy truy cập cộng đồng AWS sau khi tạo tài khoản và tìm kiếm tệp Figma AWS Amplify UI kit .

Nhấp vào “Nhận bản sao” để sao chép hoặc nhân bản một bản sao của bộ giao diện người dùng.

Bộ giao diện người dùng Amplify được cài đặt với một số trang được tạo sẵn, đó là:

Trang Nguyên thủy : Trang này liên kết với AWS Amplify Studio, bao gồm tất cả các kiểu cho các thành phần được tạo sẵn. Thay đổi nội dung của trang này sẽ ảnh hưởng đến giao diện của thư viện React UI từ các thành phần Figma.

Trang Thành phần của Tôi : Trang này cung cấp cho bạn quyền kiểm soát để chỉnh sửa, thay đổi và tạo các thành phần và nó đi kèm với các thành phần được tạo sẵn.

Trang Ví dụ : Trang này hiển thị các thiết kế mẫu của một số thành phần tùy chỉnh từ trang Thành phần của tôi.

Hướng dẫn này sẽ sử dụng hai thành phần từ trang Thành phần của tôi: Giao diện người dùng NavBar và FormCheckout .

Tạo một dự án Khuếch đại

Với quá trình thiết lập hoàn tất trong Figma, hãy truy cập bảng điều khiển AWS để tạo một dự án Amplify mới. Đăng nhập vào tài khoản của bạn và tìm kiếm AWS Amplify.

Chọn AWS Amplify từ danh sách dịch vụ. Khi ở trong trang tổng quan Tất cả ứng dụng , hãy nhấp vào nút Ứng dụng mới và chọn Xây dựng ứng dụng từ menu thả xuống.

Đặt tên cho ứng dụng và nhấp vào xác nhận triển khai để tạo ứng dụng.

Với việc triển khai dự án Amplify, hãy tạo một ứng dụng React mới.

Tạo ứng dụng React

Để tạo ra một ứng dụng React mới, hãy đi tới thiết bị đầu cuối của bạn và dán vào lệnh sau:

 npx create-react-app no-code

Lệnh này giải nén tất cả các tệp và thư mục cần thiết để xây dựng một ứng dụng web đẹp và có thể mở rộng.

Khởi chạy Amplify Studio

Sau khi cài đặt ứng dụng React của chúng tôi, bây giờ là lúc để khởi chạy dự án. Nhấp vào studio khởi chạy để hiển thị hệ thống không có mã.

Nhấp vào nút khởi chạy studio khi nó đưa bạn đến trang hiển thị môi trường tổ chức cho không có mã .

Tại đây, chúng ta sẽ có thể làm rất nhiều việc như tạo mô hình dữ liệu, xác thực, v.v. Nhưng trọng tâm của chúng tôi sẽ là thư viện giao diện người dùng trong tab Thiết kế.

Nhấp vào nút Bắt đầu.

Đồng bộ hóa với Figma. Hộp thoại này sẽ cho phép bạn dán liên kết tệp Figma từ trang Thành phần của tôi .

Nếu đây là lần đầu tiên bạn thực hiện bước này, nó có thể yêu cầu xác thực để truy cập vào tài khoản Figma của bạn.

Tìm nạp các thành phần từ Figma

Chấp nhận tất cả các thay đổi của các thành phần được kéo từ Figma.

Chúng tôi sẽ có thể xem tất cả các thành phần giao diện người dùng từ tệp Figma trong Amplify Studio.

FormCheckout từ các thành phần được nhập của Figma giống như được hiển thị trong Amplify Studio.

Làm việc với các thành phần được tìm nạp trong React

Bây giờ chúng ta đã có các thành phần UI được tìm nạp trong Amplify Studio, chúng ta phải có tất cả các thành phần UI trong ứng dụng React của mình.

Để kết nối ứng dụng của chúng tôi với Amplify Studio, chúng tôi cần kéo các thành phần vào mã nguồn của mình bằng liên kết Hướng dẫn thiết lập cục bộ và chạy lệnh từ thư mục gốc của dự án.

Hãy nhớ rằng để lệnh này hoạt động, hãy cài đặt AWS Amplify CLI trên toàn cầu, như đã nêu trong phần điều kiện tiên quyết.

Chạy lệnh sẽ nhắc chương trình của chúng tôi với một thông báo ủy quyền.

Nhấp vào có để cấp quyền cho ứng dụng React. Sau đó, một loạt lời nhắc xuất hiện khi kéo các thành phần. Chấp nhận mặc định cho các câu hỏi.

Nếu bạn gặp phải các thử thách hoặc bất kỳ thông báo nhật ký lỗi nào trong thiết bị đầu cuối, có thể là do bạn chưa định cấu hình AWS.

Hãy xem hướng dẫn này nếu bạn phải đối mặt với thử thách này.

Quá trình cài đặt tạo một thư mục ui-components mới trong thư mục src , chứa tất cả các thành phần UI được kéo từ Amplify Studio.

Bắt đầu với thư viện Amplify UI

Thư viện Amplify UI React rất cần thiết cho các mục đích tạo kiểu của ứng dụng của chúng tôi, tương tự như mọi thư viện tiện ích CSS khác.

Chạy lệnh này:

 npm install @aws-amplify/ui-react aws-amplify

Phong cách

Trong điểm nhập của ứng dụng, tệp index.js, nhập tệp CSS. Sao chép và cập nhật tệp index.js với mã này chịu trách nhiệm về giao diện của ứng dụng:

 // src/index.js
import React from 'react' ; import ReactDOM from 'react-dom/client' ; import App from './App' ; import '@aws-amplify/ui-react/styles.css' ; // add this
const root = ReactDOM.createRoot( document .getElementById( 'root' )); root.render(  < React.StrictMode >
    < App />
  </ React.StrictMode >
);

Phông chữ

Giao diện người dùng Khuếch đại đi kèm với các phông chữ mặc định, Inter trong quá trình cài đặt phụ thuộc Giao diện người dùng Khuếch đại. bên trong

 public/index.html

 <head>

 // public/index.html
... <head> < link rel = "preconnect" href = "https://fonts.googleapis.com" />
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin />
< link
  href = "https://fonts.googleapis.com/css2?family=Inter:slnt,[email protected],100..900&display=swap"
  rel = "stylesheet"
/>
</head> ...

Hiển thị các thành phần

Để hiển thị các thành phần FormCheckout và NavBar , hãy điều hướng đến

 src/App.js

Tiếp theo, cập nhật tệp với mã này:

 // src/App.js
import { FormCheckout, NavBar } from './ui-components' ; const App = () => {  return (    <>
      < NavBar />
      < FormCheckout marginTop = '5em' />
    </>
 ); } export default App;

Thuộc tính margin-top cung cấp lợi nhuận trên cùng giữa thanh điều hướng và biểu mẫu thanh toán. Giá trị CSS là một phần của cách sử dụng các kiểu từ Giao diện người dùng khuếch đại trong các thành phần của chúng tôi.

Khởi động Máy chủ Phát triển

React đi kèm với tính năng tải lại nóng, tự làm mới mỗi khi có bản cập nhật trên tệp.

Chạy lệnh này:

 npm start

Máy chủ phát triển chạy trên

 http://localhost:3000

Bạn muốn triển khai ứng dụng React này lên web? Xem tài nguyên hướng dẫn bạn từng bước sử dụng AWS Amplify.

Sự kết luận

Các công cụ mã thấp với không hoặc không có mã nào là những gì Amplify Studio cung cấp. Công cụ này làm cho việc làm việc với tư cách là một nhà phát triển trở nên thú vị, vì một phần công việc của chúng tôi đã được thực hiện cho chúng tôi mà không cần xây dựng các thành phần từ đầu hoặc tốt hơn là triển khai các màn hình từ nhà thiết kế.

Chúng tôi có thể mạnh dạn nói rằng việc chuyển giao từ nhà thiết kế đến nhà phát triển là liền mạch.

Bài viết này đã dạy chúng tôi cách tạo và tích hợp các thành phần Figma của chúng tôi với sự trợ giúp của Amplify Studio và kết nối các thành phần với các thành phần React hoạt động như một ứng dụng đang hoạt động.

Mã nguồn hoàn chỉnh nằm trong repo GitHub này.