太好了，有工具可以将Figma的设计稿可以导出为一个完整的HTML代码包，以及React或者Vue组件的代码。这个工具就是Anima，Anima是Figma的一个插件，您只需要在Figma种安装Anima的插件即可。
用Anima有两种简单的方式可以从Figma设计稿导出HTML和CSS：
第一种方案：直接共Figma的Dev模式导出HTML代码包（在只读权限下的Figma账号可以有用这种方式）
步骤1： 在Figma中开启Dev模式
首先，打开Figma并且导航到Inspect面板，在面板的顶部，你会找到一个绿色的开关可以切换到Dev模式。点击它并且切换到“插件”标签页。
步骤2： 运行Anima插件
接下来，你需要打开Dev模式下的Anima的插件。如果你不能看见则会列表中看见它，你可以在搜索框中输入“Anima”搜索它（如上图）。从这里你可以运行Anima的插件，或者把它固定在面板的顶部以方便访问。
步骤3：选择一个Figma的组件，层或者帧
选择任何Figma的component，layer或者frame以便实时的获取它们相应的HTML代码。你可以从面板中拷贝代码，并且复制到CodeSandBox上运行，或者下载代码包到本地。
这是一种在屏幕上显示组件最快的，也是最直接的方法。当时Dev模式可以阅读的时候，这也是一种把开发者手稿传递给读者的完美方式。
但是，当你希望导出一个完整的项目，里面有很多个页面和一些交互动作的时候，你就会需要用到Anima的web app。但是又担心不会，不用担心，它也仍然是一种非常简单和快速上手的方法。
方式2：用Anima的web app获取整个项目的HTML代码（需要用修改权限）
步骤一： 在Figma的编辑模式下运行Animal的插件
首先，在编辑模式（主模式，即默认的模式）下打开你的Figma项目，并且运行Anima的插件。如果你已经在Dev模式下运行过Anima，页面上就会在“最近列表”种显示出来。
步骤二：同步你想要导出为HML的Figma项目
为了能在Anima的web app中打开Figma项目，你需要在Figma同步它到Anima中。（请见 如何同步你的项目到Anima中 ）
当你的设计成功给同步到了Anima的web app上，你将会在Anima的插件上看到成功的通知。点击“Go to Anima”打开新标签页就可以浏览你的Figma设计了。
步骤3： 选择你的导出选项（HTML和CSS），并且导出代码
在右上角点击“Export code”，并且选择“Full Project”，就会弹出一个弹出框，让你选择你希望导出的语言框架。这时，请选择“HTML”，“Pixels”（Px），和“Flexbox”（为了让Figma记住这种行为选择）。
点击下载ZIP，你的项目代码包就准备好了。
代码包里面是什么？
下载的代码包会以一个zip包保存在你电脑中选中的位置。在这个zip包中，你可以看见关于你的设计的所有文件（包含HTML，CSS，images和字体文件）。
代码包被解压后，找到HTML文件后双击，你就可以在本地用浏览器预览它们了。你将会看到你设计的所有元素和它们的动作，就像看到最终的产品一样。
用文本编辑器打开这些文件，就会看到生成的结构整齐的HTML和CSS代码。
1） 打开每个设计的屏幕，你会被提供这样的HTML和CSS文件。
2）带有断点的屏幕共享相同的HTML和CSS文件。
准备好导出Figma设计的最终产品样式的HTML代码了吗？
