根据我的个人经验和其他设计师的经验，以下是你应该避免的最常见的错误，以及一些可以帮助你把设计文件交给开发人员的小技巧:
1. 准备风格指南:
1.1、色板:
在开始设计之前向开发人员提供调色板，可以节省大大节省他们创建变量的时间。
调色板工具：
http://paletton.com
https://coolors.co/
https://colorhunt.co/
1.2、图集
(建议:在一个方框内添加图标，这样无论图形多大，图标都会与正方形的大小相同)
免费的图标:
https://iconmonstr.com/
1.3、字体指南:
在设计中始终使用Web字体，桌面字体与Web字体不同，Web Font是专门设计用于网页的字体。Google字体是最大的Web字体开源项目。
为开发人员预定义字体大小：
(标题1)Heading H1:Roboto Medium 24px Sentence
(正文1)Body 1: Roboto Regular 16px Sentence
(正文2)Body 2: Roboto Regular 14px Sentence
(按钮)Button: Roboto Medium 14px All Caps
(备注)Caption: Roboto Regular 12px Sentence
(上划线)Overline: Roboto Regular 10px All Caps
1.4、状态:
示例-状态类型:
(启用)Enabled button: #6200EE
(禁用)Disabled button: 20% #6200EE
(悬停)Hover Button: 80% #6200EE
(活动)Active State: 100% #6200EE
2. 原型和文档:
设计原型用于与团队共享您的设计，以获取反馈并与开发人员共享交互。
原型使开发人员可以了解设计中的交互，动画，手势和行为。
为开发人员准备简短的文档，包括无法通过原型共享的细节，开发人员必须严格遵守的内容，有关您的设计的评论以及规格。
例：卡片正文的最大长度应该显示前100个字符…
原型工具:
Invision
Flinto
Adobe XD
JustInMind
保证“像素完美”：
边距：元素之间的所有边距应匹配。
填充：与边距相同的规则。
图形：在用户眼中，非像素完美的图形往往看起来模糊或像素化。
3.准备分享:
准备设计文件:
1. 图层名称
2. 将他们分组
3.图标名称、组件
4. 删除不必要的层
设计的移交工具:
允许您轻松地与开发人员共享规格、资产、代码片段的平台:
Zeplin
Invision
Avocode
Marvel
Supernova
Material Design Gallery
4. 设计系统:
为了避免这些错误并更好地理解设计，以下是最著名的系统:
设计系统是开放源码的系统，它提供设计工具、资源和界面指导方针，供设计师和开发人员随时使用。
Google: Material Design
IBM: Carbon Design System
Microsoft: Fluent Design System
5. 总结
UI设计师的工作之一，就是帮助开发人员的工作变得容易。同时，如果您一直遵循这些技巧，您的设计将变得更容易，降低编写代码的难度，意味着用户最终使用的产品和你的设计会高度一致。
