本文讨论了一个免费的在线协作 UI 设计工具，具有 Sketch 导入和 React 代码导出功能。UI 设计工具应该简单而强大，让设计师轻松尝试他们的设计。有很多原型设计和 UI 设计工具，但其中大多数只创建静态布局，当您必须在各种屏幕尺寸上展示您的设计时，这不是一个理想的选择。Airbeam 是一款在线协作 UI 设计工具，可帮助您为 Web 和移动 UI 创建动态布局，轻松适应任何屏幕尺寸。该工具将设计和构建过程合二为一。您可以从头开始创建设计，也可以从 Sketch 导入布局并相应地对其进行自定义。无论哪种情况，它都会自动为设计生成 React、Vue、NextJS 和 React-Native 代码，还允许您将设计项目导出到？Codesandbox 和世博会。免费计划允许您托管 1 个项目，最多可以添加 3 人进行协作。另请阅读：？将 React 调试添加到 Chrome 开发工具以检查 React 组件具有草图导入、React 代码导出功能的协作 UI 设计工具Airbeam 是一个基于 Web 的 UI 设计工具，您可以使用桌面级 Web 浏览器在任何地方访问它。要使用 Airbeam，您可以使用您的电子邮件地址创建一个免费帐户，也可以直接使用您的 Google 或 GitHub 帐户注册。创建动态布局当您登录该工具时，它会向您显示可以使用的模板列表。或者，您可以开始一个新项目并从头开始设计。如果您使用 Sketch，则可以将 Sketch 设计导入 Airbeam。执行此作时，此工具会自动将草图符号转换为编码组件，您可以自定义和重复使用它们。编辑器布局整洁简单。它在左侧索引您的设计组件，您可以在其中管理适当层次结构中的所有层和组件。然后，您可以在中间获得画布，您可以在其中创建布局并使用右侧的选项面板自定义它们。右侧面板为您提供了以下设计选项：信息：添加设计的名称和其他信息。属性：自定义类型、样式、位置、尺寸、边距、填充、文本、背景、边框和角半径。触发器：设置触发器（单击、悬停、鼠标、输入、鼠标离开或无）并定义作（导航屏幕、打开 URL、返回或无）。代码：显示所选模块的 CSS、JSS、React 内联样式和 React Native 代码。预览设计在创建设计时，您可以随时预览各种屏幕类型的设计。只需单击顶部的“预览”选项，它就会在新选项卡中打开设计，您可以在其中预览台式机、移动设备和平板电脑。您还可以使用预览链接与其他人共享此预览。获取设计代码该工具的主要亮点之一是它为设计生成代码。顶部的“显示代码”按钮会在屏幕上打开一个选项卡，您可以在其中找到适合您设计的以下类型的代码：React（CSS 模块和 ReactJSS）React-Native下一页JSVue与任何其他工具不同，Airbeam 有一个“代码样式选项”，允许您指定代码的自定义语法。使用此选项，您可以设置打印宽度、制表符宽度、尾随逗号、括号间距、半列的使用和其他选项。这为您提供了满足您需求的自定义布局中的代码。除此之外，您还可以将设计项目导出到以下平台：代码沙盒世博会在此处使用 Airbeam 创建动态设计。?通常，设计人员创建一次性设计，然后使用 UI 的代码进行复制。Airbeam 是一款综合工具，将设计和编码部分合二为一。它允许您创建可以自动适应屏幕的动态设计。它通过自动生成设计代码为您节省大量时间。我真的很喜欢定义代码语法的选项。这使用户可以灵活地以满足其需求的特定语法获取设计代码。Airbeam 仍处于早期阶段，具有更多功能并正在导出到 NPM 和 Git。
