about project

Netology is a large online education platform with multiple directions and hundreds of active courses.

To avoid rapidly scaling the design team while maintaining quality and consistency, we decided to optimize and partially automate the entire content production process through a modular Figma-based design system.

current pains

Through an audit of the existing workflow, we identified several key challenges:

Extremely high volume of educational materials: up to 50–80 items per week
Inability to continuously scale the design team to match the growing workload
Long production cycles and frequent bottlenecks
Lack of visual and structural consistency across materials created by different designers

Goals

Develop a unified design system for all types of educational materials
Break down materials into reusable “atoms” and create a scalable component system
Automate content assembly in Figma using components, layouts, and styles
Reduce production time while improving consistency and quality

Concept

The core outcome of this project was not only building a full-scale design system but enabling complete automation of educational material assembly in Figma. We created a workflow where designers can produce consistent, ready-to-publish content in minutes instead of hours.

Presentations

We created a modular presentation builder in Figma where an entire presentation can be assembled from a single master slide.

By replacing components within the layout, all elements automatically adjust and align thanks to predefined layouts and responsive structure.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Approach 1: Full-Slide Replacement

This workflow is designed for fixed, recurring slide types.A designer can instantly swap an entire slide for another predefined layout — all structure, spacing, and typography are locked in, ensuring consistency for standard, repeatable content

Approach 2: Modular Slide Constructor

For more flexible or custom content, slides can be assembled from modular components. Each element — text block, title, illustration, icon — has predefined properties and can be replaced or reordered. Layouts automatically adjust, allowing designers to build unique slides without breaking consistency

design system

We developed a unified design system that includes a structured typography scale and a consistent color language.As the team lead, I coordinated the system’s creation to ensure visual coherence across all materials and to support the modular, automated workflows used in content assembly

color system

Main colors

Color name

HEX code

neo dark

#47c397

neo

#4bd0a0

pro

#06f

pro light

#217aff

black

white

Additional colors

Color name

HEX code

dark

#27292d

dark light

#2f3035

gray

#757679

medium gray

#c4c4c4

light gray

#f3f4f7

error

#de3773

Colors for sheets

Color name

HEX code

light blue

#d9e9ff

light purple

#ded9fe

light pink

#fadce8

Colors for schems

neo 1

neo 2

neo 3

blue 1

blue 2

blue 3

red 1

red 2

red 3

purple 1

purple 2

purple 3

Typography

Font family: Golos

Titles

Type

Weight

Size

Line height

bold

60 px

110%

bold

40 px

110%

bold

24 px

130%

semibold

18 px

130%

Body

Type

Weight

Size

Line height

regular

35 px

130%

regular

20 px

140%

regular

18 px

140%

regular

13 px

150%

icons

Results

The new modular design system and automated assembly workflow transformed the team’s production process. The system is flexible, maintainable, and ready to scale across new types of content.

Modular Design System

about project

current pains

Goals

Concept

Presentations

design system

color system

Main colors

Color name

HEX code

Additional colors

Color name

HEX code

Colors for sheets

Color name

HEX code

Colors for schems

Typography

Titles

Type

Weight

Size

Line height

Body

Type

Weight

Size

Line height

icons

Results

contacts

contacts