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

Book a call with @terieyenike

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

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

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

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

Companies Mentioned

@terieyenike

Credibility

NHỮNG BÀI VIẾT LIÊN QUAN