Design Workflow Blog

How-to: using your design system

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

An example of a design system and its modules.

Example of a componentized design library.

When designing your 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 HTML design. It allows making content areas editable. So any design can turn into an editable template within a few minutes by enabling your placeholder text or images as editable. Either by using the visual theme editor, or by adding HTML classes and attributes to your DOM.

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

Customizing your guardrails

Text has only basic formatting options. 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 pattern library to its full extent. It also simplifies any documentation around your design since guidelines are inherent in the editable framework.

Start making your HTML design editable for free for your team to easily build and edit campaigns.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr
Designing and building on the web for over 15 years