How to add Smart Blocks?

  1. Open your Guidelines

  2. Activate the Edit Mode & Click on the + button

  3. 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/columns or words related to the kind of block you want to add.

Smooth Navigation

You can navigate through the different search results with your keyboard and easily select the one you need in your Guidelines 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

These are the type of block which are most commonly used by users.

Formatting

These blocks are the type that adds any type of formatting to a text.

  • The Table block: allows you to organize your text or data.

  • Personal Note: this block helps you to add a comment, suggestions, or any remark on the Guidelines.

Colors

  • Color Scale: Prioritize your colors in the context of each other, set accents, and create contrasts.

  • Color Swatch: Download all your colors in ASE, LESS, and SCSS format.

Typography

  • Typo Styles: Define the combined usage of text and background colors, fonts, font sizes, and line heights

  • Font Kit: Let's you download fonts in your Guidelines as a compact zip file.

Media

  • Image Block: Add images to your Guidelines by either uploading them or picking them from your libraries using the Asset Chooser.

  • Image Grid Block: Allows you to add several images in a space.

  • Icon Webfont Block: Allows you to add icons from an outside source.

  • Annotations Block: Describe your visuals by adding captions and notes

  • Audio Block: Include Audio files in your Guidelines.

  • Embed Block:

  • Allows you to add the URL of any third-party tool e.g. Loom, Miro Figma, etc. that you want to document and share in your brand guidelines.

  • You can also add any existing external assets you've already created as part of a project to your brand guidelines using the asset chooser.

  • Icon Library Block: Add icon libraries with their collections directly into the Guidelines.

  • Template Block: Add a template from the Template Library to enable users to create their own publications

UI & Code

  • UI Pattern Block: Define and share user interface design patterns

  • Snippet Block: Document and share your code snippets

  • Attributes Block: Enrich code attributes with additional descriptions

  • Developer Kit Block: Download patterns, fonts, icons, and colors with one click

  • Do & Don't Block: Let your users know what is wanted or not by placing two separate columns of what is required or not.

  • Storybook Block: StoryBook patterns can be easily viewed using this block.

Sharing

The Sharing blocks are those that have been mentioned in different sections before and are usually used when sharing some kind of file or assets within the Guidelines.

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.

Happy documenting!

Did this answer your question?