Alva是一款专业的原型设计工具,软件致力于快速构建和迭代原型,为设计者提供简洁高效的设计方式,有效帮助用户简洁快速的完成原型图的设计,并受到越来越多的产品经理、项目经理、UI设计师、程序员等用户朋友的关注、喜爱和支持,适用于软件团队、个人在软件开发的设计阶段使用,其低保真、无需学习、快速上手、功能够用,并能够很好地表达自己的设计,有需求的用户可在此点击下载!
1、整合您的视觉设计草稿
将Sketch,Figma或任何其他设计工具的最新设计草图添加到原型中,并向您的团队展示下一个组件的外观。
2、使用代码组件启动原型
连接到React库的组件并开始使用它们作为原型。 无需编写任何代码。
3、通过互动连接一切
网络是互动的 - 所以我们也要以交互方式进行设计。 超越静态屏幕和设计时考虑到交互,数据和逻辑。
4、草图集成
将Sketch集成到您的原型设计工作流程中,并将代码无缝导出到Sketch并将设计草图导入原型。
添加图像组件
从Essentials库中添加Image Component 并将其拖到上面的元素列表中。
上传您的设计组件
选择组件后,您将在右侧看到Image属性。只需要单击“选择”,然后选择导出的文件即可。
设置图像大小
您可以调整组件的大小,甚至可以定义最小或最大大小。例如,您的组件可以是80%宽度,但最大为1280px。
Alva设计库进行分析
从克隆的源文件中“构建”Alva Design Library。这样做是为了让Alva在尝试理解图书馆的代码时更轻松。
将Alva Design Library连接到Alva
Alva设计图书馆现已准备好与Alva相连。点击Create New Alva File欢迎屏幕的右侧,启动Alva并创建一个新项目
1、启动Alva
Alva应该安装到您的应用程序文件夹中。根据您的操作系统及其配置,具体位置可能会有所不同。例如,对于macOS来说/Applications/Alva。
找到Alva徽标并双击它以启动。Alva应该通过以下屏幕迎接你:
2、创建新文件并连接库
单击Create File,然后从左上方面板中的视图切换Design到Library视图。您会发现一个不断增长的公共组件库列表。
找到Alva Website Design库并单击Connect。
就是这样 - 你将你的第一个设计系统与Alva连接起来!
3、添加文本组件
回到Design视图。您可以在左下方面板中找到库的组件。找到Text组件并将其放到组件列表正上方的元素窗格中。
4、调整属性
选择新添加的文本组件后,请查看Alva的右侧。这就是显示组件的所有属性(如设置)的位置。在我们的例子中,只有一个 - 文本值。让我们改变它Hello Alva!。
5、添加Box组件
让我们添加另一个组件。除了拖动组件,我们只需双击Box组件即可。Box Component具有更多属性。让我们将heightto 400px和background-color更改为#DA046E。
6、重新订购元素
您可能已经发现,支持子元素的元素左侧有一个小箭头。您可以将元素拖放到它们中。让我们将文本元素移动到框元素中!
通过互动链接页面
1.添加页面
在Alva的左侧显示所有页面。让我们添加一个页面并为其命名。
2.添加按钮
我们需要一个交互式组件。例如,让我们添加一个按钮。
技术说明:对于交互式元素,您需要一个React.MouseEventHandler或React.EventHandler属性。
3.链接页面
在通常的按钮属性(如Order或Disabled)下方,您将找到Interaction属性。将其设置为Switch to Page并选择下面要链接的页面。而已!
4.单击
好吧,因为通常当您单击预览中的元素时它会被选中,我们必须以不同方式测试我们的交互。在MacOS 上按住CMD或在Windows 上按住Ctrl键并单击按钮。是的,你刚刚切换到另一页!导出原型后,您不再需要按住这些键。
同类推荐
2022-06-06
立即下载2022-10-19
立即下载2022-10-21
立即下载2022-10-28
立即下载2022-11-22
立即下载2022-11-22
立即下载