Meet Alva
Alva is a radically new digital design tool built for cross-functional product teams.
Alva works with your production frontend components, adding up-to-date, responsive, and interactive designs to your living styleguide.
You can start with a minimal set of components to sketch concepts and do fast iterations with your development team to create and enrich components, from atoms to modules and entire pages and a full-featured styleguide. But you can also add Alva designs to existing style guides.
Alva focuses on the arrangement and content editing of pages, while it leaves the implementation of the components to the developers, providing a single source of truth for both.
There is no such thing as out-dated and static PNG screens, as the current version of both the design models and the component implementation always render to up-to-date web pages instead.
Installation
For the full list of all releases, see Github
- Visit https://meetalva.io/
- Scroll to Download Alva and click on it
- Wait for the download to complete
- Double click the downloded file
- Follow the instructions to install Alva
Usage
Getting Started with Alva
👩🎓 Audience: Everyone
- Follow the installation instructions
- Start Alva
- Click "Create A New Alva File"
- Drag some elements from the pattern pane (bottom left) to the element pane (top left).
- Download the example file from meetalva.io
- Open it by hitting
Cmd+O
, then select the downloadedExample.alva
- Notice how the the pattern pane has new entries? That is a production-level pattern library embedded in
Example.alva
!
Connect a Pattern Library to your Project
👩🎓 Audience: Everyone
- Start Alva
- Click "Create A New Alva File"
- Click the "Connect" button (top right)
- Select a directory that contains a compatible pattern library
- Alva adds all found components to the pattern list (bottom left)
ℹ️ Alva currently supports a limited set of pattern libraries. See Pattern Library Requirements for details.
Consult with your team members if your library fulfills the requirements.
Use the Alva DesignKit if you don't access to a compatible pattern library.
Pattern Library Requirements
See Alva DesignKit for a compatible project setup
- Language: TypeScript
- View Library: React
- Styleguide: patternplate
ℹ️ We plan to support more technologies and setups in the future.
Pattern Requirements
-
Language: TypeScript
-
View Library: React
-
Must be a valid
patternplate
pattern (havedemo.tsx
,pattern.json
) -
Must be exported via
export
-
Must by typed as
React.SFC
,React.ComponentClass
,React.PureComponent
,React.StatelessComponent
,React.SFC
-
Must be built with
declarations
, so aindex.d.ts
is available -
In order to accept children elements in Alva, the
children
prop has to be typed explicitly -
Supported property types are
- string
- number
- boolean
- enum
Pattern Meta Data
Pattern
- name:
pattern.json
.name
or TSDoc@name
- Name of pattern in pattern list - description
pattern.json
.description
or TSDoc@description
- Short description in pattern list
Pattern Property
- name: TSDoc
@name [name]
- Used in the property pane as input label - default: TSDoc
@defaul [value]
- Preset value for this property when creating new elements - description: TSDoc
@description [description]
- Used as help text in property pane - example: TSDoc
@example [value]
- Example used as input placeholder if applicable - ignore: TSDoc
@ignore
- Do not show this property - slot: TSDoc
@slot
- Force alva to consider the property as Slot - href: TSDoc
@href
- Force alva to consider the property as href
Feel free to dive in! Open an issue, submit a Pull Request or let’s discuss what should be next. ❤️
Alva follows the Contributor Covenant Code of Conduct.
Proudly powered by SinnerSchrader.
Copyright 2017-2018. Released under the MIT license.