(视觉设计——王晓豪)
这周,不是上课和写写不完的作业,就是搞网页设计大赛和帮学长们搞比赛,也没学啥......
还有就是了解到一个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文件可以直接使用浏览器打开查看。