无法将Figma设计转换为react

Question

我正在尝试转换一个基本的成功的页面设计从图形到反应代码使用动画。

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;

Answer 1

我检查了react代码，它对我来说是有效的，也许有一些基本的东西没有正确设置。第一件事是尝试查看您的react代码是否显示一个简单的hello world文本。

我看到您正在使用anima导入figma和导出react代码。如果你设法让它工作，这是很好的，如果不是，我建议尝试Desech Studio，看看它是否对你有效。

它导入具有相对html/css定位的Figma，并导出react代码。有关更多详细信息，请参阅github repo。

Answer 2

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