无法转换 Figma 设计以做出反应答案

【问题标题】：Unable to Convert Figma design to react无法转换 Figma 设计以做出反应
【发布时间】：2021-05-16 03:14:31
【问题描述】：

我正在尝试使用 anima 将基本的成功页面设计从 figma 转换为 reactcode。

import React from "react";

function success() {
  return (
    <Frame1
      ellipse2="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/ellipse-2@2x.svg"
      ellipse1="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/ellipse-1@2x.svg"
      maskGroup="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/mask-group@2x.svg"
      great="Great!"
      text1="Your payment was successfull"
      place="Okay"
    />
  );
}

export default success;


function Frame1(props) {
  const { ellipse2, ellipse1, maskGroup, great, text1, place } = props;

  return (
    <div className="frame-1">
      <div className="overlap-group1">
        <img className="ellipse-2" src={ellipse2} />
        <img className="ellipse-1" src={ellipse1} />
        <div className="typcntick smart-layers-pointers ">
          <img className="mask-group" src={maskGroup} />
        </div>
        <h1 className="great avenirnext-medium-black-48px">{great}</h1>
      </div>
      <div className="text-1 avenirnext-medium-black-24px">{text1}</div>
      <div className="overlap-group">
        <Rectangle1 />
        <div className="place avenirnext-demi-bold-white-36px">{place}</div>
      </div>
    </div>
  );
}


function Rectangle1() {
  return <div className="rectangle-1 smart-layers-pointers "></div>;
}

我已经从 anima 复制了 jsx 和 css 文件，现在我正在尝试将其导入到我的应用程序中。但我无法在我的应用程序上显示它。我该如何解决这个问题？

import React from 'react';
import  './success.css';
import success from './success';

const App = () => {

  return (
    <div>
      <success/>
    </div>
  );
}

export default App;

【问题讨论】：

错误是什么？
@Dominik 我的反应应用程序没有显示任何内容。它是空白的。
您分享的底部代码似乎无关紧要。您正在运行上面的示例？
@Dominik 是的，我编辑了它。我仍然得到相同的空白页。
当我在上面运行你的代码时，我得到一堆绿色循环和一些文本。当然不是空的...codesandbox.io/s/crazy-sutherland-n8qfz?file=/src/App.js

标签： reactjs figma

【解决方案1】：

我检查了反应代码，它对我有用，也许有一些基本的设置不正确。首先是尝试查看您的反应代码是否显示简单的 hello world 文本。

我看到您正在使用 anima 来导入 figma 并导出 React 代码。如果你设法让它工作，那就太好了，如果没有，我建议尝试 Desech Studio，看看它是否适合你。

它以相对 html/css 定位导入 Figma，并导出反应代码。这是github repo了解更多详情。

【讨论】：

【解决方案2】：

您导入和导出的成功组件应该以大写字母开头，例如 Success 然后只有 react 理解它是一个组件

【讨论】：