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

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

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

Описание

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

Решение

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

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

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

Результат

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

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

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

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

Все проекты →
Веб-разработка и IT Интернет-магазин для мобильных держателей
Интернет-магазин для мобильных держателей
183
ИИ и Нейросети Блог, который наполняется по расписанию: ИИ-пайплайн с редакторским контролем и SEO
Блог, который наполняется по расписанию: ИИ-пайплайн с редакторским контролем и SEO
15
Обучение и Наставничество Онбординг отдела маркетинга: маршрут ввода в должность, регламенты и чек-листы приёмки
Онбординг отдела маркетинга: маршрут ввода в должность, регламенты и чек-листы приёмки
12
Дизайн и Брендинг Фирменный стиль и гайд: логотип, палитра, типографика, носители
Фирменный стиль и гайд: логотип, палитра, типографика, носители
7