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í    được cài đặt trên máy cục bộ của chúng tôi để cài đặt gói Node> = 14.0.0 và npm> = 5.6  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   sau khi tạo tài khoản và tìm kiếm   .  cộng đồng AWS 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 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 Nguyên thủy    : 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 Thành phần của Tôi    : 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. Trang Ví dụ  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   của bạn và tìm kiếm AWS Amplify.  tài khoản  Chọn AWS Amplify từ danh sách dịch vụ. Khi ở trong trang tổng quan   , hãy nhấp vào nút   và chọn   từ menu thả xuống.  Tất cả ứng dụng Ứng dụng mới Xây dựng ứng dụ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.     từ các thành phần được nhập của Figma giống như được hiển thị trong Amplify Studio. FormCheckout  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   nếu bạn phải đối mặt với thử thách này. hướng dẫn này  Quá trình cài đặt tạo một thư mục   mới trong thư mục   , chứa tất cả các thành phần UI được kéo từ Amplify Studio.  ui-components src  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:                                   root.render(           ); // 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' ));    < 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,   trong quá trình cài đặt phụ thuộc Giao diện người dùng Khuếch đại. bên trong  tập tin, sao chép và dán các liên kết CDN phông chữ Google sau đây vào  yếu tố:  Inter   public/index.html   <head>   ... <head>                                 </head> ... // public/index.html 
 < 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,wght@-10..0,100..900&display=swap" 
    rel = "stylesheet" 
 /> 
  Hiển thị các thành phần  Để hiển thị các thành phần   và   , hãy điều hướng đến  tập tin và xóa tất cả mã. FormCheckout NavBar   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   hướng dẫn bạn từng bước sử dụng AWS Amplify. tài nguyên  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   này. repo GitHub

This story contains new, firsthand information uncovered by the writer.

Amazon

Google

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

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à 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

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

85 Stories To Learn About Travel

72 Stories To Learn About Adam Smith

94 Stories To Learn About John Locke

61 Stories To Learn About Polotical Philosophy

85 Stories To Learn About Travel

72 Stories To Learn About Adam Smith

94 Stories To Learn About John Locke

61 Stories To Learn About Polotical Philosophy

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps