Раиса Беллуян › raisabelluyan
Стратегия, процессы, сайты/дизайн под ключ, реклама/SMM, тексты
Рейтинг
7 521
№ 166 в каталоге
Отзывы
Профессионализм
10/10
Коммуникация
10 /10
Город
Москва
Опыт работы
16 лет
На сайте с
2024 года
Юридический статус
ИП

UI-кит в Figma: компоненты, состояния, адаптив и передача в разработку

Используемые навыки Figma UI/Пользовательский интерфейс Веб-дизайн

Описание

Макеты рисовались по экранам, и одна и та же кнопка выглядела по-разному на трёх страницах. Разработчик каждый раз уточнял отступы и поведение, а при добавлении нового экрана дизайн приходилось собирать заново.

Решение

Собрала библиотеку компонентов: кнопки, поля, карточки, таблицы, модальные окна — каждый со всеми состояниями: обычное, наведение, нажатие, отключено, ошибка, загрузка.

Задала сетку, шкалу отступов и типографику как переменные, чтобы правка проходила по всем экранам сразу. Описала поведение на трёх ширинах: телефон, планшет, десктоп.

Для передачи в разработку подготовила спецификацию: что жёстко, что тянется, что переносится.

Результат

Библиотека компонентов со всеми состояниями, сетка и шкала отступов в переменных, правила адаптива и спецификация для разработчика.

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

Оценили проект:

Другие проекты

Все проекты →
Веб-разработка и IT Сайт маркетингового агентства на 1С-Битрикс и готовом решении Аспро
Сайт маркетингового агентства на 1С-Битрикс и готовом решении Аспро
50
ИИ и Нейросети ИИ-локализация каталога: перевод карточек товаров на три языка с глоссарием и приёмкой
ИИ-локализация каталога: перевод карточек товаров на три языка с глоссарием и приёмкой
40
Маркетинг и Продвижение SEO-продвижение: семантика, структура сайта, техническая база и контент-план
SEO-продвижение: семантика, структура сайта, техническая база и контент-план
53
Веб-разработка и IT Интернет-магазин для мобильных держателей
Интернет-магазин для мобильных держателей
214