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一些文章汇总

• https://uxdesign.cc/creating-design-systems-with-figma-tokens-31686b8d672e
• https://medium.com/figma-tokens/how-to-apply-design-tokens-to-your-icons-1439fd30061f
• https://uxdesign.cc/how-to-manage-space-in-figma-using-tokens-8d0ebd99ee1b
• https://zachalbert.medium.com/naming-accessible-color-tokens-in-figma-2563d9163974
• https://medium.com/iadvize-engineering/figma-tokens-automatically-turned-into-code-how-we-kickstarted-our-design-system-8399dbc86741

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

• https://www.youtube.com/watch?v=Ka1I5TphDb0&t=601s

Figma Tokens里面tokens中文翻译

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