Создайте свою систему проектирования - Урок 3: Введение в системы проектирования

YOUTUBE · 27.11.2025 03:18

Ключевые темы и таймкоды

Введение в систему проектирования в Figma

0:00

Основные функции системы проектирования: стили, компоненты и библиотеки.
Стили позволяют повторно использовать свойства, такие как цвета и шрифты.
Компоненты - это строительные блоки системы, которые можно повторно использовать в проектах.

Библиотеки в Figma

1:35

Библиотеки содержат стили и компоненты, используемые совместно в команде или организации.
Библиотеки обеспечивают согласованность и оптимизируют рабочие процессы.
Можно создавать и публиковать библиотеки для совместного использования.

Настройка библиотек

1:58

Библиотеки могут использовать стили и компоненты из других библиотек.
Важно учитывать, как ресурсы делятся между командами и продуктами.
Команда habits создает единый файл для библиотеки стилей и компонентов.

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

3:25

Кай и команда создают страницы для организации системы.
Используются принципы атомарного проектирования для создания компонентов.
Атомы - это основные строительные блоки, молекулы - группы атомов, организмы - сложные структуры.

Именование и соглашения

5:58

Команда согласовывает подход к именованию элементов.
Используется camel case для имен слоев, компонентов и реквизитов.
Важно, чтобы элементы имели одинаковое название в дизайне и коде.

Макетные сетки и автоматическая компоновка

7:22

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

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

9:27

Использование стилей для определения и обновления цветов в системе дизайна.
Команда собирает различные цвета, используемые в их дизайне.
Это помогает избежать бесконечного количества цветов и несоответствий между дизайнами.

Создание цветовых стилей

9:57

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

Функциональные группы и семантическая система маркеров

10:31

Создание базовых функциональных групп для облегчения поиска стилей.
Четыре группы: основные цвета бренда, нейтральные тона, цвета для привычек, цвета для функций.
Использование условного обозначения косой черты в Figma для организации стилей.

Типографика

11:33

Определение типографики для основных элементов и опыта.
Использование Textiles и Figma для определения свойств шрифтов.
Определение двенадцати уникальных комбинаций цвета, размера, веса и высоты строки.

Стили заголовков и основного текста

12:33

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

Иерархия и взаимодействие

13:53

Использование плоского минималистского подхода.
Создание элементов с нео-бруталистским стилем для привлечения внимания.
Определение трех уровней высоты для элементов.

Иконки и иллюстрации

16:20

Использование иконок и иллюстраций для подчеркивания индивидуальности бренда.
Создание иконок среднего размера и превращение их в компоненты.
Согласование структуры именования иконок по размеру и добавление описаний.

Иллюстрации и компоненты

17:36

Использование иллюстраций для укрепления бренда и оригинальности продукта.
Создание двух наборов компонентов для иллюстраций: герои и карточки с презентациями действий.
Добавление атрибутов к именам иллюстраций для учета цвета акцента.

Создание шаблона для расписания

19:16

Создание шаблона для расписания привычек.
Использование компонента-переключателя для выбора дней.
Превращение компонента в компонент и добавление двух состояний: "отменено" и "выбрано".

Отслеживание привычек

20:13

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

Интерактивные карточки

20:58

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

Настройка состояний карточек

22:03

Кай добавляет новые варианты для состояний наведения, фокусировки и нажатия.
Изменяет цвет и стиль для каждого состояния.
Создает новые компоненты для системы.

Фиксированные шаблоны

23:13

Кай создает фиксированный шаблон для еженедельного расписания.
Использует компонент переключения дня и добавляет рамку автоматической компоновки.
Обновляет свойства компонентов для соответствия дням недели.

Навигация и структура

24:41

Кай определяет шаблон для навигации в приложении.
Использует варианты для представления состояний.
Создает фиксированный макет без настраиваемых свойств.

Итоги и планы

25:23

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