（视觉设计——王晓豪）

这周，不是上课和写写不完的作业，就是搞网页设计大赛和帮学长们搞比赛，也没学啥......

还有就是了解到一个XD插件

Fireblade

插件名称为 Fireblade，插件管理器中可以直接下载安装或直接双击.xdx格式插件安装包自动安装，文末可获取插件安装包。

关于Fireblade

Fireblade是一款 Adobe XD 插件，用于将 Adobe XD 设计文件导出为网页代码，导出后可直接使用浏览器查看，可支持响应式和预览，允许嵌入字体，支持导出的格式有HTML、CSS、REACT、LIT-ELEMENT 和 REACT-NATIVE，主要有以下特点：

允许自定义响应式对齐方法；

置入的图片会以PNG格式导出；

矢量元素（多边形、布尔运算组、椭圆、路径、线）以svg格式导出；

支持 REACT，导出为REACT、LIT-ELEMENT 和 REACT-NATIVE时还支持文本和样式元素绑定；

支持导出为表单元素按钮、复选框、单选按钮、单选按钮组、文本框等；

允许嵌入字体。

注册和登陆

没有 Fireblade 账号也可以使用该插件，需要使用高级功能需要注册和登陆。在插件面板中点击“Sign in”登录按钮输入 Fireblade 账号密码即可登录，如果没有 Fireblade 账号密码，点击“Create Account”创建账号按钮可以注册一个账号，如果有账号忘记密码可以点击“Reset password”重置密码按钮

点击“Create Account”创建账号按钮会跳转到注册账号页面，输入名“First Name”、姓“Last Name”、邮箱“Email”和密码“Password”后点击“Sign UP”注册按钮注册。

使用前设置

使用 Fireblade 前需要进行简单的设置，单击 Fireblade 插件面板上方的“Setup”设置按钮，打开设置界面。

在设置界面中，首先需要单击“Select”选择按钮选择一个存储位置用来保存你导出后的代码保存位置，然后根据需要选择想导出的代码格式，需要注意的是默认勾选导出HTML和CSS，如果需要导出REACT、LIT-ELEMENT 和 REACT-NATIVE，那么你需要注册一个 Fireblade 的账号并登录，不登录也可以使用导出 HTML 和 CSS。

预览和导出

在 Adobe XD 中单击画板名称选中画板之后，在  Fireblade 的插件面板中会显示画板名称和“Preview”预览按钮和“Export”导出按钮。

点击“Export”导出按钮即可直接导出代码，如果看到以下界面则表示你还没设置导出文件夹，需要回到上一步设置代码导出位置。

。

导出代码时将看到下面这个切图动画，是真的拿一把刀在切图。

导出之后将得到一个文件夹，包含图标等资源的“assets”文件夹、css文件和html文件，其中html文件可以直接使用浏览器打开查看。