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 🔥
主要功能：交互说明，快速连线
快速连线
image.png
Truncate Line
主要功能
-
文本超出规定行数隐藏
-
append character 隐藏形式可自定义，比如
...。。。!!! -
选择组件或实例中的任一部分文本，可选择应用于当前选择，或者应用于所有实例以保持一致；
Chinese Content Filling Assistant
Variants Randomizer
插件展示
示例
Quantizer
插件展示
Split vectors
No Number
Rotate copies
Looper Legacy
image.png
网友评论