Figma Tokens插件教程学习指南

关于Figma Tokens这个插件的作用,学习教程,操作方式,学习视频的文章的收集整理,让你慢慢学会使用Figma Tokens这个插件!更快的入门

经过一段时间对Figma Tokens这个插件的学习和了解,并在项目中逐渐运用,大概已经能熟练的掌握这个插件的用法了。简单说一下这个插件有免费和专业版,免费版本已经够用了,大家可以尽情的尝试!

Figma Tokens插件教程学习指南

对这个Figma Tokens插件的理解

这个插件简单来讲就有下面这些作用,可能没说全面,欢迎评论补充:

1.让你的设计系统能够能够切换不同的主题,light,dark以及更多的主题样式

2.各种token值的合理运用能够让你的设计系统保持规范化

3.把整个设计系统的token配置文件保存在云端同步,不仅能让你回退版本,也能让你切换下一个项目时引用上一个项目的token更加方便

4.全局控制组件的各种属性更方便,让你把你的修改能运用到当前的页面,或者整个组件库文件。例如你想修改全局的排版,颜色,字体,圆角...只需几下,就能轻松更换

Figma Tokens的一些学习教程和视频

学习一个插件最好的方式就是看官方文档, 能够让你更快的入门,如果你懂一些html知识,上手会更快!下面推荐的主要还是官方文档,其他的可以作为拓展和了解。

1.Figma Tokens官方文档地址:https://docs.figmatokens.com/   (建议打开谷歌翻译)

2.国外卖ant设计组件的大佬也已经用figma tokens搭建了完整组件库,也可以通过看他的视屏,了解和学习其中的用法,主要是通过别人的思路去学习,同时里面的视屏也许能够激发你更想学习和使用这个插件的兴趣:https://antforfigma.com/tutorials/customize-with-figma-tokens

3.Medium上面的Figma Tokens一些文章汇总

4.视屏教程我看的比较少,因为会浪费很多不必要的时间

Figma Tokens里面tokens中文翻译

名称GroupApplication
大小尺寸SizingWidth, height
间距SpacingAuto-Layout (Gap, padding)
颜色ColorStyles and Layers: Fill, border (right click 右键 )
圆角弧度Border radiusAll corners, individual
边缘宽度Border widthBorder width
阴影投影Box ShadowStyles and Layer: (one or many, drop/inner)
不透明度OpacityOpacity
字体系列Font familyText layers (in combination with weight)
字体粗细Font weightText layers (in combination with family)
字号大小Font sizeText layers
行高Line heightText layers
字间距Letter spacingText layers
段间距Paragraph spacingText layers
英文大小写TextCaseText layers
字体装饰(划线/链接)TextDecorationText layers
排版组合Typography compositionsText layers, styles

更多内容可以参考本站的正在建设中Figma Tokens专题

作者:No-One,如若转载,请注明出处:https://www.uifig.com/2831.html

(2)
上一篇 2022年6月2日 下午12:44
下一篇 2022年9月22日 上午11:59

相关推荐

发表回复

登录后才能评论