Nice browser. Is it antique?
No, seriously - your browser is so old that some features of patternplate don't work as expected.
Don't worry - you can either continue with a restricted version or install an up-to-date browser.
We messed up.
Sorry, but your user experience might be affected.
- Try reloading the page
- Report the problem at github.com/patternplate/patternplate

Get started

In this guide you'll start your first Alva project and connect a publicly available component library.


1. Download and install

Download the Alva image appropriate for your platform from the Releases Page.

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.

2. Start Alva

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 /Applications/Alva.

Find the Alva logo and double-click it to start. Alva should greet you with the following screen:

3. Create a new file and connect a library

Click on Create File and then switch from Design to Library view in the top left panel. You find a continously growing list of public component libraries.

Locate the Alva Website Design library and click on Connect.

That’s it – you connected your first Design System with Alva!

4. Add a text component

Go back to the Design view. You find the library's components in the bottom left panel. Locate the Text component and drop it onto the element pane right above the component list.

3. Adjust a Property

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 Hello Alva!.

4. Add a Box Component

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 height to 400px and the background-color to #DA046E.

5. Re-Order Elements

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!


Next

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.

Guide 2: Link Pages with interaction