如何导入Adobe Creative Cloud中的设计文件并将其转换为代码

第一步：获取可编辑的设计源文件 #

• 打开客户共享的云端文件页面，先确认权限：如果是只读预览权限，所有提取、导出操作都无法使用，直接联系客户开通编辑/下载权限即可。
• 权限开通后点击页面右上角下载按钮，将源文件保存到本地，常见源文件格式包括.psd（Photoshop）、.ai（Illustrator）、.xd（Adobe XD）三类。
• 如果是轻量化的Adobe Express设计，无需下载源文件，直接在云端界面选择导出选项，矢量元素优先选择SVG格式导出，位图选择2x/3x分辨率的PNG导出。

第二步：提取开发所需参数 #

无需手动量取参数，用Adobe Creative Cloud自带的开发工具就能自动读取所有元素信息：

• 如果你没有安装对应Adobe桌面软件，直接打开Creative Cloud桌面端的设计检查功能，导入下载的源文件，即可直接获取所有元素参数：
  • 颜色类：HEX/RGB/HSL色值支持一键复制
  • 文本类：字体族、字重、字号、行高、字间距参数自动标注
  • 布局类：元素宽高、内外边距、圆角值、阴影/渐变参数直接导出
  • 素材类：所有矢量图标、插图可直接导出为SVG格式用在代码中
• 如果是Adobe XD格式的源文件，直接用XD打开后切换到开发模式，选中对应元素就能直接复制生成好的CSS代码片段，省去手动编写样式的步骤。

第三步：代码适配注意事项 #

• 自动生成的CSS代码片段建议先做兼容性校验，涉及渐变、阴影、动效的属性按需补全浏览器前缀
• 导出的位图素材要做压缩处理，避免页面加载速度过慢
• 如果设计包含动效，可直接从源文件导出动效JSON参数，配合前端动效库直接调用即可

注意：如果始终无法获取下载权限，只能通过云端预览手动截图、量取参数，效率会低很多，优先找客户开通权限是最优方案。

内容的提问来源于stack exchange，提问作者angrybird