Lean Design Blog

How to: using your design system

How Blocks Edit works with your brand guidelines and design system.

An example of an email design system and its modules.

Example of a componentized email design library.

When designing your email campaigns, you may already have brand guidelines that you refer to. As you put together campaigns regularly, you’ll find design patterns that you reuse. And you may even start collecting a library of components and start developing a design system around them.

Using your component library

The Blocks Edit visual editor works around any kind of email design. It allows making content areas editable. So any email design can turn into a reusable template within a few minutes by adding the block-edit tag to your text or placeholder images.

Taking the concept further, you can include reusable components within your template and turn them into drag and drop objects in the editor. block-section for stackable modules, and block-component for standalone elements like titles and buttons.

Customizing your guardrails

Adding these editable tags sets very specific actions for how your team builds emails from your template. Components are defined as stackable sections and standalone elements to limit how they work within their given context. Text has only basic formatting options: bold and italic. Imported images crop and scale to what you set for their placeholders.

On top of this, you can provide additional options based on your design. You can disable certain formatting, or even text from being edited (allowing for only editing its link, for example). You can set character limits for pieces of text. Provide alternate variants for a component to choose from.

At its core, Blocks Edit allows you to utilize your design for your team to build from. It lets you use your design library and design system to their full extent. It also simplifies any documentation around your design since guidelines are inherent in the editable framework.

Start making your email design editable using Blocks Edit tags for your team to easily build and edit their campaigns.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr
Designing and building websites and emails for over 15 years