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、起始输入

　　您输入的组件现在收受您输入的值 。耶！