👩🎓 Level: Beginner
In this guide you'll take your very first steps with Alva.
We fully support macOS and Windows systems and provide untested images for various Linux platforms.
Next, locate the Alva image in your Downloads and double-click on the file to start the installation process.
Alva should install into your applications folder. Depending on your operating system and
its configuration the exact location may vary. E.g. for macOS it is
Find the Alva logo and double-click it to start. Alva should greet you with the following screen:
Create new Alva File. You'll find a list of essential patterns on the bottom left of the next screen.
Text pattern and drop it onto the element pane right above the patterns list.
That’s it – we just added your first component to our prototype!
After you've selected the newly added text component, have a look at the right side of Alva. That is where all the properties – like settings – of the component are shown. In our case there is just a single one – the text value. Let’s change that to
Let’s add another component. Besides dragging a component, we can just double-click on the Box Component. The Box Component has way more properties. Let’s change the
400px and the background-color to
As you may have already found out, elements that support children elements have a small arrow on the left side. You can drag and drop elements into them. Let’s move the text element into the box element!
Hooray! You learned the essentials of working with Alva. Let’s jump to the next topic – how to integrate your design drafts into the prototype.