当前位置: 首页 > 插件 > Sketch插件 > 辅助管理 > Alibaba Fusion Cool for Mac(sketch设计规范框架插件) 2.2.9中文版
最新素材最新应用最新插件最新模板最新视频最新图标

内容介绍

FusionCool是阿里推出的前端设计规范框架配套的sketch插件,设计师可以通过这款插件在标准框架内设计界面。这款插件可以直接托用组件,插件整合了设计资源,具备组件魔法编辑器、图表编辑、导入Token样式、导出标注等能力,彻底提升团队设计效能。

插件简介

Sketch插件Alibaba Fusion Cool Mac版一款全能的设计辅助工具
Fusion Design 是阿里内部使用了两年的一套协同工具,旨在让设计师和程序员更好地协同工作,最大程度减小低效的重复工作。Fusion Design 是一个平台,它有两个工具端——开发使用的 Iceworks 和设计师使用的 FusionCool 插件。FusionCool 支持你创建自己的 design system,它支持定制主题、生成设计文档、组件生成。FusionCool 可以帮助你在进行页面设计时就生成一套 design system,同时生成对应的标注和组件库,快速交接给开发。
- Sketch最佳伴侣,组件直接拖拽使用
- 整合设计资源,应有尽有
- 令人震惊的组件编辑能力
- 嵌入式面板,如影随形

安装教程

FusionCool插件下载完成后打开,双击【Fusion-cool.sketchplugin】进行安装。Fusion cool Sketch插件安装完成,点击【好的】。

打开软件的首选项,找到插件

插件特点

设计物料智能生成到工具中,并同步分配供设计师使用。
- 样式导入到Sketch中直接使用
- Fusion物料自动同步到工具中拖拽使用
- 业务组件Symbol上传管理及分发
- 设计稿上传到文档中心并自动标注

插件功能

魔法编辑器有三个重要的功能点:1,修改组件状态    2,修改组件内容    3,修改组件结构
1.修改组件状态
可通过操控状态按钮,或者在编辑区域直接输入半角符号来修改组件状态。内容中有浮层的组件,需要在选中状态下,才会展开浮层内容,如图例:2.修改组件内容
在编辑区直接输入内容,并可插入ICON。3.修改组件结构
并列结构:通过换行“enter”键实现组件的并列结构。树形结构:通过空格“tab”实现组件的树形结构。分组:输入符号“#”或点击按钮添加组标签,通过输入半角中划线“---”实现分组。

添加/修改/删除图表数据
Step: 1.在Fusion Cool 编辑器高级属性配置弹窗中,右下角是图表数据编辑区,模版展示的是默认数据内容,单击表格单元格即可修改;
2.在数据行右键单击,即会出现数据修改菜单,可以增加/删除数据条目。

3.添加图表辅助信息
添加参照线
Step: 1. 在Fusion Cool 编辑器高级属性配置弹窗中,展开右侧“参照线”菜单;
2.在下拉列表中选择要添加的参照线类型,编辑配置信息即可。添加文字标注
Step: 1. 在Fusion Cool 编辑器高级属性配置弹窗中,展开右侧“文字标注”菜单;
2.有单点/区间文字标注可以选择,单击加号添加标注后编辑配置信息即可。
4.对图表进行区域着色
坐标系区域着色
坐标系区域着色是对坐标系背景进行着色,来标示特定坐标系区域。
Step: 1. 在Fusion Cool编辑器高级属性配置弹窗中,展开右侧“区域着色”菜单;
2. 在“坐标系区域着色”中单击加号后编辑配置信息即可。数据图形区域着色
数据图形区域着色是对折线图中的线、柱状图中的柱进行着色,来标示特定数据内容。
Step: 1. 在Fusion Cool编辑器高级属性配置弹窗中,展开右侧“区域着色”菜单;
2. 在“数据图形区域着色”中单击加号后编辑配置信息即可。导出标注稿
导出标注稿Zip包到本地

使用教程

下载安装FusionCool应用插件完成后,在Sketch中运行插件并重启Sketch在Sketch右侧面板中将Tab切换至FusionCool,就可以开始使用了。Design System的选择

组件魔法编辑器(Magical Editor)的使用

常见问题

Q: Select Dropdown DatePicker TimePicker 弹层弹窗不跟随输入框滚动?
A:使用    来将组件渲染到滚动区域内。

   
Q:我升级了依赖的组件版本,为什么看起来有些组件样式错乱了?(我使用了主题包)
A:如果你使用的是主题包中预编译生成的 css 文件,请保证 “项目依赖的next组件版本” 与 “主题包依赖的next组件版本” 一致,否则可能出现 js/css 因版本不匹配导致的潜在问题。
Q:我引入了 moment 通过 moment.locale('zh-cn'); 设置了中文语言,为什么DatePicker组件还是英文的表盘呢?
A:检查
1.是否引入了 moment 语言包(moment-with-locales.js)。
2.检查上下文,是不是后面又被覆盖了。
Q:moment-with-locales.js 语言包太大了有没有什么优化的方式?
A:引入moment语言包有两种方式
1.用户在应用中引入 moment 的 cdn 文件 moment-with-locales.js
2.本地安装 moment 打包进自己的应用。

相关插件