How-to add Smart Blocks?
- Open your Style Guide
- Activate the Edit Mode & Click on the + button
- Add a Smart Block (e.g. like Color Swatches)
Smart block filter search
The intelligent filter system of the smart block adder allows you to search through it using keywords such as ‘Text’ for a text block or words related to the kind of block you want to add.
You can navigate through the different search results with your keyboard and easily select the one you need in your Style guide by pressing Enter.
Different types of Smart Blocks
Find below all the different smart blocks you can use to document your brand. Note that the more complex ones are explained in a dedicated help article. Click on the respective link to learn more about them.
Most used Blocks
Personal Note: Add a personal note to comment, suggest, and remark on Style Guide elements
Color Scale: Prioritize your colors in the context to each other, set accents, and create contrasts
Color Swatch: Download all your colors in ASE, LESS, and SCSS format
Typo Styles: Define the combined usage of text and background colors, fonts, font sizes, and line heights
Font Kit: Download fonts as a compact zip file
Annotations: Describe your visuals by adding captions and notes
Media: Embed media from sites like Youtube, Twitter, and Flickr
Template: Add a template from the Template Library to enable users to create their own publications
UI & Code
UI Pattern: Define and share user interface design patterns
Snippet: Document and share your code snippets
Attributes: Enrich code attributes with additional descriptions
Iframe: Embed external pages or prototypes by entering their URL
Developer Kit: Download patterns, fonts, icons, and colors with one click
In case you have questions left on how to use the different blocks, please don't hesitate to contact us. We're happy to help.