Практика 3. Практическая работа №3

Тема: Дизайн-система и адаптивный дизайн в Figma

Цели работы:

Создать базовую дизайн-систему с компонентами, стилями и токенами
Освоить принципы адаптивного дизайна для разных размеров экранов
Научиться создавать сложные компоненты с множественными вариантами
Изучить принципы организации файлов и командной работы в Figma
Освоить создание интерактивных прототипов с микроанимациями

Теоретическая часть

Дизайн-система (Design System)

Основные компоненты дизайн-системы:

1. Токены дизайна (Design Tokens)

Цвета: Primary, Secondary, Neutral, Semantic (Success, Warning, Error)
Типографика: Размеры, веса, межстрочные интервалы
Отступы: Spacing scale (4px, 8px, 16px, 24px, 32px, 48px)
Радиусы: Border radius для различных элементов
Тени: Elevation levels для создания глубины

2. Базовые компоненты (Base Components)

Button: Primary, Secondary, Ghost, Disabled состояния
Input: Text, Password, Search, Error состояния
Card: Product, Article, User profile варианты
Navigation: Header, Sidebar, Breadcrumbs
Feedback: Toast, Modal, Tooltip

3. Композитные компоненты (Composite Components)

Header: Логотип + навигация + действия пользователя
Product Grid: Сетка товаров с фильтрами
User Profile: Аватар + информация + действия
Search Results: Результаты поиска с пагинацией

Адаптивный дизайн (Responsive Design)

Breakpoints для мобильных устройств:

Mobile Small: 320px (старые iPhone)
Mobile Medium: 375px (iPhone 13)
Mobile Large: 414px (iPhone Plus)
Tablet Portrait: 768px (iPad)
Tablet Landscape: 1024px (iPad Pro)

Принципы адаптивности:

Mobile First: Начинать с мобильной версии
Progressive Enhancement: Улучшать для больших экранов
Content Priority: Важный контент всегда виден
Touch Targets: Минимум 44px для интерактивных элементов

Практическое задание

1. Подготовка рабочего пространства

1.1 Создание файла

Новый файл: Фамилия_Имя_КомпГрафика_Практика3
Структура страниц:
- Design System - библиотека компонентов и стилей
- Mobile Screens - мобильные экраны
- Desktop Screens - десктопные экраны
- Prototypes - интерактивные прототипы

1.2 Настройка сеток

Mobile: 4 колонки, margin 16px, gutter 8px
Tablet: 8 колонок, margin 24px, gutter 12px
Desktop: 12 колонок, margin 32px, gutter 16px

2. Создание дизайн-токенов

2.1 Цветовая палитра

Создать Color Styles:

Primary Colors:

Primary/50: #E3F2FD (светло-голубой)
Primary/100: #BBDEFB
Primary/500: #2196F3 (основной синий)
Primary/700: #1976D2 (темно-синий)
Primary/900: #0D47A1 (очень темно-синий)

Secondary Colors:

Secondary/50: #F3E5F5 (светло-фиолетовый)
Secondary/500: #9C27B0 (основной фиолетовый)
Secondary/700: #7B1FA2 (темно-фиолетовый)

Neutral Colors:

Neutral/0: #FFFFFF (белый)
Neutral/50: #FAFAFA (очень светло-серый)
Neutral/100: #F5F5F5 (светло-серый)
Neutral/200: #EEEEEE (серый)
Neutral/300: #E0E0E0 (средне-серый)
Neutral/500: #9E9E9E (серый)
Neutral/700: #616161 (темно-серый)
Neutral/900: #212121 (очень темно-серый)

Semantic Colors:

Success/500: #4CAF50 (зеленый)
Warning/500: #FF9800 (оранжевый)
Error/500: #F44336 (красный)
Info/500: #2196F3 (синий)

2.2 Типографика

Создать Text Styles:

Headings:

Heading/H1: 32px, Bold, Line Height 40px
Heading/H2: 24px, SemiBold, Line Height 32px
Heading/H3: 20px, SemiBold, Line Height 28px
Heading/H4: 18px, Medium, Line Height 24px

Body Text:

Body/Large: 16px, Regular, Line Height 24px
Body/Medium: 14px, Regular, Line Height 20px
Body/Small: 12px, Regular, Line Height 16px

UI Elements:

Button/Large: 16px, Medium, Line Height 20px
Button/Medium: 14px, Medium, Line Height 18px
Caption: 12px, Regular, Line Height 16px

2.3 Elevation (Тени)

Elevation/1: 0px 1px 3px rgba(0,0,0,0.12)
Elevation/2: 0px 2px 6px rgba(0,0,0,0.15)
Elevation/3: 0px 4px 12px rgba(0,0,0,0.18)
Elevation/4: 0px 8px 24px rgba(0,0,0,0.20)

3. Создание базовых компонентов

3.1 Button Component

Создать компонент с вариантами:

Структура:

Автолэйаут: горизонтальный
Padding: 12px 16px (Medium), 16px 24px (Large)
Border Radius: 8px
Gap: 8px (для иконок)

Варианты:

Variant: Primary, Secondary, Ghost, Disabled
Size: Small, Medium, Large
State: Default, Hover, Pressed, Disabled

Primary Button:

Background: Primary/500
Text: White, Button/Medium
Shadow: Elevation/1

Secondary Button:

Background: Transparent
Border: 1px Primary/500
Text: Primary/500, Button/Medium

Ghost Button:

Background: Transparent
Text: Primary/500, Button/Medium

Disabled Button:

Background: Neutral/100
Text: Neutral/500, Button/Medium

3.2 Input Component

Создать компонент с состояниями:

Структура:

Высота: 48px
Padding: 12px 16px
Border Radius: 8px
Автолэйаут: вертикальный

Состояния:

State: Default, Focus, Error, Disabled
Type: Text, Password, Search, Number

Default Input:

Background: Neutral/50
Border: 1px Neutral/300
Text: Body/Medium
Placeholder: Neutral/500, Body/Medium

Focus Input:

Border: 2px Primary/500
Shadow: 0px 0px 0px 3px Primary/50

Error Input:

Border: 2px Error/500
Text: Error/500

3.3 Card Component

Создать универсальную карточку:

Структура:

Background: White
Border Radius: 12px
Shadow: Elevation/1
Padding: 16px
Автолэйаут: вертикальный

Варианты:

Type: Product, Article, User, Empty
Size: Small, Medium, Large

Product Card:

Image: 1:1 aspect ratio
Title: Heading/H4
Description: Body/Medium
Price: Heading/H3, Primary/500
Button: Primary, Medium

4. Создание композитных компонентов

4.1 Header Component

Создать адаптивный хедер:

Mobile Version (375px):

Height: 56px
Padding: 16px
Layout: Logo + Menu Icon + Search Icon
Background: White
Shadow: Elevation/1

Desktop Version (1200px):

Height: 64px
Padding: 24px
Layout: Logo + Navigation + Search + User Menu
Background: White
Shadow: Elevation/1

Элементы:

Logo: 32px height
Navigation: 5-7 пунктов меню
Search: Input с иконкой
User Menu: Аватар + выпадающее меню

4.2 Product Grid Component

Создать сетку товаров:

Mobile (1 колонка):

Card width: 100%
Gap: 16px
Padding: 16px

Tablet (2 колонки):

Card width: ~350px
Gap: 20px
Padding: 24px

Desktop (3 колонки):

Card width: ~300px
Gap: 24px
Padding: 32px

5. Создание адаптивных экранов

5.1 Главная страница (Homepage)

Mobile (375px):

Header: Логотип + меню + поиск
Hero Section:
- Заголовок: “Добро пожаловать в наш магазин”
- Подзаголовок: “Найдите лучшие товары по выгодным ценам”
- CTA кнопка: “Начать покупки”
Featured Products: 2 товара в ряд
Categories: Горизонтальный скролл
Footer: Ссылки + контакты

Tablet (768px):

Header: Полная навигация
Hero Section: Больше контента
Featured Products: 3 товара в ряд
Categories: Сетка 2x2
Newsletter: Подписка на рассылку

Desktop (1200px):

Header: Полная навигация + поиск
Hero Section: Баннер с изображением
Featured Products: 4 товара в ряд
Categories: Сетка 3x2
Newsletter + Footer: Полная информация

5.2 Страница каталога (Catalog)

Структура:

Header: Поиск + фильтры
Sidebar (Desktop): Фильтры + категории
Product Grid: Адаптивная сетка
Pagination: Навигация по страницам

Фильтры:

Цена (диапазон)
Категория (чекбоксы)
Бренд (чекбоксы)
Рейтинг (звезды)
Наличие (радио-кнопки)

6. Создание интерактивных прототипов

6.1 Микроанимации

Настроить анимации для:

Button Interactions:

Hover: Scale 1.02, Shadow увеличение
Press: Scale 0.98, Shadow уменьшение
Duration: 150ms, Easing: Ease-out

Card Interactions:

Hover: Shadow увеличение, Y -2px
Press: Scale 0.98
Duration: 200ms, Easing: Ease-in-out

Input Focus:

Border color change
Shadow появление
Duration: 200ms, Easing: Ease-out

6.2 Переходы между экранами

Создать переходы:

Homepage → Catalog:

Trigger: Кнопка “Начать покупки”
Animation: Slide Left
Duration: 300ms

Catalog → Product Details:

Trigger: Тап по карточке
Animation: Smart Animate
Duration: 250ms

Mobile Menu:

Trigger: Тап по иконке меню
Animation: Slide Down
Duration: 200ms

6.3 Состояния компонентов

Создать состояния для:

Button States:

Default → Hover → Pressed → Disabled
Плавные переходы между состояниями

Input States:

Default → Focus → Error → Success
Анимация появления ошибок

Card States:

Default → Hover → Selected
Визуальная обратная связь

7. Организация и экспорт

7.1 Структура файла

Организовать файл:

Страница “Design System”:

Colors (все цветовые токены)
Typography (все текстовые стили)
Spacing (отступы и размеры)
Components (все компоненты)
Icons (иконки и иллюстрации)

Страница “Mobile Screens”:

Homepage Mobile
Catalog Mobile
Product Details Mobile
Cart Mobile

Страница “Desktop Screens”:

Homepage Desktop
Catalog Desktop
Product Details Desktop
Cart Desktop

Страница “Prototypes”:

Mobile Flow
Desktop Flow
Component States

7.2 Экспорт ресурсов

Экспортировать:

Изображения:

Все экраны в PNG 2x
Компоненты в SVG
Иконки в PNG 1x, 2x, 3x

Спецификации:

CSS переменные для цветов
Spacing values
Typography scale

7.3 Публикация

Share: Anyone with the link
Dev Mode: Включить для разработчиков
Comments: Разрешить комментарии
Version History: Сохранить версии

Критерии оценки

Дизайн-система (35%):

Полнота токенов (цвета, типографика, отступы)
Качество компонентов и их вариантов
Консистентность стилей
Организация библиотеки

Адаптивность (25%):

Корректное отображение на всех breakpoints
Правильное использование сеток
Адаптивные компоненты
Mobile-first подход

Интерактивность (20%):

Рабочие прототипы
Плавные анимации
Логичные переходы
Микроанимации

Организация (20%):

Структурированность файла
Понятные названия
Чистота рабочего пространства
Документирование

Вопросы для самопроверки

1. Что такое дизайн-токены и зачем они нужны?

Дизайн-токены — это атомарные значения дизайна (цвета, размеры, отступы), которые:

Обеспечивают консистентность во всем продукте
Упрощают обновления — изменение в одном месте влияет на все
Ускоряют разработку — готовые значения для использования
Поддерживают брендинг — соблюдение корпоративных стандартов
Облегчают командную работу — единый источник истины

2. В чем разница между базовыми и композитными компонентами?

Базовые компоненты:

Простые, неделимые элементы (Button, Input, Icon)
Многоразовое использование
Легко настраиваемые
Основа для более сложных компонентов

Композитные компоненты:

Состоят из базовых компонентов
Решают конкретные задачи (Header, ProductCard)
Более сложная логика
Специфичны для контекста использования

3. Какие принципы адаптивного дизайна нужно соблюдать?

Mobile First:

Начинать с мобильной версии
Добавлять контент для больших экранов
Учитывать ограничения мобильных устройств

Progressive Enhancement:

Базовая функциональность работает везде
Улучшения для более мощных устройств
Graceful degradation

Content Priority:

Важный контент всегда виден
Вторичный контент скрывается на маленьких экранах
Логичная иерархия информации

4. Как правильно организовать файл дизайн-системы?

Структура страниц:

Design System — библиотека компонентов
Screens — готовые экраны
Prototypes — интерактивные прототипы
Assets — ресурсы и изображения

Организация компонентов:

Группировка по типам (Base, Composite)
Логичная иерархия
Понятные названия
Версионирование изменений

Заключение

Третья практическая работа завершает базовое изучение Figma и закладывает основы для профессиональной работы с дизайн-системами. Освоение этих навыков критически важно для современного дизайнера, так как дизайн-системы являются стандартом в крупных компаниях.

Ключевые навыки, полученные в ходе работы:

Создание и управление дизайн-токенами
Разработка переиспользуемых компонентов
Адаптивный дизайн для разных устройств
Создание сложных интерактивных прототипов
Организация больших дизайн-проектов

Следующие шаги:

Изучение продвинутых возможностей Figma
Освоение принципов UX-исследований
Изучение анимации и микроинтеракций
Практика создания дизайн-систем для реальных проектов
Изучение интеграции с инструментами разработки