html获取输入框的值 Adobe XD终于能导出HTML离线网页了！附教程

Adobe XD 如何导出离线网页？ 之前有一个插件，但是不太好用。 我们没有推荐它。 最近，Adobe XD 插件管理器中发布了一个新插件。 它还可以直接导出离线 HTML 页面。 它更优雅、易于使用且完全免费。 插件名称对于Fireblade，可以直接在插件管理器中下载安装，也可以直接双击.xdx格式的插件安装包自动安装。 您可以在文末获取插件安装包。

关于火刃

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

准备

本教程和官方教程均使用Adobe官方提供的Adobe Free UI Kits中的Dashboard-UI-Kit-final-2.xd文件，可直接通过官方链接下载，也可在文末下载链接下载的文章。

△ Dashboard-UI-Kit中的界面

△ 导出效果，支持输入框等。

注册并登录

没有Fireblade账号也可以使用本插件，需要注册登录才能使用高级功能。点击插件面板中的“Sign in”登录按钮，输入Fireblade账号密码进行登录。如果有没有Fireblade账号密码，点击“Create Account”按钮创建账号即可注册账号。 如果有账号忘记密码，点击“重置密码”重置设置密码按钮

△登录按钮

△登录界面

点击“创建账户”按钮创建账户并跳转到账户注册页面，输入名字“First Name”，姓氏“Last Name”，电子邮箱地址“Email”和密码“Password”，点击“Sign” UP”注册按钮进行注册。

△注册界面

这时，一个验证码会发送到邮箱。 输入邮箱收到的验证码，点击“确认”确认按钮进行注册。 注册完成后，会自动切换到登录界面。 输入注册邮箱和密码进行登录。

△进入邮箱验证码界面

使用前设置

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

△设置按钮

在设置界面html获取输入框的值，您首先需要点击“选择”按钮，选择一个存储位置来保存您导出的代码，然后根据您的需要选择您要导出的代码格式。 需要注意的是，默认勾选了 HTML 和 CSS 的导出。 ，如果需要导出REACT、LIT-ELEMENT和REACT-NATIVE，那么需要注册Fireblade账号并登录，无需登录也可以导出HTML和CSS。

△设置界面

预览和导出

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

△ 预览导出按钮

点击“导出”按钮直接导出代码。 如果看到如下界面，说明你还没有设置导出文件夹，需要返回上一步设置代码导出位置。

△未设置导出位置的提示

导出代码的时候会看到下面的图片切图动画，其实就是用刀切图。

△ 切动画

导出后会得到一个文件夹，里面有图标等资源的“assets”文件夹，css文件和html文件，其中html文件可以直接用浏览器打开查看。

△导出文件

如果要在导出代码前使用预览功能，受限于Adobe XD插件API，需要单独下载Fireblade实时预览工具。 文末可以获得Fireblade实时预览工具的下载链接。 如果您还没有安装Fireblade实时预览工具，点击“预览”预览按钮会提示您下载安装。

△ 实时预览工具

Fireblade 实时预览工具支持 macOS 和 Windows。 在弹窗中点击macOS或Windows图标直接跳转到网页下载对应的安装包，打开安装包进行安装。

如果您安装了Fireblade实时预览工具，点击“预览”预览按钮，在Adobe XD的Fireblade插件面板中设置的所有效果都会实时显示在预览工具中，您可以直接查看效果。

字体设置

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

△字体设置

响应对齐

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

对齐预设很容易理解。 例如，第一个是垂直居中对齐，第二个是水平居中对齐。 “VIEWPORT”对应于预设和下面的值。 “VIEWPORT”中的“W”是宽度，“W上面的值”是宽度，“H”是高度，“H”下面的值是高度。 另外还有锚点一样的四个图标，上、下、左、右，可以点击。 灰色是非活动状态，蓝色是活动状态。

△响应式对齐设置

激活时，该值固定，未激活时，自动适应浏览器的宽高。 以下图为例。 画板的宽度为800pxhtml获取输入框的值，高度为400px。 右边的空白宽度会增加，只有右边的空白会增加。

△响应式对齐设置

也可以直接设置固定值，"width"为宽度，"height"为高度，"top"为距浏览器顶部的距离，"right"为距浏览器右侧的距离， “bottom”是距浏览器底部的距离，“left”是距浏览器左侧的距离。

如果选择画板中的元素进行响应式设置，则“top”、“right”、“bottom”、“left”的值是相对于它们所在的画板的。

表单元素

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

以创建输入框为例。 设计文件的最终效果包含文字和装饰线，但是没有输入框的作用域，所以需要单独绘制一个矩形作为输入框的位置（可以设置透明和不可见） ，并且还支持占位符设置，这里直接复制一段文字，按照Fireblade的要求命名图层即可。 占位符文本图层名称添加#placeholder，显示值名称图层名称添加#value，文本框矩形范围添加#value图层名称末尾添加#container，最后将3个图层分组并添加@图层名末尾的TextInput，装饰线不需要放在组里，导出后的效果如图。

△ 表格图层参考

△文本输入框导出后的效果

如果是密码输入框，只需将#value改为#password即可。

△ 密码输入框效果

Fireblade支持的表单状态包括默认状态#default、鼠标悬停状态#hover、选中状态#checked和激活状态#active，大家可以自己试试。

本公众号回复“191118”获取插件安装包和实时预览工具安装包。

admin普通

打赏 收藏 海报 链接