Features
Basic Functionality
- Management of design projects through structured workspaces and style guides, feedback functionalities, versioning, approvals, project status, user permissions, and more.
- Creation of code-based, responsive design components.
- Support for HTML, CSS, and JavaScript.
- Organization of components through drag-and-drop menus, tags, favorites, sorting, searching, and more.
- This allows you to create code-based design systems and manage your digital assets.
Backend Functions
- Modular nesting of components with up to six hierarchy levels: styles, atoms, molecules, organisms, segments, and page templates.
- Most CSS/HTML attributes are implemented without code input using «Drag & Drop» menus and autosuggests.
- All inputs can be specified in different units of measurement (px, rem, em, %).
- Digital asset management: Upload and manage custom fonts, images, and individual code libraries.
- Integration of all Google Fonts (with preview functionality).
- Definition of breakpoints for CSS media queries.
- Responsive WYSIWYG preview of components.
- Choose between a «mobile first» or «desktop first» approach.
Features of Styleguides
- Code Pattern Library: Provision of code for each component in HTML, CSS, and if applicable, JavaScript.
- Export/Download of the entire Styleguide that can also be used offline
- The Styleguides display all elements responsively. You can control the viewport size through the navigation
- Inclusion of annotations, labels, and explanatory texts
- Autosuggest search to find the right component
- Custom homepage, individual layer and category labels
- Optional password protection and design customization of the Styleguide
- Display of all assets and elements with additional information such as integrated elements, file size, dimensions, last edit, and more
- Page templates can be opened and evaluated in separate windows
- Comments can be added to each component, allowing for feedback discussions on every design element