大家好，我是前端西瓜哥。今天我们来看看Figma图形对象的一些基本属性。这些属性来自fig文件，更贴近Figma图形的底层数据结构。Figma也提供了RESTAPI接口获取设计稿的图形树结构，且大多数属性和fig文件的相同，文档说明也更详细。但有些属性在底层属性上做了一层封装，以提供更好的语义。比如在RESTAPI的数据有rotation属性，但fig文件并没有，需要通过transform矩阵属性计算出来。https://www.figma.com/developers/api#node-types基本属性guid：图形id对象，用于唯一标识图形。它有两个属性：sessionID（会话id，每
在UXtools最新发布的2023年设计工具调查报告中，全球几千名设计师做出了一个选择：Figma是最受欢迎的UI设计工具。它的独特之处在于其强大的协作功能、直观的界面以及不断创新的特性。*报告见：https://uxtools.co/survey/2023/Figma官网总的来说，Figma受欢迎的原因表现在以下三个方面：（1）高效的协作体验Figma提供无与伦比的协作性，设计团队可以实时协作、共同编辑，并且能够轻松完成项目。这对于现代分布式工作环境下的设计团队至关重要。（2）灵活的云端设计作为一款基于云的设计工具，Figma具有卓越的灵活性，允许设计师在各种环境中工作，无需担心版本同步或设
大家好，我是前端西瓜哥。今天我们来研究一下Figma是如何表示图形的，这里以矩形为切入点进行研究。明白最简单的矩形的表示后，研究其他的图形就可以举一反三。矩形的一般表达如果让我设计一个矩形图形的物理属性，我会怎么设计？我张口就来：x、y、width、height、rotation。对一些简单的图形编辑操作，这些属性基本上是够用的，比如白板工具，如果你不考虑或者不希望图形可以翻转（flip） 的话。Figma需要考虑翻转的情况的，此外还有斜切的情况。翻转的场景：还有斜切的场景，在选中多个图形然后缩放时有发生。这些表达光靠上面的几个属性是不够的，我们看看Figma为了表达这些效果，是怎么去设计矩形
大家好，我是前端西瓜哥。上周图形编辑器交流群里有人问，对于Figma导出的fig文件，该如何解析其格式，拿到可读数据。经过群友的一番讨论，这个问题最后算是解决了。fig文件导出Figma的设计文件，我们会得到一个fig文件。fig是一种二进制的格式。它没有使用XML或是JSON的格式，而是选择使用了Figma自己实现的特殊编码工具进行了序列化编码，并做了封装，最后得到一个二进制文件。二进制相比明文格式（JSON和XML），优点有：体积更小，因为数据更紧凑；解析速度快，像是JSON这种，要逐个字符解析然后构建AST，考虑转义、空格等特殊情况，对于大文件，解析效率很差；高保真，比如一些类型明文格式
常用插件1.ChineseUserDataGenerator中文数据生成器，提供名字，年龄，性别，手机号码，E-mail，职业，地址，省份，城市，身份证等常用的中文数据默认填充。链接：https://www.figma.com/community/plugin/864052338727969891/Chinese-User-Data-Generator2.ContentReel登录后自定义自己的经常使用的数据。链接：https://www.figma.com/community/plugin/731627216655469013/Content-Reel3.Autoflow选中两个图层，自动连
大家好，我是前端西瓜哥。wasm拿来做Web端的图形编辑器貌似是不错的选择。因为图形处理会有相当多无法利用到WebGLGPU加速的CPU密集的计算。比如对一条复杂贝塞尔曲线进行三角化，对多个图形进行复杂图形的布尔运算。图形编辑器性能天花板Figma用了wasm，我们也该用吗？Figma的性能提升说到wasm和图形编辑器，经常有人提到 Figma的加载速度提升为原来的三倍。来自Figma官方这篇文章：《WebAssemblycutFigma'sloadtimeby3x》阅读后我有了不少收获。Figma从一开始就是用C++写的。在wasm被浏览器支持之前，Figma使用wasm的前身asm.js去
Figma是一款备受网页和UI设计师喜爱的基于矢量的设计工具。那么，如何在Figma中导出源文件呢？本篇文章将为大家演示如何以更加简单的方式，从Figma快速、免费导出源文件。即时设计是一款拥有强大导入导出功能的设计工具，全面覆盖了Figma设计能力的且为全中文的操作界面，更适合国内设计师使用。几乎兼容了市面上大部分的设计工具，包括主流的设计工具：Figma、Sketch、Axure、XD、即时设计，还可以导出SVG、PNG、JPG等通用格式。除了导入功能强大，导出功能也非常强大，可以导出Sketch、PNG、JPG、WebP、SVG格式。下面就来教大家如何使用即时设计导出Figma源文件。
在线网页原型图设计软件的使用与桌面端相比具备优势，因为在线网页原型图设计软件的使用全程不需要安装，而且在线网页原型图设计软件也没有任何地点上的限制，更主要的是在线网页原型图设计软件在操作系统上也没有限制，不论是现在使用的Linux、Solaris、Mac，还是Windows，你都可以无压力的使用在线网页原型图设计软件。1、即时设计即时设计是一款非常实用的在线网页原型图设计协同工具，为国内的设计师提供了巨大的帮助。作为最受欢迎的在线工具之一，其核心特色在于在线协同工作，能够让整个团队同时编辑一份文件，并随时随地访问。团队共享组件库，让成员可以自由上传下载及使用组件，而组件修改后，应用的实例组件也
一.学习教程https://www.bilibili.com/video/BV1vK4y1p78a/?spm_id_from=333.999.0.0&vd_source=ef114f70c3fd4d5394f12dbd3d022bbeFigma最佳实践：组件、样式和共享库https://zhuanlan.zhihu.com/p/60746992https://mp.weixin.qq.com/s/iOp3aPbqbRr5vnrf0zQANw这里有一份设计师通常会转为组件的元素列表：UI组件公司logo或其它品牌资源图标设备模型各平台原生组件（Android、iOS、Linux、OSX等）鼠标光
Figma是一款备受网页和UI设计师喜爱的基于矢量的设计工具。其最大的优势在于方便用户与团队成员进行协作。当设计师需要与其他团队成员、设计师或客户共享设计文件时，设计师需要将设计图案导出为PDF格式以方便查看。同样地，当设计师需要将设计图稿打印出来时，也需要从Figma导出PDF格式的文件。那么，如果你想将设计图纸导出为PDF文件，应该怎么做？Figma能导出PDF吗？答案是肯定的。本篇文章，我们将以全面覆盖了Figma设计能力的即时设计为例，为大家演示如何以更加简单的方式，从Figma快速、免费导出PDF。即时设计-可实时协作的专业UI设计工具即时设计是一款支持在线协作的专业级UI设计工具，
