Alva Canary可以帮助用户在电脑上设计原型，通过编程技术就可以设计生活原型，内置多种代码组件，打开软件以后就可以开始设计自己的项目，也可以在软件打开官方提供的案例项目，通过查看已经设计完毕的案例以及文字说明就可以知道这款软件设计原型的方式，这款软件支持设计草案，支持连接到库，支持编辑互动信息，支持编辑变量，也可以在软件创建库，非常适合需要设计原型的朋友使用！
软件功能
1、使用代码组件启动原型
连接到React库的组件并开始使用它们作为原型。无需编写任何代码。
2、整合您的视觉设计草稿
将Sketch，Figma或任何其他设计工具的最新设计草图添加到原型中，并向您的团队展示下一个组件的外观。
3、通过互动连接一切
网络是互动的 - 所以我们也要以交互方式进行设计。超越静态屏幕和设计时考虑到交互，数据和逻辑。
草图集成（即将推出）
将Sketch集成到您的原型设计工作流程中，并将代码无缝导出到Sketch并将设计草图导入原型。今年晚些时候到来。
软件特色
元件
Alvas Element树中的一个实例。通过配置Element的属性，可以控制元素的内容，显示或行为。元素包含应根据哪种模式呈现数据的信息。
图书馆
Alva可以分析和使用的代码模式集合。这意味着一个NPM包提供React组件imlement和TypeScript类型。
图案
Alva检测，配置和渲染原型部分所需的React组件实现和API描述。模式包含可以配置属性的信息，以及从中创建的Element实例的数据类型。
安装方法
1、下载alva-1.0.0-alpha.52-canary.exe软件直接启动，设置安装地址C:Program FilesAlva Canary
2、软件的安装进度如图所示，等待软件安装结束吧
3、提示安装完毕界面，点击完成就可以启动
使用方法
1、Alva Canary设计界面如图所示， 软件是英文界面，所以需要看懂部分单词意思
2、可以在软件界面打开教程，也可以在软件打开案例文件
3、例子文件还是非常多的，使用实时代码组件开始设计，连接到您的代码库，直接将工程师在实时页面上使用的组件添加到您的设计中。 立即尝试页面的响应行为
4、添加最新鲜的设计草稿
直接从Sketch（或任何其他设计工具）添加设计草稿到Alva，所以每个人都可以看看您的最新想法。 一旦您的团队满意，您就可以开始从中开发代码组件。
5、通过互动连接一切
网络是互动的，所以我们也应该以交互方式进行设计。 我们使您能够超越静态屏幕，如果您愿意，您甚至可以使用自定义代码创建自定义交互。
6、等待它 - 我们完全是开源的。
在过去几年中，大多数设计工具都是昂贵的专有软件。 我们希望回馈社区并启动下一代设计工具。 思想开放，开源。
使用说明
第一次启动Alva
Alva应该安装到您的应用程序文件夹中。根据您的操作系统及其配置，具体位置可能会有所不同。例如，对于macOS来说/Applications/Alva。
1、找到Alva徽标并双击它以启动。Alva应该通过以下屏幕迎接你：
2、创建新文件并向其添加内容
点击Create new Alva File。您将在下一个屏幕的左下角找到基本模式列表。找到Text模式并将其拖放到模式列表正上方的元素窗格中。
3、调整属性
选择新添加的文本组件后，请查看Alva的右侧。这就是显示组件的所有属性（如设置）的位置。在我们的例子中，只有一个 - 文本值。让我们改变它Hello Alva!。
4、添加Box组件
让我们添加另一个组件。除了拖动组件，我们只需双击Box组件即可。Box Component具有更多属性。让我们将heightto 400px和background-color更改为#DA046E。
5、重新订购元素
您可能已经发现，支持子元素的元素左侧有一个小箭头。您可以将元素拖放到它们中。让我们将文本元素移动到框元素中！
添加设计草稿
1.导出设计组件
从您喜爱的设计工具（如Sketch，Figma或Photoshop）导出设计组件，如SVG，PNG或JPG。
2.添加图像组件
从Essentials库中添加Image Component 并将其拖到上面的元素列表中。
3.上传您的设计组件
选择组件后，您将在右侧看到Image属性。单击“选择”，然后选择导出的文件。
4.设置图像大小
您可以调整组件的大小，甚至可以定义最小或最大大小。例如，您的组件可以是80％宽度，但最大为1280px。
添加设计草稿
1、添加输入
为了显示交互性，我们需要一个交互式组件。我们添加一个输入。
本指南教授如何将Alva项目连接到现成的Alva设计库。 React.ChangeEventHandler或React.EventHandler财产。
2、定义变量
在输入属性下方，您将找到交互属性。设置为 Set Variable。接下来，输入您想要的名字给它命名。最后，您需要定义有效负载。设置为value
3、将组件链接到值
要使用已定义的变量，需要在组件中使用它。在Input组件中，单击value属性上的链接图标，然后选择以前定义的变量。
4、开始输入
您输入的组件现在接受您输入的值。耶！
∨ 展开