使用Figma创建的设计与React应用程序进行集成【入门】

2 年 ago

文, 翔

3 minutes

首先

这次我们将解释如何使用AWS Amplify Studio将在Figma中创建的设计与React应用程序进行集成。

「我从来没有碰过AWS！连React也没碰过呢！」即使是那些没有接触过这些的人，也可以轻松地阅读和理解，希望你能看一下。

目标成果物 – mù guǒ wù

Figmaで作成したボタンコンポーネントでクリックイベントを試す

这篇文章要做的事情

Reactアプリとの連携

这篇文章针对的对象

将来的に流行りそうな技術をサクッと試してみたい人

AWS Amplify Studio（亚马逊云服务 Amplify Studio）

AWS Amplify Studio是什么

我引用了公式文件。

Amplify Studio会自动将在Figma上设计的稿件转换成人类可读的React组件代码。此外，Amplify Studio还允许开发者将生成的组件直观地连接到应用程序的后端数据。

通过使用Amplify Studio，在设计师使用Figama创建的设计中，自动将其转换为React代码，开发者可以利用生成的代码在React应用程序中实现Figama创建的设计界面。

使用AWS Amplify Studio，实现未来和利益。

我认为在实际业务中的全面应用还需要一些时间，但我推测未来的应用开发可能会按照以下步骤进行。

エンジニアは共有されたコードをアプリに反映

这一结果使得工程师们可以减少在用户界面实现上所花费的成本，从而能够专注于功能和逻辑方面的开发。

我們將從下一章開始，實際上使用Figma和Amplify Studio來開發React應用程式。

启动AWS Amplify Studio

请先创建一个AWS账户并进行操作。(即使是AWS初学者，也可以轻松跟随步骤进行)

我们将按照官方文档的参考进行实施步骤。

连接到Amplify

首先我們要訪問官方文件。

点击公式文件中的“使用 Amplify Hosting 进行部署”。

在打开的屏幕上点击“连接到GitHub”，与GitHub进行合作。

请您在继续之前先创建一个GitHub账户。

部署

一旦完成GitHub的链接后，此页面将打开，然后输入应用程序的名称（任意）。

当输入完成后，点击创建新角色。

由于项目已自动选择，因此直接点击右下角的下一步：访问权限。

请点击标签并继续到下一步。

在标签添加页面上，您无需输入任何信息即可进入下一步：确认。

最后会出现确认页面，请点击创建角色。

由于通过这个步骤已经创建了角色，现在返回到应用程序部署界面并点击更新按钮。

因此，現在可以選擇剛剛創建的角色，請保存選擇並點擊部署。

通过这个操作，应用部署已经完成了。

启动AWS Amplify Studio

接下来，切换到后端环境标签，并点击启动工作室。

对于还未构建的人们，请点击显示的 “开始” 按钮后进行操作。

您可以确认AWS Amplify Studio的界面已经显示出来了。

通过左侧菜单选择“数据”，您可以确认已创建了“主页数据”。

请直接点击右上方的「保存并部署」按钮。

出现正在部署的画面，请稍等片刻。

AWS Amplify Studio和Figma的整合配合。

首先，我们将开始将之前准备的AWS Amplify Studio和Figma进行协作。

从左侧菜单选择UI库，然后点击开始。

点击①以复制AWS Amplify UI的模板套件。

请注意，尚未注册 Figma 账户的人，请提前创建一个账户（免费）。

然后，您可以启动Figma应用程序并确认模板已加载。

点击Figma右上方的Share按钮，然后点击Copylink来复制链接。

将复制的链接粘贴到刚才的②中，并点击“继续”。

通过以上步骤，Figma和Amplify Studio已经成功连接。

使用Figma进行设计并在Amplify Studio生成代码。

创建一个卡片组件

首先，点击Figma中的以下部分，创建一个300×200（可选）的画框。

我们将在这个300×200的框架上创建卡片组件。

我会随意地搜索图像，并将其放在框架的顶部。（卡片的图像部分）

我們目前的圖片是固定的，但之後可以動態更改設定。

请在标题和正文中填入内容。

然后选择创建的Frame，右键点击并选择”创建组件”。

用这个方法，你可以在Figma上创建卡片组件。

我們需要點擊名稱部分兩下，然後將其更改為「FigmaCard」。

这个组件也适用于React应用程序。

将创建的组件反映到AWS Amplify Studio中。

为了将当前创建的组件反映到AWS Amplify Studio中，返回到屏幕上，并点击Sync with Figma。

然后，您可以确认FigmaCard组件已成功创建并显示如下。

点击右上角的”Accept”按钮，导入创建的FigmaCard组件，然后点击”Save Component”按钮。

你可以确认Components中已经包含了FigmaCard。

准备将数据放入组件中。

我们要为刚刚创建的FigmaCard组件准备放置的数据。

点击左侧菜单中的”Content”，然后点击”自动生成种子数据”。

我会创建5个数据片段。

可以确认已经创建了5条数据。

通過点击数据表中的行，我们可以将任意的数据输入到地址、图片URL和价格这些字段中。

补充说明，image_url中所放置的图片URL是从Google获取的。

我还将其他4个数据输入如下。

数据的准备就完成了。

将准备好的数据与FigmaCard组件进行关联

接下来，我们将把刚刚创建的数据反映到FigmaCard组件中。

回到UI Library的菜单，选择FigmaCard01，然后点击Configure。

点击Add prop，将Name设为home，Type设为Home。

当在组件中点击图片时，会出现一个名为”Child properties”的选项，点击”Set prop”，然后将”Prop”设为”src”，”Value”设为”home.image_url”。

通过这个操作，你可以将之前在Content中创建的image_url数据与它关联起来。

我们同样要设置标题和正文的部分为子属性Child properties。

只需一种选择，将上述句子以中文为母语进行改述：
确认设置完整后，可以看到之前输入的数据已经反映在FigmaCard组件上。

接下来，我们将创建一个Figma组件的集合，并插入5个数据。

创建收藏时，可以确认将显示出五个组件。

在这个系列中

カラムを3に設定

关于填充（padding），由于我的环境安装了它会导致错误，所以暂时不安装继续进行。

确认从获取组件代码中生成代码，并完成创建。

创建一个React项目，并嵌入此代码。

React应用和Amplify Studio的集成。

搭建React的环境

创建一个React项目。

这次我创建了一个名为aws-amplify-studio-test的项目。

npx create-react-app aws-amplify-studio-test

如果能够创建，可以使用以下命令启动应用程序。

npm start

我們將把剛才創建的組件放入這個畫面中。

本地环境的设置

首先安装amplify-cli。

npm install -g @aws-amplify/cli

与React应用的集成

如果你已经准备好了，就打开之前的React应用程序，然后输入之前通过“Get component code”确认过的命令来进行连接。

首先，执行最高级的命令，执行amplify pull。

amplify pull --appId xxxxxxx xxxxxxxxx

然后转到如下画面，点击“是”。

当 React 应用在终端上提出问题时，请按照下面的方式回答。

在此之后，当我们查看React应用程序时，将会创建一个名为src/ui-components的目录，表示协作已经完成。

在React应用程序中显示创建的组件。

首先，在刚才的模态框上，点击“初始项目设置”选项卡。

我会按照一种顺序执行命令。

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

当执行命令后，像步骤2一样使用AmplifyProvider来包装应用程序。

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

import Amplify from "aws-amplify";
import "@aws-amplify/ui-react/styles.css";
import { AmplifyProvider } from "@aws-amplify/ui-react";
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <>
    <AmplifyProvider>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </AmplifyProvider>
  </>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

最后，在APP.js中加载并显示FigmaCard组件。

通过写下以下2~3个描述，可以读取它。

import logo from "./logo.svg";
import "./App.css";
import { FigmaCard01Collection } from "./ui-components";

function App() {
  return (
    <div className="App">
      <FigmaCard01Collection />
    </div>
  );
}
export default App;

我会启动本地环境。

npm start

当你启动时，可以确认之前创建的组件正在显示。
（应该调整图片尺寸就好了…）

创建一个按钮组件

接下来，在Figma中创建一个按钮组件，尝试触发点击事件。

设计制作与AWS Amplify Studio的集成与先前相同，因此简要介绍如下。

首先在Figma上创建一个新的按钮设计，然后通过右键点击创建组件。

然后，您需要在Amplify Studio中点击以下按钮来进行设计协作。

一旦合作完成后，您需要在Configure中设置如下的label和onClick属性。

在onClick事件中，设置了点击时要执行的动作。

我创建了一个点击事件，当点击时会跳转到Qiita的首页。

完成以上步骤后，点击”Get component code”并输入之前的命令，将修改内容与React应用程序进行集成。

amplify pull --appId xxxxxxxxxxxx

将App.js进行如下修改。

import logo from "./logo.svg";
import "./App.css";
import { Frame9 } from "./ui-components";

function App() {
  return (
    <div className="App">
      <Frame9 />
    </div>
  );
}

export default App;

当你启动本地环境，你可以确认按钮已显示。

npm start

点击时，您还可以确认是否转到Qiita的首页。

我来看一下按钮组件的内部内容。

当查看创建的按钮组件（Frame9）的文件时，可以确认它通过props接收label和onClcik。

只显示相关部分

  const { Button, button, overrides, ...rest } = props;
  const OnClick = useNavigateAction({
    target: "_blank",
    type: "url",
    url: "https://qiita.com/",
  });
 return (
   <Text
        children="ボタン"
        onClick={() => {
          OnClick();
        }}
        {...getOverrideProps(overrides, "\u30DC\u30BF\u30F3")}
      ></Text>
   ）

我试着将 onClick 的部分更改为直接编写的代码，以显示一个警告处理。

 const OnClick = () => {
    alert("クリックしました");
  };

点击按钮后，确认显示了警告提示。

最后

你觉得怎么样呢？

本次我们使用AWS Amplify Studio，介绍了将Figma的设计与React应用程序中的组件进行协作的步骤。

由於在邏輯方面的結合等方面仍然存在困難，因此我認為將其引入到正式的專案還需要一段時間，但我感受到了其巨大的潛力。

我期待着能在实际工作中进行全面引入的那一天。

如果方便的话，我很高兴您能阅读我撰写的其他各种文章。