Когда потенциальный работодатель даёт тестовое «нарисовать лендинг из 4 блоков», легко попасть в ловушку: сделать красивую картинку и на этом остановиться. Но реальная работа дизайнера в продукте — это создание продуманной и гибкой базы, с которой будет удобно работать и бизнесу, и разработчикам.

На примере тестового для магазина шариковых ручек я хочу показать свой подход: как из простого брифа собирается масштабируемый интерфейс, который не стыдно передать в разработку.

1. Фундамент: сначала токены, потом макет Если сразу рисовать экраны, на середине пути утонешь в хаосе из случайных отступов. Поэтому я начала со страницы Design System. Собрала семантическую палитру, типографику на Unbounded + Inter (обе с лицензией SIL OFL) и шкалу отступов, кратную 4. Это гарантирует, что интерфейс не «поедет» при масштабировании.

2. UI-кит вместо простого копирования Каждый элемент является компонентом с вариантами. Карточка товара — это один мастер-компонент с текстовыми свойствами. Наниматель получает настоящий конструктор, который разработчик соберёт за пару дней.

3. Два брейкпоинта — две логики На мобилке меняется структура: слайдер перестраивается из горизонтальной сетки в вертикальный столбик, а навигация уходит в бургер-меню.

4. Главная боль: как Auto Layout ломает макет (и как я это починила) 💪 Вот тут начинается реальная работа с Figma: 🔸 Карточки растянулись, а картинки внутри — нет. В сетке карточки стали по 464 px, а изображение осталось 280 px. Решение: выстроила цепочку Fill от родительского контейнера к дочерним слоям. Если контейнер тянется, внутри всё должно тянуться тоже. 🔸 Мобильный слайдер схлопнулся. Оказалось, компоненты в Figma фиксированы. Пришлось собрать отдельный компонент для мобилки, чтобы контент не «съедался».

5. Overdelivery: прототип, который реально работает Я не остановилась на статичном макете и собрала интерактивный прототип. Меню выезжает по клику на бургер, а слайды переключаются.

Что в итоге: 3 страницы в Figma, 40+ компонентов с вариантами, 2 брейкпоинта и прототип. Думаю, у меня получилась готовая база для реального продукта.

Пишите в комментариях: вы бы сделали сначала дизайн-систему или сразу макет? 👇

Макет тут: https://www.figma.com/design/ZqVHIO2YP603p7SDY6rLfH/Test-Assignment-Anastasia?node-id=0-1&t=rsLIEsJWRHC9mnPq-1 Ссылка на прототип: https://www.figma.com/proto/ZqVHIO2YP603p7SDY6rLfH/Test-Assignment-Anastasia?node-id=46-943&p=f&viewport=-369%2C140%2C0.16&t=H1Ou97W5lh8sfjOs-1&scaling=min-zoom&content-scaling=fixed&page-id=2%3A3

#uiux #figma #webdesign #вебдизайн #дизайнсистема #лендинг #начинающийдизайнер #testtask