Учебник Figma с нуля для начинающих

Программа курса

1. 1 Интерфейс и основы

   1. Что такое Figma и зачем она нужна

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

   2. Знакомство с интерфейсом UI3

      Разбор интерфейса Figma UI3: левая панель слоёв, правая панель свойств, нижний тулбар, меню действий.

   3. Навигация по холсту: зум и панорама

      Как быстро двигаться по бесконечному холсту Figma: зум колесом, панорама пробелом, подгонка под экран, zoom to selection.

2. 2 Фигуры, фреймы и слои

   1. Фигуры: прямоугольники, круги, линии

      Создание базовых фигур в Figma: прямоугольник, эллипс, линия, многоугольник, скругление углов и заливка.

   2. Фреймы против групп

      Разница между фреймами и группами в Figma: почему фрейм — главный контейнер, как создавать экраны из пресетов.

   3. Слои: порядок, вложенность, видимость

      Управление слоями в Figma: дерево слоёв, порядок наложения, вложенность, переименование, блокировка и скрытие.

   4. Выравнивание и распределение

      Выравнивание объектов в Figma: панель align, распределение, умные подсказки smart guides, точные отступы.

3. 3 Текст, цвет и стили

   1. Текстовые слои и типографика

      Добавление и настройка текста в Figma: шрифт, размер, межстрочный интервал, выравнивание, типы изменения размера текста.

   2. Цвет, заливки и градиенты

      Цвет в Figma: палитра, HEX и непрозрачность, несколько заливок, линейные и радиальные градиенты, пипетка.

   3. Стили: цвета, текст, эффекты

      Переиспользуемые стили в Figma: создание цветовых, текстовых стилей и стилей эффектов, применение и редактирование.

4. 4 Авто-лейаут

   1. Что такое авто-лейаут и зачем он нужен

      Введение в авто-лейаут Figma: автоматическая вёрстка, направление потока, отступы и зазоры, как включить.

   2. Направление, отступы и выравнивание

      Настройка авто-лейаута Figma: горизонтальное и вертикальное направление, padding по сторонам, выравнивание содержимого 3x3.

   3. Resizing: Fixed, Hug, Fill

      Управление размерами в авто-лейауте Figma: Fixed, Hug contents, Fill container, min и max width, абсолютное позиционирование.

   4. Wrap и вложенные авто-лейауты

      Авто-лейаут wrap в Figma и вложенные авто-лейауты: перенос элементов на новую строку, сборка сложных карточек.

5. 5 Компоненты и варианты

   1. Компоненты: мастер и инстансы

      Основы компонентов Figma: создание мастер-компонента, инстансы, наследование, переопределения (overrides), отвязка.

   2. Варианты компонента

      Варианты компонента в Figma: объединение состояний в один компонент, свойства вариантов, матрица состояний кнопки.

   3. Свойства компонентов: boolean, text, instance swap

      Свойства компонентов Figma: boolean для видимости, text для подписей, instance swap для замены иконок, управление с панели.

   4. Переменные и токены

      Переменные Figma 2024: типы (color, number, string, boolean), коллекции и режимы (modes), темизация, primitive и semantic токены.

6. 6 Прототипы и дизайн-системы

   1. Прототипы: связи и переходы

      Создание прототипа в Figma: вкладка Prototype, связи между фреймами, триггеры (on click), переходы, режим Play.

   2. Smart Animate и интерактивные компоненты

      Smart Animate в Figma: плавные анимации между фреймами по совпадающим слоям, интерактивные компоненты с состояниями hover.

   3. Переменные и условия в прототипах

      Продвинутое прототипирование Figma: переменные в прототипах, conditional if/else, счётчики и формы без кода.

   4. Дизайн-система и библиотеки

      Дизайн-система в Figma: организация компонентов и токенов, публикация библиотеки, командная работа, обновление инстансов.

   5. Dev Mode: передача в разработку

      Dev Mode в Figma: инспекция CSS, размеры и отступы, аннотации, готовность секций к разработке, Code Connect.