figma输出html（figma输出的图去哪了）

本篇文章给大家谈谈figma输出html，以及figma输出的图去哪了对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、figma主文件更新能更新到分支文件吗
• 2、Figma文件保存后怎么打开
• 3、App 产品原型设计用什么软件？axure？MM？visio
• 4、如何评价多人合作界面设计工具Figma
• 5、UI设计干货Figma的使用方式你还不会吗？

figma主文件更新能更新到分支文件吗

不能

figma保存原文件步骤：

1、Figma的导出功能异常强大，可以这么说，Figma中的任意一个你能操作的对象都能被你轻易的导出。不论是单个的矢量图形，还是进行了形状组合的复合图形，亦或是多个对象的编组，还是多个画板以及整个画布，都可以导出来，因为Figma的每个对象都有一个叫做export的属性，只需要给你想导出的对象添加上这个属性并进行相应的参数设置，随时随地都能导出来。

2、我们以导出项目中的一个红色的圆为例：用选择工具或者在左侧的图层面板中，选择这个红色的圆，然后在右侧的属性面板的最下方的“export”属性的右侧，单击“+”号，添加导出属性。

3、第一个参数，取决于你的项目最后要应用到哪些倍率的设备，比如倍率是2的设备，那么就在下拉中选2X，如果应用于普通屏幕设备橡铅，则选1X。

4、第二个参数表示图片后缀名（注意：不是格式后缀），比如我们把这个后缀名数祥改成“ha”,那么导出的图片都会自带一个“ha”的后缀。

5、第三个参数不必多说，图片格式梁毕好，这个根据自己实际所需来选择，要透明度当然是png最合适。

6、下面还有个对勾的参数，当选择时表示导出的图片不包含背景，去掉对勾表示连背景一块导出来。

7、一切参数都设定好之后，点击导出的按钮，你所需的图像就会自动下载下来。你可以以相同的方法，选择一个组，或者一个画板，或者整个画布，给它添加导出属性进行导出，方便快捷。

Figma文件保存后怎么打开

先用figma导出pdf格式文件，下载到本地。然后用sketch打开这个pdf文件，会自动转化成分层的sketch文件，就可以打开了。

Figma 是一款基于 Web 的在线设计工具，其以其轻量、便捷、跨平台使用、协同便捷的姿洞腔特点，迅速吸引了广大设计师们的注意。

Figma 是可以共同设计的地方。可以在设计颤旁、线框、原型中共同实现创意。从内容创建到设计输出都可以与团队合作。从产品运营以及技术那里地获得更好的反馈。Figma 实现了让所有人在一个页面迹衫进行设计。

App 产品原型设计用什么软件？axure？MM？visio

很多产品原型设计软件，下面分享一些以及个人对此的看法总结：

Axure：发展较早的一款原型设计软件，因而名声较大。无限画布，适合做低保真到中保真度的原型。功能很多，也让学习起来有点难度，网上有很多axure教程就不多说了。本地型软件，可以下载html文档预览，手机预览不方便。

墨刀：国产的一款原型设计协作工具，比起axure来非常容易学会，内置组件很多，创建页面跳转也比axure简单太多。因为是一款在线工具，可以云端保存键野工作，这点确实很便捷。另外，通过分享链接就可以分享原型给别人看了，如果涉及到跟同事对接什么的，选择在线的工具更方便。支持sketch文稿导入和自动标注。个人认为性价比最高。

Invision: 可以说目前是国外发展最大的在线原型设计工具，主打“交互原型”和“协作”，支持sketch和ps设计稿导入做交互。近来出的 Invision studio 对标sketch，想满足更精细的设计需要。国键拆外一些大牛公司像airbnb和amazon都在用。不过对于国内用户来说会有服务器速度的问题，而且，贵。（土豪公司无视）

Marvel: Marvel 也是海外知名度较高的一款原型设计协作工具，支持PS和sketch设计稿导入做交互原型，本身也支持中度保真程度的设计。也有自动标注功能。图片稿亮喊库对接unsplash，这样来自unsplash的很多精美的免费图片可以直接用。价格比Invision稍便宜。

POP（Prototyping on Paper）：这款比较另类，是给拍照的手画草图直接做交互。操作轻巧简单：先用手机拍下草图原型(存到POP app内)；然后开始编辑图片的哪个区域（按钮）链接到什么页面，添加跳转链接热区，就可以在手机上给小伙伴们演示了。内嵌的交互动作 如侧滑、展开、消失等，即可满足一般的动态演示需要。但功能较为简单，对更深的需求无法满足。

Proto.io：也是国外的一款手机原型开发平台。支持在大多数的浏览器运行，共享和协作操作方便，可以直接在真实的移动设备上对原型进行测试。拥有较为丰富的UI组件，支持自定义。另外它有不错的用户测试功能，支持视频录制。并且在移动组件时，能够实时在画布看到组件之间的距离。另外由于服务器的原因，有国内用户反应速度有点慢；收费较高，性价比一般吧。

UXPin：UXPin是DeSmart团队开发的一个在线可点击原型设计工具该软件，拥有大量用户界面元素（包括web，iOS，Android等），可以共享预览，注解和实时的协同编辑。另外该软件还提供了版本控制和迭代功能。缺点仍然在于国外服务器和价格问题。 

这些产品原型设计软件都比较常见，你可以根据你个人需求来选择，反正我使用的是墨刀，它真的省时省力提高了我的工作效率。希望对你有帮助！有疑问的地方欢迎追问~

如何评价多人合作界面设计工具Figma

多人合作界面设计工具Figma还可以，Pixso协同设计在这方面更专业。Pixso是一款ui辅助工具，支持多人协同办公，软件涉及、交付轻松，一体化操作便捷，流畅使用。大家想要的可以看看，非常神奇的软件。

Pixso作为一款UI设计软件，最核心的功能当然是UI设宽源计。Pixso属于一款小而美的UI设计工具，设计功能全而精，不会过于复杂全面而难以入手，但又能很好的包含UI设计工作时所需要的功能。钢笔工具|相较于传统的AI软件更加灵活，可以直接增加无方向路径。智能形状工具，不仅提供了诸多预设图形，还可以拖动锚点进行快速转换，以此进行高效画图。自动布局，能够快速的将多个对象创建父级框架，进行有序排版，当增加或删减对象时，都会灶纳自动调整其他对象位置进行重新排版。在团队协作时：与Sketch相比，Pixso在协同方面的优势显而易见——支持多人实时同步。当多地办公时，团队成员可以同时打开文档，进行实时会话，不会因为地域问题而产生延迟；与Figma相比，Pixso因为服务器设在国内，网页使用感堪称丝滑，完全不存在延迟、卡顿等状况，明显强于其他大多数海外软件。

想要了解更多关于设计软件的相关信息，推荐选择Pixso协同设计隐巧没。该工具无缝衔接以往工作，支持Sketch、XD、SVG等文件导入导出，自由进行Sketch的文件格式转换。并且，文件自动保存到云端，一键回溯到任意历史版本，再也不用担心文件丢失。素材库集成众多大厂优秀的设计系统，所有UI设计师均可直接拖拽复用，从此省去大量模块化设计环节的重复劳动。

UI设计干货Figma的使用方式你还不会吗？

文中还提到了Sketch迁移到 Figma 的一些问题和解决方案，来，我们一起学习吧。Figma进阶功能

3.1 组件(components)

组件和实例：组件是母体，实例是复制体，组件可以删除和修改，不可逆向为组，实例不可直接编辑，但可以逆向为组，然后修改。没有一个固定位置用来存放组件，你最初组件化的那个组，就是唯一的组件母体，且组件不会被收起在一个组件页中，而是存在原本的位置。

组件和实例是分开的，简单理解就是，你最初设计的一个元素，通过Component功能打包为组件A，这个组件就是原始组件A，此时在左侧assert模块下就会存在一个固定组件(类似组件库模块)，当你从Assert模块中拖动出来一个新的组件A，或者从原始组件A复制一个新的组件A，这个新的组件A就是实例，实例可以被还原为组。

3.11我如何找到最初的组件?

首先需要说明，Figma的组件管理方式很灵活，但相较于Sketch的确不够规范，这里仍建议设计师新建一个layers,以组件来命名，将原始组件都放置在这个页面，易于管理。

该Layer主要目的在于管理原始组件，例如当需要大批量修改组件时，切换到组件Layer快速修改，修改后快速映射到所有设计稿。

当需要调用组件时，则推荐使用官方提供的Assert模块，通过拖拽调用组件实例。

在实际工作场景中，我们需要从实例跳转到原始组件，以进行大批量效果修改时，可通过属性检查器中的组件icon快捷跳转至原始组件。

3.12实例操作

在实际工作中，我们会遇到使用一个类似组件来建立新组件的场景，此时需要将组件逆向为组，然后进行编辑，在Figma中仅实例可以进行逆向祥冲，方法是右键，或者在属性检查器区域执行Detach

instance命令。

当直接在当前正在操作的实例上进行少量变更后，可以通过覆盖功能将当前的属性同步给组件和所有实例。

方法是在右侧属性检查器执行Push Overrides to Main Components。

3.13组件库的使用

如何上传和维护组件库?

Figma的组件库系统极其友好，易于维护。设计师只需要将已经设计完成的组件系统和样式系统放置在一个文件中，然后就可以基于当前的文件已有的样式和组件直接建立共享组件库，只需要在Assert的Library入口进入组件窗口，通过组件库窗口中的上传(Publish)功能,完成上传，团队成员就能获得该组件库内容。

后续维护组件库的工作只需要在该文件上进行修改和完善，随后回到library窗口进行更新。当然，在你对组件库进行修改后，Figma会自动弹出快捷窗口以供你迅速更新组件库，这也不失为一种好办法。

当你更新组件库后，其他使用了该组件库内容的设计师会同步收到更新消息，且可以快速同步到最新版本，以保证设计一致性。

如何使用团队成员已上传的组件库?

在Library窗口，团队已公开谨谈歼的组件库会以List的形式展示，设计师只需要点击你的目标组件库左侧的switch，即可唤醒该组件库，回到你的文件画板中，此时即可调用该组件库的内容，如组件、颜色样式、字体系统等。

想要快速查看组件库内的内容可以使用Option+2，快速调起Assert资源窗口，在左侧图层列表查看。

3.2响应式约束(constraints)

通过约束功能的官方定义我们更容易理解这个功能。首先要说明其限制条件，约束功能只有在Frame中才可以发挥作用，也只有Frame中的元素，才会展示Constraints工具。因此，官方定义其为：“允许你将设计元素固定在父框架的不同位置”，所以，请谨记约束功能以建立Frame为侍早前提，而其主流使用场景就是构建流畅的布局以适应不同设备尺寸，即当设计师将Frame尺寸进行变更时，Frame内的元素会自动按照预先设定的规则固定位置。

但在真实场景下，响应式约束的功能并不局限于此，它更是可复用、可快速编辑组件的必要组成条件。Figma的Frame不同于Sketch的画板工具，可以互相嵌套且不会影响到复杂度产生墒增的问题，因此可以通过Constraints配合Frame组合成规范布局的组件系统，再加上我们后面要讲的Auto

layout功能，可以构建出高自由度，可任意调用，且能够根据真实填充数据自动布局的超级组件，这样构建的组件一方面还原了真实场景下的设计效果，一方面大大减少了设计师重复性工作。

下面是响应式约束的不同条件及对应的效果。

响应式约束的常规案例。

3.3自动化布局(Auto layout)

自动化布局工具是制作复杂组件的核心技巧，与响应式约束搭配可以设计出高度自由可编辑的组件乃至半成品页面。

一般来说，我们谈到组件系统主要聚焦的是其规范一致性，设计资源管理等方面，但实际上，组件库在提升设计师效率，减少重复性工作方面能够发挥更强大的作用。常规组件调用后需要花费一定精力修改，但通过自动化布局工具设定好规则后，设计师能沉淀一整套可直接使用、根据内容填充物自动布局变化的超级组件，甚至是成熟的典型页面，可极大提升设计效率，减少在移动、复制、填充内容等基础操作上的时间浪费。

下面我实现了一个最简单的案例，再该search组件中需要填充真实数据以模拟真实场景下的样式，设计师只需要输入新的填充内容，组件内其他元素会自动匹配到对应的正确位置。

自动布局按照常规布局规则划分为三个属性，分别是左右空隙、上下空隙、元素间空隙。

当选中多个元素，执行Shift+A(建议熟悉快捷键提升效率)后，会为这些元素建立自动布局，规则可以在右侧属性检查区设定。

例如我需要建立一组横排的card，此时可以先设计好三个card，然后选中它们，执行Shift+A即可创建一组横排的自动布局(横排竖排根据你真实场景下元素的排列情况，也可以在右侧更改横排为竖排)。另外一种小技巧是，直接给一个card执行Shift+A命令，然后选中组内的card执行复制命名cmd+D，后复制出的每一个card也会按照预定规则排列。

如下图案例所示，元素与元素组合构成自动布局的组件，自动布局的组件组合则能构成更复杂的大兴组件乃至典型模块、典型页面。建议设计师快速掌握该技巧的方法是将其套入实际需求中，从提升设计效率，减少重复工作的出发点开始设计自己的典型组件模块。

3.4共享样式 (style)

关于共享样式，从sketch转型到Figma的同学应该再熟悉不过了，共享样式是组件库的核心构成之一，主要包括颜色、字体及各种样式效果。这里着重说明一下Figma共享样式与Sketch共享样式的差异。Figma中对样式进行了更为细致的划分，共包括颜色、字体、效果三类。

以颜色为例，Figma中颜色样式可自由运用到图形、描边、字体等各细分元素上面，无任何限制，可与各元素自由搭配。以字体为例，字体样式仅包括字体字号、字重、行高等字体本身的属性，不包括颜色，换言之，Font样式的颜色可以自由使用Color样式。

概括来讲，Sketch更注重常规理解下，组件系统的实际应用时的场景，如字体样式是由字体字族、字号、字重、行高、颜色所有属性一同构成的，而Figma强调更高的自由和编辑性，孰优孰劣无法一言蔽之，从严谨性和组件自我封闭完整性来讲，sketch的要更好一些，但从组件自由度，组件嵌套组合的效率上来讲Figma要更好一些，所以关键在于设计师能否合理运用，快速掌握技巧并提高效率。

3.5交互原型

Figma的交互功能，在设计软件中我愿称之为最强，极简的操作逻辑以及优秀的实现效果使其在中小复杂度的交互场景下不逊色于专业UI动效设计软件。在FIgma的交互模式下能看到Principle的影子，其背后的设计逻辑高度相似，符合UI设计领域快速输出产品交互物的场景。

如下图所示，界面间的交互逻辑通过选择起始画板或其中的元素然后简单的连线即可完成。当然，如果设计师不满足于此可以在右侧属性检查器制作更精致的过度效果。Figma拥有者完善的交互手势可供设计师选择，如点击、hover、拖拽等。

然后是过渡效果，在这里我只推荐一种交互方式，那就是Smart Animate，一句话概括，Smart

Animate复刻了Principle元素演变的逻辑，所以如果你是Principle的忠实拥趸，那在FIgma交互模式下你可以无缝代入到Principle的使用经验中。

除此之外，需要特殊说明的一个交互功能是弹窗交互Open

Overly。使用该交互会调起一个覆盖层，适合弹窗类场景。方法如下图所示。Figma交互模块有很多功能，感兴趣的可以自行探索，而对于大部分设计师来讲，掌握最基础的Figma交互原型功能就已经能够让你的演示事半功倍了。

遗憾的是，每次演示只能演示一条流程。如下图所示，有编辑权限的设计师需要将播放功能固定到起始画板，演示模块会以此为当前交互线程的出发点。若你有多条交互线程，那只能手动调整起点进行演示了。

3.5输出

直接分享链接给对应的利益相关者即可。PM可以在视觉稿上直接评论，快捷沟通解决问题。开发可以切换到开发者模式查看切图标注。

关于figma输出html和figma输出的图去哪了的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。