Figma真好用,8个让我不用Sketch的理由

原型图设计工具对比(Sketch、Figma、墨刀、即时设计等对比) 现有工具 Sketch(国内外通用) Figma(国外) 即时设计(国内) 墨刀(国内) axure Adobe XD Principle PS Illustrator(AI) Affinity Designer(AD) …… 工具 收费? 支持离线? 全平台? 协同开发 插件 其他优势点 Sketc... 阅读详情

前言:设计不断的变化,而设计工具也一直在更新换代,设计师要想提高效率,就要选着好用的设计工具。做 UI/UX 设计,过去最常见的工具是 Axure、Sketch 和 Adobe XD。

 

这三款软件通常认为前者产品/交互用得多些,后者 UI/视觉用得多些,而 Sketch 通用性比较强,所以我用得最多。

但是自从开始用 Figma 之后,我打开 Sketch 的次数就越来越少了。

1、发展迅猛

一看数据,原来不光是我,Figma 这几年可以说真的是异军突起,不服不行:

Figma 为什么这么强势?Figma for Tencent 报告里的数据揭露了两个重要原因:

a. 除了设计之外,团队其他成员也爱用:用浏览器和 Windows 系统都方便,这个原因再简单不过了。

b. 网游思路避免盗版:Sketch 不给钱不能用,而且很贵,典型的单机游戏思路;而 Figma 不给钱也能一直用,而且整个工具必须链接服务器才能用,很难破解。

虽然 Figma 也有墙内网速和中文字体问题这两大坑,但是成功找到避坑方法之后,我还是觉得 Figma 比较香。

接下来,我就从使用者的角度分析一下,为什么自己会觉得 Figma 好用(主要是与 Sketch 的对比)为想了解 Figma 的朋友提供一点参考。

对了,我平时很少用什么高级功能,所以今天讲的都是比较接地气,即便是初级设计师也很有可能遇到的情况。

2、多人协作

长久以来,多人同步画图都是一个美好的梦想。

我记得在使用 Axure 的时候就研究过这个,后来发现是需要额外付费而且很麻烦的高级功能,就放弃了。

用 Sketch 时,我曾经负责过团队的组建库维护,用到了 Sketch Cloud 同步组建库更新。

然而那个组建库同步功能简直太难使用,就算我在云端更新了,成员们如果懒得更新也还是无济于事。

Figma 终于搞出了真正的零门槛多人协作,不需要任何额外的步骤,就可以随时和队友打开同一个文档进行操作。

在 Google Docs、腾讯文档、石墨文档这类多人在线文字编辑已经普及的年代,多人在线画图实在是应该常态化了。

就算是设计师人数少,多人协作也可以方便和开发等其他团队成员合作,因为他们大多没有 Mac,安装设计软件也很麻烦,打开 Figma 的链接倒是很方便。

3、不卡

这个不卡,不光是电脑不卡,网速也不卡(当然是有的情况下)。

我最近打开 Sketch 新建一个文档,一个页面里只有十几个画板,Mac Pro 就开始响声大躁,而且操作出现略微延迟。

我用一体机时,虽然情况要好很多,但是文件稍微大一点也还是很容易延迟卡顿,经常要重启特别耽搁效率。

我在 Figma 的一个文件里,塞了这个公众号近两三年的所有配图和素材,不但一般可以在两三秒内加载完毕,而且也几乎从没卡过!

而且,我长期都只用浏览器画图,后来为了方便登录和使用本地字体,才下载软件。

如果浏览器不用经常登录且使用本地字体方便,我是觉得没必要安装软件的。

4、文件预览

Sketch 文件在 Mac 上是看不到预览的,找文件纯靠名字。

虽然在打开 Sketch 时,会象征性地展示一下最近文件的预览图,但这个方块很小。

设计过的 Sketch 文档预览

这个问题之前还不觉得,但是习惯了 Figma 的大缩略图之后,发现回头用以前的方法找文件还真的有点不太适应,真是被「惯坏」了。

而且 Figma 还可以设置文件里的一个 frame (画板)为缩略图,很多团队都搞出了自己的文件缩略图规范,浏览很方便。

设计过的 Figma 文档预览

5、默认图形无边框

Sketch 创建一个新图形时,除了本身的灰色填充之外,默认还会带一个边框。

界面上大部分的图形(例如背景、按钮、弹窗等)都是没有边框的,所以我通常要手动删除这个边框。

别小看了这一个简单的步骤,做多了也要烦。每天画图的话,一年不知要浪费多少时间在删除边框这种无意义劳动上!

我也知道这个默认样式可以设置,但总之还是麻烦啊。

Figma 创建新图形时,只有灰色填充没有边框,这一点我真的觉得很好。

6、行高设置百分比

不同的平台和产品,都有不同的行高规范。别看这东西就是一个小数值,对于视觉密度的影响相当直接。

用百分比设置行高其实是最科学的,因为这样可以一次解决很多问题,前端上也经常这么做。

Sketch 的行高不能设置百分比,只能自己计算后写数字,这是个很严重的坑啊!

假如设计规范里行高是 1.5 倍,那么我每次设置文字时,得要心算把字号乘以 1.5 得出行高填上。

如果 1.5 还好,如果是 1.25 或者 1.75 我还得用计算器……

经常是懒起来,干脆懒得设置什么行高了,用 Sketch 默认行高好了

Figma 的行高可以用百分比,这才是行高的正确打开方式吧!

7、饼状图/环形图

做 B 端产品或者是画图标时,都难免涉及到饼状图/环形图。

每次用 Sketch 画这个我都会非常苦恼,虽然也有一些插件可以用,但无论如何都很麻烦。

Figma 画起饼状图/环形图简直不要太爽,弄一个圆形,然后一拖就出来了,关键是百分比和角度都可以设置。

8、锚点对齐

Sketch 的锚点编辑功能,真不好用。

不论是创建还是拖动,都完全没有像素对齐了,小数点后两位数字各种乱来。虽然偶尔吸附对齐功能可以依赖一下,但用起来简直要逼死强迫症了。

Figma 在一条线段上创建描点时,就是默认从中间创建,而且拖动的时候数值要么是整数要么是以 .5 结尾,强迫症表示非常满意~

总结

帮 Figma 免费说了这么多好话,也并不是说它什么毛病都没有,网络问题和字体问题依旧时常让人心累,不过这些以后有机会再讲,目前也没完美解法。

只是我自己确实是在入坑 Figma 之后,有点不习惯 Sketch 了,经常是能用 Figma 解决的就不用 Sketch。

不过工具怎么选择考虑的因素很多,最重要的还是要根据团队合作实际情况优先考虑~

例如我们知识星球最近的训练营里,很多小组都是主动选择 Figma,因为不论是合作还是分享都非常方便,所以是真心推荐了。

目前做协作设计支持Figma的不多,可使用摹客Figma插件来进行协同工作。

在figma设计中如何像sketch导出离线标注呢?MarkLion给了答案 随着离线需求激增,Figma 可能推出官方离线方案(但受限于美国法律,加密能力存疑)六、为什么 Mark Lion 是 Figma 生态的革命者?二、Mark Lion:为 Figma 而生的离线标注核武器。,正用一套颠覆性的本地化标注方案,彻底解决了这个痛点——三、实战:4步生成 Figma 离线标注包(附避坑指南)四、Mark Lion 深度评测:与竞品的全方位对比。五、高级技巧:释放 Mark Lion 的终极潜力。的缺陷却成了交付链路的致命伤。一、Figma 标注之痛:云端协作的阿克琉斯之踵。 阅读详情

相关推荐

移动UI设计工具选型指南:Sketch、Figma与Adobe XD对比

UI设计工具是数字产品设计流程中的核心生产力平台,其演进历程反映了设计方法论与技术架构的变革。从早期的Photoshop位图设计,到Sketch确立的矢量设计标准,再到Figma引领的云端协作时代,工具能力的迭代始终围绕设计效率、团队协作和设计系统三大核心需求展开。现代UI设计工具通过组件化架构实现原子化设计,借助Auto Layout等智能布局技术应对多端适配挑战,并依托云端协同能力支持分布式团队协作。以Figma为代表的SaaS工具凭借实时协作特性,显著缩短了设计评审周期;Sketch则以其专业的矢量编

weixin_32950759的博客 392

figmaCN:破解Figma全英文界面的本地化解决方案

在全球化设计协作平台Figma的使用过程中,国内设计师常面临三重障碍:专业术语理解偏差导致的操作失误、界面语言障碍延长的任务完成时间、以及团队新人因语言门槛产生的学习曲线陡峭问题。figmaCN作为一款由设计师团队人工校验的本地化插件,通过动态内容注入技术,实现了Figma界面的无缝中文转换,既保留原生操作体验,又消除语言壁垒,让设计团队能够将精力专注于创意实现而非界面理解。 ## 突破语言壁垒

gitblog_01160的博客 920

从Sketch迁移到Figma?Heron Handoff插件让你无缝衔接离线标注工作流

本文深入评测Heron Handoff插件如何帮助设计师实现从Sketch到Figma的无缝迁移,特别针对离线标注工作流需求。该插件提供智能标注提取、多平台代码生成和高效离线文件包等功能,显著提升设计交付效率,是团队工具迁移的理想解决方案。

weixin_30872499的博客 589

什么?Figma 的 fig 文件格式居然被破解出来了

大家好,我是前端西瓜哥。上周图形编辑器交流群里有人问,对于 Figma 导出的 fig 文件,该如何解析其格式,拿到可读数据。经过群友的一番讨论,这个问题最后算是解决了。

fe_watermelon的博客 3732

从#FFF到#80FFFFFF:设计师给开发者的透明色彩协作指南(附Sketch/Figma标注技巧)

本文详细解析了设计师与开发者在透明色彩协作中的常见问题,提供了从#FFF到#80FFFFFF的透明度转换指南。通过Sketch/Figma标注技巧和代码适配方案,帮助团队高效解决十六进制颜色与透明度表达的差异,提升UI协作效率。

weixin_42552410的博客 359

Figma 中文版 Windows.zip

figma是一个跨平台uI设计工具,很适合设计行业人员使用,里面提供了丰富设计插件和模板素材,支持多人协作,自动保存,还能跨文件共享组件,轻松原型设计,完全满足不同用户的设计需求,十分推荐。支持Windows。

figmaCN:破解Figma语言壁垒的本地化解决方案

当国内设计师面对全英文的Figma界面时,是否曾因术语理解偏差导致操作失误?是否在寻找功能时因语言隔阂而浪费宝贵的创作时间?figmaCN作为一款**专业级界面本地化工具**,通过设计师团队人工校验的翻译数据库,将Figma界面无缝转换为中文环境,让创意工作者专注于设计本身而非语言解读。这款完全开源免费的插件,重新定义了中文用户与Figma的交互方式。 ## 实现路径:双轨安装保障设计连续性

gitblog_01051的博客 326

避坑指南:STM32H7不同DMA控制器(MDMA/DMA2D/BDMA)到底该用哪个?

本文深入解析STM32H7系列芯片的DMA控制器选型策略,涵盖MDMA、DMA2D、BDMA等不同控制器的架构原理与性能对比。通过实际项目案例,提供高速TCM数据搬运、GUI加速、低功耗传输等场景的选型决策树,并分享性能优化与调试技巧,帮助工程师避开常见陷阱,提升系统效率。

weixin_26876073的博客 447

figma都有哪些优势,哪些特点让你选择了figma

​ Figma 在核心的设计功能方面也要优于 Sketch,例如更灵活的组件使用方式、矢量网格、原型交互等等,虽然很多功能是在 Sketch 的基础上优化的,但是确实做出了更好的体验,初次尝试 Figma 的用户,在协作、插件等内容还不能体验的情况下,单单凭借对设计功能的体验,就会有留下来的欲望。 ​

七小嗨少的博客 1851

BSD盲区检测系统性能要求及试验方法

盲区监测系统BSD通过安装在车辆后方的两颗毫米波雷达实时监测驾驶员视野盲区,当发现视野盲区内出现其它道路使用者时,通过左右后视镜上的警示灯向驾驶员发出报警。

未知艺术家的博客 2355

基于Apache MINA SSHD配置及应用

Apache MINA SSHD是一个基于Java的开源SSH服务器/客户端实现,支持SSH2协议,提供文件传输、shell访问等功能。该代码实现了一个SftpClientService服务类,封装了SFTP文件操作,包括读取文件(readOnce/readLines)和写入文件(writeOnce)等核心功能。通过SftpProperties配置类管理连接参数,并采用Builder模式创建SSH会话。主要特点包括:支持大文件分块传输、自动创建目录、严格的异常处理和...

流沙QuickSand 945

从8个方面深度分析figma和sketch的优缺点

Figma惊人的是它的组件更具原子级,在component属性面板中的每个属性都可以直接定义风格,它的工作模式更符合设计师的需。Figma我有自己的内置标记工具,但我在实践中遇到的最大问题是,当我向开发人员发送一个界面时,我必须发送整个项目文件链接。Sketch是的,我以前经常这样做,所以我的桌面上没有太多的文件垃圾,我希望我希望我的桌面上没有太多的文件垃圾。最后,我想强调的是,我对使用哪种工具没有特别强烈的意见,因为到目前为止,这两种工具都做得很好。学习其中一个,你会使用另一个,实际上很容易改变。....

七小嗨少的博客 4600

Acute逻辑分析仪TL4134E实战:从触发电平到协议解析的完整避坑指南

本文是一份针对Acute逻辑分析仪TL4134E的实战避坑指南。文章深入解析了触发电平分组、采样率与存储深度权衡、高级触发等核心概念,并提供了混合电压系统测量、eMMC调试内存优化、SPI/I2C/UART协议解析排错等具体配置技巧,帮助硬件工程师和嵌入式开发者高效捕获与分析数字信号,快速定位通信问题。

weixin_29207149的博客 404

elementui中有导出组件吗_因远程协作大火的Figma,会取代Sketch的地位吗?

文章从8个方面对sketch和figma两款软件进行了比较分析,带大家一起探究了解到底哪个才是更好用软件,一起来看看~写在前面:最近因为疫情的影响,很多公司使用了远程办公的模式,同时也把很多远程协作的问题摆在了台面上。对于设计团队来说,一款好用的协同工具非常重要,最好设计工具本身就是可以方便协同的。据我了解到,在国外目前已经有非常多的公司正在从sketch切换到Figma,国内的话也有一些公司开始...

weixin_30670103的博客 768

倾斜摄影数据转换为3DTile格式的方法:基于CesiumLab GIS

通过使用CesiumLab GIS,倾斜摄影数据可以方便地转换为3DTile格式,并在CesiumJS等3D地理信息可视化工具中进行展示和分析。一旦成功导入3DTile数据,就可以在CesiumLab GIS中利用其强大的可视化和分析功能进行进一步的处理。转换完成后,可以将生成的3DTile数据导入到CesiumLab GIS中进行可视化和分析。启动CesiumLab GIS应用程序,并按照界面上的指导导入转换后的3DTile数据。脚本将开始执行,并将倾斜摄影数据转换为3DTile格式。

ObDjango的博客 1075

ASP.NET Core 6 Web API在IIS上的部署与调试

通过以上步骤和配置,你应该能够成功部署并调试你的ASP.NET Core 6 Web API在IIS上。记住,权限和配置是关键,确保你的环境和应用程序代码都正确设置。希望这篇博客对你部署和解决IIS上的问题有所帮助。

m0_74337424的博客 522

Figma还是Sketch?shots App Store截图模板双版本深度对比,哪款更适合你的工作流

shots 是一款免费的 **App Store 截图模板**,同时提供 **Figma** 与 **Sketch** 双版本文件,只需插入 10 张应用截图,就能一键批量生成 iPhone App Store 上架所需的全部尺寸。对于新手来说,不用再为每台设备单独裁图、对像素,把素材拖进模板即可完成全部工作。本文带你快速看懂它如何工作,并对比两个版本,帮你判断哪款更适合你的工作流。 [![sh

gitblog_00569的博客 797

第七天 Labview进阶(7.2 与汇川PLC通信)

运行环境: Labview 2020 Autoshop v4.10.1.1 该文档中包括Labview程序和汇川PLC程序,可以完美实现Labview与汇川PLC的通信。具体的使用教程可以参考本人的相关文章,讲解详尽,请尽情享用!

weixin_38637405的博客 3524

PoB 珠宝配置全解:先摆半径再挑词缀,一条决策链讲透新手到精通

同一颗 Time-Lost Ruby,放在天赋树不同位置,面板能差出一截——差别往往不在词缀有多花哨,而在半径盖住了哪些节点。Path of Building PoE2(下称 PoB)里的珠宝配置,本质上是一条决策链:先判断 BD 缺什么,再决定半径放哪,最后用词缀和组合去填坑。下面按这个顺序讲,帮你绕开"先挑了好看词缀、结果位置不对、最后重头再来"的常见弯路。 ## 先判断:你的 BD 缺的是

gitblog_00176的博客 410

【系统分析师】写作框架:软件设计模式及其应用

本文围绕"软件设计模式及其应用"展开论述。首先介绍了近三年参与的某软件开发项目背景及个人承担的系统设计工作。其次系统阐述了设计模式的三大分类:创建型(如工厂方法、单例模式)、结构型(如适配器、装饰器模式)和行为型(如观察者、策略模式),重点分析了各类模式的特点和典型应用场景。最后结合项目实践,详细说明了采用的三种设计模式的具体实施过程及效果,包括提高代码复用性、降低耦合度等优势。文章还总结了项目经验,指出存在的不足及改进方向,强调合理运用设计模式对构建高质量软件系统的重要性。全文通过理论

数据知道的博客 5059

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

figma设计_设计优化向figma的迁移

figma设计The reason why I’m writing this is a joke I shared with my fellow designer by the coffee machine: “well, I actually proposed these changes to share them afterwards on Medium”. Of course, that’s...

weixin_26715991的博客 1229

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

IconPark在线工具全攻略:Figma/Sketch/PS图标导出与应用

你是否经历过这些场景?UI设计师在Figma中精心制作的图标,交付给开发后因格式不兼容导致样式失真;前端开发者需要在React/Vue项目中重复导入不同主题的SVG图标,增加冗余代码;团队成员在Sketch与Photoshop间切换时,因图标导出流程不一致造成协作效率低下。据统计,**78%的前端团队每周花费3-8小时处理图标格式转换与适配问题**。 本文将系统讲解如何利用IconPark(字节...

gitblog_00525的博客 1090

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

figma查看原始图片大小

在sketch中可以一键调回原始尺寸,有时想让图片缩放3倍,调到原始尺寸后,宽高输入框“*3” 或者 ⌘+k缩放至300% 就完成了。 那figma里如何知道原始图片的大小呢,目前发现一个“曲线救国”的方法。 figma中选中图片后,执行 鼠标右键–>Copy/Paste–>Copy as SVG 然后粘贴到文本文档中,image标签的宽高属性就是原始图片大小 例如: <svg width="72" height="78" viewBox="0 0 72 78" fill="none"

hufang360的专栏 6442

终极指南:Ant Design组件库与Figma、Sketch完美融合实战教程

Ant Design是企业级UI设计语言和React UI组件库,为开发者提供了一套完整的界面设计解决方案。在前100个字内,我们明确核心关键词:Ant Design组件库、Figma设计工具、Sketch插件、设计系统、UI组件。本文将详细讲解如何将Ant Design的设计资源与Figma和Sketch完美融合,打造高效的设计开发工作流。 ## 🎯 为什么需要Ant Design与设计工具

gitblog_00261的博客 406

AEUX终极指南:如何快速将Figma/Sketch设计转换为After Effects动画图层

**AEUX**是一款革命性的设计到动效转换工具,专为UX动效设计师、视觉设计师和创意开发者打造。这个开源项目解决了设计工具与动画软件之间的技术鸿沟,让静态设计到动态体验的转换变得前所未有的简单高效。通过AEUX,您可以将Figma或Sketch中的设计图层无缝传输到After Effects中,创建完全可编辑的动画图层结构,节省大量手动重建时间。 ## 🔥 为什么你需要AEUX:解决设计到动

gitblog_00533的博客 335

Windows怎么打开Sketch文件?5款UI设计工具盘点

针对Windows用户使用UI设计工具的痛点,本文评测了5款主流UI设计工具:Figma、Pixso(国产协同)、墨刀(快速原型)、Lunacy(离线编辑)和Penpot(开源工具)。测试重点包括Sketch文件兼容性、操作流畅度、网络依赖度等核心指标,结果显示:Pixso在文件还原和交付效率上表现突出;墨刀适合快速原型设计;Lunacy是唯一支持直接编辑.sketch的本地工具。建议专业设计师选择Figma/Pixso,产品经理优选墨刀,注重数据隐私可考虑Penpot。当前Windows平台的

l1m0_的博客 1131
上一篇: 如何设计出色的网站后台原型?
下一篇: 万字干货!《人人都是产品经理》作者苏杰独家专访
摹客
博客等级 码龄12年 1588粉丝 784原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值