Introducing Templates  ·  Eulerity NYC, 2024

Pre-defined Figma UI layouts that speed up handoff by 50%.

DESIGN SYSTEM MANAGEMENT

PDCA CYCLE

ATOMIC PRINCIPLES

FIGMA NESTED PROPERTIES

PROTOTYPE

01. What are templates?

“Templates” are an advanced evolution of Figma UI layouts within the Design System.

Design systems are often the unsung heroes of the products we use every day, from mobile apps and websites to the interfaces on television screens and car dashboards. When we design/define Design Systems on Figma, one of the components we define is the “Responsive Frame,” which acts as a foundational layout container that designers use to structure interfaces across different viewports. These layouts are just the blank artboard with the correct industry standard size for web, mobile, and tablet.

These layouts indicate which components have been developed by the dev teams and the viewports on which the QA team performs testing.

This project — Introducing Templates, takes it a step further by offering pre-configured, content-ready layouts for faster solution composition and higher component consistency.

I arranged these templates on Figma as an improvement for Eulerity’s Ad-Tech SAAS design system and significantly improved the product design workflow by 50%. This project provides a breakdown of the process and its importance as a habit to work efficiently with design systems.

“For me I’ve been finding it really helpful and it’s been streamlining how I work on the screens so I can focus more on the ux / how the feature works rather than on ui so I appreciate it”

Margarita — Lead Product Designer @ Eulerity

02. Reducing redundancy

Reducing Redundancy

According to Nielsen Norman Group, a design system helps manage design at scale by “reducing redundancy” and visual consistency across products. “Reducing Redundancy” implies cutting down on wasted time re-finding or redoing assets.

At Eulerity, a significant amount of time was spent on designing system operations, which could otherwise be used to drive higher-impact design work. Major factors contributing to unnecessary redundant work included:

Inefficient Design Handoff
Locating the correct source files accounted for nearly 60% of project time, and even then, many files contained outdated components or incomplete flows. This led to unnecessary back-and-forth and significant delays in kicking off new design tasks.
QA overhead during review:
Because designers relied on personal file versions rather than a centralized source of truth, UI assets began to drift in style and behavior resulting in inconsistent user experiences and additional QA overhead during review.

03. Why Templates

Why were Templates Required?

We created a time map (see below) to analyze how time was distributed across each phase of the product design process. By tracking the “average time required to complete design tickets”, we identified bottlenecks within the workflow.

For this, we aligned as a team and began tracking our active sprint tasks. Measuring the time spent and identifying how many phases each task required for completion.

Our analysis revealed two major time-consuming phases in the product design cycle:

Locating the correct design source files — Designers often spent significant time searching for the latest components or reference files, leading to delays and confusion when outdated assets were accidentally reused.
Design review and feedback loops — Review cycles took longer than expected due to inconsistent formats and unclear version ownership, resulting in repeated back-and-forth before final approval.

04. Work Process

I structured the templates using existing DS components and created a release plan based on a widely used operational excellence strategy.

While studying Operational Excellence strategies in Northeastern University’s Advanced Business Processing course, I was introduced to two core frameworks (a)Lean (focused on eliminating waste) and (b) Six Sigma (focused on process optimization).

When approaching this project, I aligned my solution with Lean principles, as the goal was to enhance existing workflows without removing essential steps. To achieve this, I adopted one of Lean’s most widely used methodologies, the PDCA Cycle (Plan → Do → Check → Act) — and applied it to this project and iteratively improved the design system operations.

I applied Brad Frost’s Atomic Design principles to structure the templates: individual atoms formed the basic building blocks, atoms combined to create molecules, and molecules were then assembled into complete templates.

I organized molecules and created variants i.e different versions of the same molecule adapted for use across various parts of the application.

Molecules
Grids, Graphs, Lists, Forms

Molecule Variants
Grid1, Grid2, Grid3, Grid4
Graph1, Graph2, Graph3, Graph4
List1, List2, List3, List4
Form1, Form2, Form3, Form4

Final Template
Combination of Sub-templates

05. Steps taken

Collection. Segregation.
Arrangement.

Using this process, any team, across any product, can quickly build highly scalable UI layouts using existing DS components that serve as a reliable starting point for future projects.

1. Collecting Recurring Patterns
I first conducted an in-depth audit of the product’s interfaces, gathering all pages and components to identify “Recurring Patterns”.

2. Segregating into Layout Categories
I then grouped recurring patterns to form distinct “Layout Categories”.

3. Arranging Categories to Templates
Each category was converted into a component, with its variations defined as variants. These were then grouped into a single master component, where each category functions as a variant. This structure now allows us to switch between nested components and their variations using simple Figma property controls, all within one unified component.

The final out put (Template) is a single, versatile UI layout that has fixed components, such as navigation and headers, with one unified master component having nested components like tables, lists, graphs, and grids, and their nested variants.

This single template could now support all major layout use cases, without spending a lot of time searching for updated components and source UI layouts for new tickets.

05. Steps taken

Team Feedback

After implementing the new templates, I tested them within the team on small projects and gathered feedback from design leads.

Using these templates in my own projects reduced my project completion time by nearly 50%, streamlining the workflow and boosting productivity.

“…one project I was particularly impressed with was their intern project, where Kalsi collaborated with another intern to design robust, reusable templates for our design system—templates we still rely on today.”

Maya - Lead Product Designer @ Eulerity