How to create new components using component patterns

Components are the main building visual blocks in Uniform for content editors to easily assemble new compositions for digital experiences.

Usually, a developer or content architect defines the components available in a project. This is because these components must be coded as UI components, often using frameworks like React or Vue, to be able to render them in applications.

In Uniform, the component definitions detail which properties of the coded UI components should be accessible to content authors as component parameters or what kind of child components can be added to its slots.

So, does this mean you always need to rely on a developer when you require a new component? Not with Uniform! Thanks to our powerful concept of patterns, you can create specialized variations and and combinations of components without the need to write a single line of code!

Before we delve into how you can create your own components using component patterns, it's crucial to understand the role of "atomic" or modular component building principles in design systems. Additionally, we'll see how these principles can be utilized in Uniform

Modular components and the “Atomic Design” method in design systems#

The design system's component library, managed by design and development teams, typically has numerous basic components, referred to as "atomic" components. These can be used to assemble more complex components, often called "molecules" or "organisms" which can be combined to build full pages. This approach is known as "Atomic Design".

The primary role of an individual component is to define the layout or appearance of its content. It encompasses numerous design decisions regarding colors, typography, and spacing. In certain cases, it also determines how the component scales across various screen sizes, as well as its variants (like "primary", "info", "outline") and states (such as "active", "focused", "disabled").

These components can vary in complexity:

• simple “atomic” components: buttons, tags, badges, spacings, text blocks, images, generic layout containers such as tab bars or accordions or responsive grid layouts
• mid-complex “molecules” which are assembled from atomic components: card, hero, banner, image gallery, forms
• complex “organisms” components that combine of various molecules”: site header, site footers, main navigation, site sections with specific layouts
• complete page structures or templates that are made out of “organisms”: landing page, product detail page, listing page

UI components in design systems primarily focus on "how content is displayed," not "what content is displayed." For instance, a Card component can be used to display a variety of content types such as products, blog posts or events. How such content can be applied to components is where Uniform shines.

Applying “Atomic Design” principles to component patterns#

Uniform components are usually content-neutral, similar to their coded UI counterparts. This means they can be used in many ways. It's up to the editor to decide the content, design settings, or component variants. This flexibility gives a lot of freedom to content editors.

Sometimes, too much flexibility can be daunting. It might be helpful to create presets or pre-built components for specific use cases.

This is where component patterns in Uniform are play a major role as they

• allow the creation of component presets tailored to specific types of content or layouts
• reduce the number of decisions a content editor needs to make, thereby improving editorial efficiency
• enforce best practices, consistency, and overall quality by reusing component configurations

When you implement components from your design system into Uniform using an "atomic design" approach, you create a flexible set of components. These components can be combined in various ways to form component patterns, all without requiring a developer or any code changes. Furthermore, the various use cases of component patterns can be combined, providing even more flexibility to content architects and editors.

Use case 1: Create component patterns for specific types of content#

This is one of the most common use cases for component patterns. You want to connect some external content or data of a specific type to a generic component.

Usually you will follow this simple formula:

<Content type> + <Component> = <Type of component pattern>

Examples:

• show a Product as a Card: Product Card
• show a Event as a Hero: Event Hero

Once a component pattern is created, typically an editor simply places the pattern on a composition and selects the content item to be displayed. They don't need to manage design settings or other configurations, unless you grant them the option to override the default settings.

To create a component pattern for a specific type of content follow these steps:

1. Go to Experience > Component Patterns
2. Click “Add component pattern” and choose the component that the new component pattern should be based on. This will open up the component pattern editor
3. Give the new component pattern a name (see formula above for a best practice)
4. Add one or more pattern data resources via the “Data Resources” side rail panel
5. Add dynamic tokens to the component parameters and connect them with the external data.
6. Configure the "Override settings" of the component pattern. This will determine which parts of the component pattern an editor can modify for each individual instance.
7. Publish the component pattern
8. Optional: you might need to enable the component pattern on slots of compositions or components that don’t inherit all component patterns
9. Use new component pattern on compositions

Use case 2: Create component patterns as pre-assembled presets#

If you've created a complex component for a specific use case, such as a campaign or a section of a landing page, you can convert it into a reusable component pattern for your team.

These components can be assembled from your "atomic design" component library, which ranges from simple atoms to complex organisms. It also enables you to create new components, which may not be part of your original design system, by combining existing components in innovative ways.

By specifying the override settings of the component pattern and its child components, you gain detailed control over the flexibility granted to content editors for a particular component pattern. You can even create variations of the same component patterns for the various levels of experience in your editorial team: from the locked down Simple Hero to the fully flexible Advanced Hero for the power users on your team.

Creating component patterns is a method of sharing best practices, enhancing overall consistency and quality. It also allows for centralized updates of common components across your compositions.