Figma切图，轻松上手！

对于UI设计师来说，在设计网页或移动应用界面时，不仅需要考虑视觉效果和用户体验，还需要考虑实际开发过程中的实现。例如，与开发人员合作，将设计草案中的图片、图标、插图等元素转换为网页或移动应用程序的代码，即切割图。Figma设计工具以其在线合作和无缝连接团队人员的优势，在海外受到设计师的欢迎。然而，Figma的英语门槛、网络问题等，对于许多使用Figma的国内新手设计师来说，直接使用Figma切割图片更麻烦。 接下来，我将告诉你如何用中文版的Figma代替即时设计来完成Figma视觉稿的切割，希望能帮助你提高工作效率。

即时设计 - 可实时协作的专业 UI 设计工具 (js.design)https://ad.js.design/special/figma/?source=csdn&plan=bttcsdn11101

第一步：将Figma设计图导入即时设计

如下图所示，在即时设计的工作台页面上，单击“导入文件”按钮，然后选择导入Figma的文件类型，导入你需要进行切图的文件。

第二步:选择Figma切图的元素

在即时设计中，打开上一步导入的Figma设计图进入即时设计编辑页面。然后，在即时设计编辑页面中选择要切割的元素，只需点击鼠标选择要切割的元素即可。

第三步：调整Figma切图元素的大小

在导出切图元素之前，需要确保它们的大小是正确的。您可以在即时设计中选择元素，然后使用缩放工具在右属性面板上调整它们的大小。如果您想导出多个元素，您可以选择它们，然后使用右属性面板的对齐工具将它们排列整齐。

第四步：导出Figma切图元素

选择要切图的元素后，需要导出它们。在即时设计右底部属性面板的“导出”模块时，用鼠标点击“+”进行切图导出，即时设计提供PNG\JPG\SVG\PDF等导出选项，您可以选择其中一个或多个，也可以根据需要选择导出的切图尺寸，然后点击“导出”按钮导出切图元素，如下图所示。

第五步:检查导出的切图元素

导出切图元素后，需要检查其导出效果是否正确。您可以打开导出的图片或SVG文件，在浏览器或其他程序中查看它们，如下图所示。如果切图元素导出效果不正确，可以返回即时设计进行调整和重新导出。

即时设计 - 可实时协作的专业 UI 设计工具 (js.design)https://ad.js.design/special/figma/?source=csdn&plan=bttcsdn11101