Figma
文章平均质量分 91
figma
hufang360
这个作者很懒,什么都没留下…
展开
-
Figma插件:Bitmap Tool
一看名字就知道这是一款处理位图的插件,是的,起初我只是想知道位图的原始尺寸,以便能够等比缩放它。慢慢地根据自己需要添加了一些功能,是的,这个插件主要是写给自己的,所以会很不严谨。最近把插件提交到社区,居然审核通过了,那就来写一写“说明书”,看看你们是否也有类似的需求。位图缩放选中一张位图时,面板会实时显示原图的宽高。目前只能按整数倍(1倍、2倍、3倍)进行缩放,可选中多个位图进行缩放,缩放前勾选“居中对齐”,会尝试将位图相对于各自的父对象水平和垂直方向居中对齐,这个父对象一般是指 画框(frame).原创 2021-12-08 21:37:11 · 1193 阅读 · 0 评论 -
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"原创 2020-07-15 21:21:00 · 4572 阅读 · 0 评论 -
figma:使用mac上的字体 | 转换ttc字体文件
figma:使用mac上的字体Figma 是一款基于网页的设计软件,拥有macOS和Windows客户端。个人偏爱mac上的圆体和楷体,这两款字体的字库非常全,且都有三种字重,由华文公司设计,是mac上的内置字体,Windows上是没有的,当要在Windows上编辑相关文本时,字形会丢失。(Figma还支持在线多人协作,在团队协作时我们应当避免这种字体不一致的情况)。于是尝试在Windows上安装这个字体。如果出现缺字(Missing fonts)情况,首先检查是否安装 Font Helper,安装后f原创 2020-12-22 22:18:51 · 5007 阅读 · 0 评论 -
figma:按组导出
最近发现达芬奇能读取psd的图层信息,以往要拿图层做MG动画,都要将分层单独导出,为了省去调整坐标和宽高的大小,导出的png都是1920x1080(视频是这个尺寸),这些工作都想在Figma里完成。Round One以往的经验是将整个画板(Frame)转成组件(Component),然后复制这个组件以生成画板实例(Instance),在实例中选中要屏蔽的图层 按⌘+X(Windows是Ctrl+X)隐藏掉不需要导出的图层,然后选中实例进行导出。实际操作中倒是有些不方便。首先需要做分层的画板不能太多..原创 2020-12-11 01:32:01 · 8743 阅读 · 0 评论 -
Figma插件开发-监听选中更改
Figma插件开发-监听选中更改想在插件面板显示选中元素的个数,当选中元素发生改变时,面板会实时响应。找到了两种处理方法。第一种是调用setInterval方法定时刷新,第二种是监听相应事件,本文主要讨论第二种。figma提供了选中更改响应的事件,在官方的api链接里能找到,code.ts 部分的相关代码如下:// 第二种方法:监听事件figma.on('selectionchange', () => { const msg = "已选中:" +figma.currentPage.sele原创 2020-12-11 14:00:47 · 882 阅读 · 0 评论 -
Figma插件开发:Webpack和figma-plugin-ds
一个前端新手,最近在写Figma插件,插件主要是写给自己用。由于功能不多,之前组件和样式是自己手写的css,调来调去使用体验也不好,Figma说目前还没有官方的ui组件库,大家可以试试 figma-plugin-ds (后面简称ds),组件样式和svg图标跟figma原生的一样,虽然有些figma上很细节的功能还做不到,比如在输入框的边缘移动能调整数值,但做一个简单的面板还可以。要快速上手,可以直接在html里引用css和js的在线地址。但由于文件在github上,启动插件时ui样式要等加载完才显示正常原创 2020-12-24 15:10:31 · 1284 阅读 · 0 评论 -
Figma插件开发-生成Gif
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言案例1案例2前言最近发现可以在“.bash_profile”里面写代码,于是就想把终端改造成启动器。案例1终端流量走代理,要么将代理模式切换成全局代理,要么复制代理设置然后粘贴到终端执行。粘贴配置的方法有两个缺点:有些代理软件没有提供复制代理设置的方法,每次要用得到笔记里面去拷贝;每次新开终端都需要粘贴执行一次;将设置写在配置里,需要时敲对应方法名就可以了。例如 输入setproxy然后按enter键设置原创 2020-12-11 14:59:11 · 35803 阅读 · 1 评论 -
Figma插件开发-原图尺寸
figma里并没有图像对象,图像其实是各种形状和文字上的填充,默认情况下导入一张图片,会自动创建一个矩形形状,并填充图像以及缩放到对应尺寸。实际使用时,会需要类似将多张图片缩放至2倍大小的需求,而其中部分图片在这之前已经被缩放过了,此时就必须知道原图的大小了。在figma中可以找到原图的链接,用浏览器访问该链接,链接的标题(浏览器tab页的标题)会有尺寸信息,亦或是你想把这张图下载重新处理,这种方法也是有效的。最近在研究figma的插件开发,由于不懂前端技术,学习起来挺吃力的,但好歹是做出来了。插件原创 2020-11-30 01:24:36 · 1875 阅读 · 0 评论