如何将Figma设计文件导入Storyboard

2023-04-1813:13:13办公软件与工具应用Comments1,166 views字数 1902阅读模式
如何将Figma设计文件导入Storyboard

Figma是一个基于云计算的协作式界面设计工具,让设计师在设计过程的每个阶段都能与他们的团队成员进行沟通。它是一款基于浏览器的工具,通过将所有的设计阶段集中在一个平台上,如构思、创建原型、测试和迭代,简化了设计过程。从设计一个智能手表应用到一个大型电子商务网站,您都可以在Figma中轻松完成。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

实时协作能力使 Figma中 的协作式 UI 设计变得简单。当 UI 设计人员可以在 Figma 中协作完成设计部分,并将其导入Storyboard以开发 GUI(图形用户界面)时,可以进一步缩短和简化 UI 设计从构思到开发的过程。由于Storyboard提供了独特的平行工作流程,这可以节省大量的时间,并将设计师和开发人员的工作环境解耦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

此外,Crank的嵌入式GUI框架——Storyboard消除了过去设计迭代时不合理的地方,使产品团队能够更有效地致力于优化终端用户体验(UX),因为设计变更不会耽误或破坏开发工作。这减少了从开发到测试所消耗的时间,帮助公司更快地进入市场。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

虽然目前Storyboard没有原生的Figma导入功能,但这并不意味着Figma用户不能使用Storyboard并将其Figma UI设计带入其中。以下是在Storyboard中使用Figma文件的三种方式:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

  1. 导出图层并在Storyboard中处理一个位置
  2. 将设计文件从Figma设计转换到Photoshop中
  3. 将设计从Figma导出到Sketch

让我们简单讨论一下这三种可能性,并了解每种可能性的优点和缺点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

1. 导出图层并处理Storyboard中的一个位置
Figma 使导出设计变得简单,并允许对导出设计中的哪一层或哪几层进行大量控制。您可以将 Figma 导出设置为:直接将所需的导出层复制到 Storyboard应用内的 "image "目录下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

这种方法的缺点是,您无法在Storyboard中获得所有自动设计布局,需要自己建立图层和控件。虽然这听起来很麻烦,但Storyboard通过许多标准化的设计工具使这一过程变得简单快捷,而且通过正确使用Storyboard图层,您会发现您可以大量地重复使用UI(用户界面)元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

但是您也需要注意,如果设计还没有完成,您还需要继续从Figma导出更新过的内容到您项目中的Storyboard应用图像目录,图像的更新就会自动被应用。尽管如此,开发人员还是需要管理新的元素、位置和尺寸变化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

2. 将设计文件从Figma转换成Photoshop(PSD)
由于Storyboard没有原生的Figma支持,但鉴于Storyboard对导入Photoshop PSD文件有很好的内置支持,您可以随时将Figma设计转换为PSD文件并在Storyboard中使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

虽然Figma目前没有提供任何内置插件来将Figma设计转换和导出为PSD文件,但有一些在线资源可以帮助实现这种格式转换。这个是我们以前使用过的,效果不错:Figma 到 PSD 的转换器(https://magicul.io/converter/figma-to-psd)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

然而,将Figma文件转换到Photoshop然后再转换到Storyboard的缺点是,您必须按使用量付费,而且在将其导入Storyboard之前,您仍然需要对PSD文件进行一番清理。好处是,您可以获得Storyboard中标准PSD导入的所有布局和导入功能,还可以利用Storyboard的重新导入功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

3. 将设计文件从 Figma 导出到 Sketch(仅限 Mac)
这一解决方案适用于Mac用户,因为他们可以将Figma设计文件转换成Sketch,然后将Sketch文件导入Storyboard。一个免费的插件(https://www.hypermatic.com/convertify)使其非常容易使用,而且我们用它取得了令人印象深刻的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

这个解决方案的缺点是,您需要在Mac上使用它,因为您的机器上需要Sketch,而Sketch只在Mac上运行。好处是导入很干净、直接。您可以多次迭代而不需要任何费用,而且您还可以使用Storyboard的重新导入功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

Storyboard还允许重新导入Photoshop和Sketch的内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

通过Content Re-Import功能,您可以将Sketch或Photoshop文件中的修改内容上传到现有的(之前通过导入Sketch或Photoshop创建的)Storyboard应用中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

通过Storyboard的快速设计导入和迭代技术,产品团队可以展示他们的优秀用户体验,并接受频繁的设计迭代和验证——而不用担心浪费时间在替换资产上或影响已经完成的开发工作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/35246.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/office/35246.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定