王尘宇

从PS到Figma

一直使用PS做UI。无意间接触了Figma，在查找资料对其有了初步了解之后，决定入坑。

首先，PS的知名度不用多说，它是很多人学习的第一个图像软件，功能强大，一专多能，不可否认，现在用PS做UI的仍不在少数。

虽然有关图像图形的几乎任何功能都可以用PS实现，但在很多方面，它并没有达到极致。矢量图形是PS的弱项，它并不是一个for UI设计师的专门软件，在很多设计上，可以处处体会到它的笨拙。 Sketch的出现让设计师们可以优雅地工作，但它只能在mac os运行，阻断了大批windows用户。 而Figma在界面设计上和Sketch极为相似，运行在浏览器上，是一个web应用，不存在跨平台问题。

其次，Figma颠覆了PS的方式，在UI设计上，大大提高了效率。 UI的工作流程：绘制线框图 ⇒ 交流修改 ⇒ 绘制高保真界面 ⇒ 添加交互 以往完成上述工作需要跨越多个软件，而Figma则可以独自完成。 纸上草图，理清产品逻辑，打开软件。

在绘制之前，先创建一个 frame，我们给它起名为 UI library。我们将把所有的可复用组件和设计规范放在这里。 我们在里面先绘制一些基本的文字样式（H1, H2, H3, H4, P, Small 等）。

此时我们可以直接使用默认样式，而不需要考虑设计。接下来绘制其它的组件，比如按钮、输入框、下拉菜单、导航条、卡片、标签、页脚等等。推荐顺序：先绘制具体页面，再提取出一些元素将其转换为组件，在移动到 UI library 中。

如此，你的设计图中几乎所有的元素都变成了组件。组件不仅可以为你节省时间，还可以保持产品一致性，这对于 UI/UX 设计来说是很重要的。 当你绘制完线框图并创建一套组件库之后，我们可以给它添加一些交互动作，Figma 内置很多交互效果可以帮我们做到。 你所需要做的就是在原型模式下，来连接需要交互的不同元素并设定他们之间的动作。

需要注意的是，如果你连接了一个 master 组件，那么这将对其所有 instance 都起作用。 下一步就是分享你的原型链接给其他人，让他们直接在原型上给予反馈。接下来，根据反馈，修改你的线框图，直到最后确定下来。 细化你的线框图样式，将其转换为高保真设计图。

在这一步，你可以直接在每个 master 组件上来应用品牌的色调和细节，得益于其组件唯一来源的特性，我们可以很快将线框图转换为高保真设计图。 打磨原型细节。你可以检查一下还有哪些元素可以作为组件，哪些组件可以优化一下，每个需要交互的元素是否都添加了链接，以及交互效果是否正确。 一切就绪，你就可以分享出一个链接给开发，并告诉他们如何查看标注，如何导出素材，他们遇到问题也可以直接在原型上评论。

figma文件怎么导入AI

figma文件导入AI的方法如下： 因为Figma没有办法直接导出交互做的动效，导出GIF只能是一帧一帧那种，像表情包那种。

figma怎么导入mastergo

导入方法与其它导入figma方法一致，方法如下：有三种方法：将文件拖放到文件管理面板中；点击文件管理面板中的Import按钮；从菜单中找到Menu>New>FromSketchFile。1、将文件导入Figma你可以将不同的文件类型导入Figma，包括Sketch或Figma的设计文件，以及图片和矢量图形。

2、导入Sketch文件你可以将Sketch（.sketch）设计文件导入Figma，这将创建一个新的Figma文件。

3、页面Pages与Sketch一样，你可以在单个Figma文件中存储多个页面，Sketch文件中存在的任何页面都将作为Figma文件中的单独页面导入。你可以在编辑器左侧的图层面板切换页面了解有关图层面板的详细信息。4、符号Symbols将Sketch文件导入Figma时，Sketch文件中包含的Symbols都将转换为组件（Components）。Sketch文件中的Symbols页面将作为包含主组件的名为Symbols的页面导入Figma。

如果你使用的是FigmaProfessional计划，则可以将这些组件发布到你的团队库。这允许你在多个设计中重用任何这些UI元素。注意：SketchSymbols将作为Figma文件导入，而不是作为团队资源库导入。

导入后，你需要将主组件发布到团队资源库。

figma怎么导入pdf文件

在添加图纸那里导入。左键点击“添加图纸”右边的下拉箭头，弹出“导入布局或PDF”→点击“导入布局或PDF”按钮→选择PDF图纸所在的文件夹，并选择需要导入的电子图→在“请选择空间”下拉框中，选择待导入的PDF图中的页码→选择完成后，点击“打开”，可将图纸导入。