xd

[XD插件]Adobe XD导出HTML网页

Adobe XD怎么导出离线网页?在之前就有一款插件,但是并不好用,我们一直没有推荐,近日在 Adobe XD 插件管理器新发布了一款插件,也可以直接导出离线HTML网页,更加优雅好用而且完全免费。

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

关于Fireblade

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

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

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

  • 矢量元素(多边形、布尔运算组、椭圆、路径、线)以svg格式导出;

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

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

  • 允许嵌入字体。

准备工作

本教程与官方教程均使用 Adobe 官方提供的 Adobe Free UI Kits中的 Dashboard-UI-Kit-final-2.xd 文件,可直接通过官方链接下载https://www.adobe.com/products/xd/resources.html,或从文末获取的下载链接下载。

image.png


image.png

注册和登陆

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

image.png

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

此时,会往邮箱发送验证码,输入邮箱中收到的验证码后点击“Confirm”确认按钮注册,注册完成后自动切换到登录界面,输入注册时的邮箱和密码登录即可。

image.png


使用前设置

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

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

image.png


预览和导出

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

image.png
点击“Export”导出按钮即可直接导出代码,如果看到以下界面则表示你还没设置导出文件夹,需要回到上一步设置代码导出位置。
image.png
导出代码时将看到下面这个切图动画,是真的拿一把刀在切图。
640.gif
导出之后将得到一个文件夹,包含图标等资源的“assets”文件夹、css文件和html文件,其中html文件可以直接使用浏览器打开查看。
image.png
如果你想在导出代码之前使用预览功能,受 Adobe XD 插件 API 的限制,需要单独下载  Fireblade 的实时预览工具,文末可以获取  Fireblade 实时预览工具下载链接,如果没有安装  Fireblade 实时预览工具单击“Preview”预览按钮会提示需要下载安装。
image.png
  Fireblade 实时预览工具支持 macOS 和 Windows,点击弹窗中的 macOS 或 Windows 图标可直接跳转到网页下载相应的安装包,打开安装包安装即可。
若已安装 Fireblade 实时预览工具单击“Preview”预览按钮,在 Adobe XD 的 Fireblade 插件面板中设置的所有效果会实时显示在预览工具中,直接查看效果。


字体设置

Fireblade 支持嵌入字体,在 Adobe XD 的 Fireblade 插件面板中,可以单击“Select”按钮选择字体文件,字体将保存到“assets”文件夹,并自动添加到CSS中,将会直接使用。

image.png


响应式对齐方式

Fireblade 支持响应式对齐方式的设置,多达 11 种预设,也可以自己设置值,可以设置画板,也可以设置单个元素,选择画板或元素后在 Adobe XD 的 Fireblade 插件面板中设置。

对齐预设很好理解,比如第一个为垂直居中对齐、第二个为水平居中对齐,“VIEWPORT”中与预设和下面的数值相对应,“VIEWPORT”中“W”为宽、“W”上方的数值为宽度、“H”为高、“H”下方的数值为高度、另外还有上下左右四个锚一样的图标,可点击,灰色为未激活状态、蓝色为激活状态。
image.png
当处于激活状态即该值固定,非激活状态的地方即根据浏览器宽高自动适应。以下图为例,画板宽为800px高为400px,与顶部固定距离为0,与左侧固定距离为0,也就是固定在左上角不随浏览器宽高变化而变化,若浏览器宽度增加,画板右侧的空白区域宽度将增加,仅右侧空白宽度增加。
image.png
也可直接设置固定数值,“width”为宽度、“height”为高度、“top”为距离浏览器顶部的距离、“right”为距离浏览器右侧的距离、“bottom”为距离浏览器底部的距离、“left”为距离浏览器左侧的距离。
如果选择画板中的元素进行响应式设置,则“top”、“right”、“bottom”、“left”的值是相对于所在画板的。


表单元素

 Fireblade 还支持表单元素的导出,只需要在图层名称最后添加@或#并指定关键词即可导出对应的元素,包括按钮、链接、输入框、复选框、多选、列表、甚至插槽slot。需要注意的是按钮Button、链接Link、输入框TextInput、复选框Checkbox、单选Radio、单选组RadioGroup和插槽Slot必须是组元素。列表必须是RepeatGrid元素,支持的有:

  • 按钮:@Button

  • 按钮(超链接):@Button $ href ='https://xd.94xy.com"

  • 超链接:@Link $ href ='https://xd.94xy.com"

  • React路由:ation: @Link $href='/path'

  • 文本框:@TextInput

  • 复选框:@Checkbox

  • 单选框:@Radio

  • 单选框组:@RadioGroup

  • 列表:@List

  • 插槽Slot:@Slot


以创建一个输入框为例,设计文件最终效果包含一个文本和一条装饰线,但是无输入框的范围,所以需要单独画一个矩形作为输入框的位置(可以设置为透明不可见),还支持占位符设置这里直接复制一个文本,并按 Fireblade 的要求为图层进行命名,占位符文本图层名称最后加上#placeholder、显示的值命名图层名称最后加上#value、文本框矩形范围图层名称最后加上#container,最终将 3 个图层打组图层名称最后加上@TextInput,装饰线无需放在组内,导出后效果如图。
image.png
222.gif
如果是密码输入框,只需要将#value改为#password即可。
image.png
Fireblade 支持表单状态包括默认状态#default、鼠标经过状态#hover、选中状态#checked和激活状态#active,大家可以自行尝试。

Adobe XD导出HTML网页 Adob XD 插件,Adobe XD导出HTML网页是什么,Adobe XD导出HTML网页安装,Adobe XD导出HTML网页 使用方法,Adob XD 插件下载,Adob XD 插件安装,Adob XD 插件教程,Adob XD 插件使用方法,Adob XD 扩展,Adob XD 第三方集成

XDpacks Adobe XD第三方插件管理器

交流QQ群

请使用手机扫描二维码加入QQ群