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

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

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

figma Android 设计稿 figma安卓_figma Android 设计稿

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

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

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

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

figma Android 设计稿 figma安卓_设计规范_02

第四步:导出Figma切图元素

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

figma Android 设计稿 figma安卓_figma_03

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

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