Plasmic 一款DesignToCode的设计工具

来自群友分享

Plasmic 可以将设计稿交互样式直接生成代码，并推送到github仓库中，支持React、Vue等多种语言。开发只需要编辑之后的逻辑即可。
目前figma社区的Figma-to-Code by Plasmic 插件，支持将设计文件同步到Plasmic项目中。当然你也可以用Plasmic工具直接设计并发布。

p.s. 该过程需要有必定的代码基础。

插件名称	插件用途	推荐指数
A Selector 🔥	可根据不同类型、不同状态，快速搜索定位想要的内容(子组件改名字会受影响)	★★★★★
truncate line 🔥	文本超出规定的行数省略号显示,省略显示常用的英文omit，truncate	★★★★★
Draw Connector 🔥	交互说明，快速连线	★★★☆☆
Variants Randomizer 🔥	结合变体，使实例样式随机展示，搭配谷歌填充展示真实场景数据	★★★★★
Chroma Colors 🔥	一键生成全局tokens样式，原理：根据定义形状的命名+颜色生成	★★★★★
Themer 🔥	结合Chroma Colors(主题样式要发布才生效)，实现一键切换各种主题，需要配置该插件的API和JSON Bin,	★★★★★
Quantizer 🔥	参考grid属性，设置X行X列自动排列	★★★★★
Chinese Content Filling Assistant	虚拟文本生成器	★☆☆☆☆
Print for Figma	可以设置文件分辨率DPI，但平面设计不提议使用，色彩差距大	★☆☆☆☆
cssGen	可以根据本地样式一键生成css文件	★☆☆☆☆
Similayer	一键清除slice	☆☆☆☆☆
Atlas – Theme Manager	切换浅色/深色模式	★★☆☆☆
text editor	批量修改设计稿中出现的一样文本	★★☆☆☆
DataLab	先选中，再批量修改设计稿中出现的一样文本	☆☆☆☆☆
find and replace	先选中，再批量修改设计稿中出现的一样文本	☆☆☆☆☆
Split Vectors	根据形状，填充，线段分离矢量图形，适用场景：矢量插画、可视化动效等等	★★☆☆☆
No numbers	去除figma元素自带的数字，如Frame001，layer001,所以规范命名也很关键	★★☆☆☆
Jitter · Animate your Figma designs	类似AE动效的插件，免费版支持GIF&Video格式，720p,30fps https://jitter.video/	☆☆☆☆☆
Rotate copies	可以做重复的图案，类似扎染用于科技背景	★★☆☆☆
Looper Legacy	可以做重复的图案，类似扎染，用于科技背景	★★☆☆☆

---

部分插件截图

A Selector 🔥

主要功能：可根据不同类型、不同状态，快速搜索定位想要的内容(子组件改名字会受影响)

---

Draw Connector 🔥

主要功能：交互说明，快速连线

---

---

Truncate Line

主要功能

• 文本超出规定行数隐藏

• append character 隐藏形式可自定义，列如 ... 。。。 !!!

• 选择组件或实例中的任一部分文本，可选择应用于当前选择，或者应用于所有实例以保持一致；

  

  ---

Chinese Content Filling Assistant

---

Variants Randomizer

---

Quantizer

---

Split vectors

---

No Number

---

Rotate copies

---

Looper Legacy