В этой статье собраны видео уроки по работе в графическом редакторе Figma с нуля, одном из самых мощных инструментов дизайна. Я и сама продолжаю изучать эту программу, а такие уроки действительно помогают разобраться в сложных моментах и развить навыки.
Вы узнаете все основные аспекты работы в Figma — от типографики и стилей до векторных объектов. По этим урокам можно создать свой первый экран сайта, применить анимацию, освоить работу с дизайн-системами, а также плагинами, которые значительно расширят возможности программы и сделают вашу работу более эффективной.
Обучение и совершенствование навыков — это непрерывный процесс. Погружайтесь в уроки, экспериментируйте и применяйте полученные знания на практике. Возвращайтесь к этой подборке уроков снова и снова, чтобы углубить свои знания и открыть новые горизонты в дизайне с помощью Figma.
Курс 1: Figma для новичков, ютуб-канал VideoSmile (8 уроков)
| N | Название | Минуты | Теги/темы/тезисы | Год |
|---|---|---|---|---|
| 1. | Знакомство с программой | 56 | 00:00 Вступление 00:08 Об авторе курса и возможностях 03:30 -Вход в Figma 07:15 Интерфейс 14:00 Интерфейс файла 16:20 Панель инструментов 24:35 Названия файлов и доступы 27:40 Режимы 28:20 Основы Frame Tool 31:00 Ресурсы помощи 32:10 Главное меню 48:30 Меню Preferences 50:00 Начало практики | 2021 |
| 2. | Фреймы и группы | 22 | 00:00 Фреймы и группы в Figma 00:40 Группы 03:00 Отличия группы и фрейма 15:00 Создание карточки для сайта | 2021 |
| 3. | Слои и ограничения | 31 | 00:00 Слои и ограничения в Figma 00:25 Слои 04:15 Оптимизация слоев внутри фрейма 06:20 Горячие клавиши для работы со слоями 08:05 Ограничения 16:05 Практическое упражнение (карточка профиля) | 2021 |
| 4. | Маски в Figma | 10 | 00:00 Маски в Figma 00:20 Создание Маски 02:05 Иерархия Масок 03:40 Плагин Unsplash 04:50 Картинка в качестве Маски к тексту 06:00 Градиентная Маска 07:07 Скрытие фреймов Маской 09:00 Практика по Маскам | 2021 |
| 5. | Типографика в Figma | 49 | 00:00 Типографика в Figma 00:40 Настройки шрифтов 03:35 Продвинутые опции текста (плагин Lorem ipsum) 07:10 Параметры контейнера с текстом 09:40 Выравнивание текста 10:35 Type details 20:00 Практическая часть по типографике 29:00 Создаем экран сайта 38:20 Как искать и подбирать шрифты 43:40 Советы по типографике | 2021 |
| 6. | Стили и эффекты слоев | 42 | 00:00 Стили и эффекты слоев в Figma 00:10 Повтор изученного материала 00:30 Стили 07:20 Типы заливки в стилях 18:45 Множественная заливка 21:15 Лайфхак (копирование слоя заливки) 22:00 Режимы наложения 28:00 Стили для типографики 31:40 Эффекты (тени, размытие) | 2021 |
| 7. | Векторные объекты | 44 | 00:00 Работа с векторными объектами в Figma 00:20 Разница вектора и растра 01:45 Простые векторные формы 05:20 Pen Tool (Перо) 08:50 Fill (Заливка) 09:40 Скругление углов 12:20 Булевы операции в Figma 17:25 Параметр Stroke (Обводка) 25:25 Импорт векторных объектов 28:00 Создание иконок (практическая часть) | 2021 |
| 8. | Первый экран сайта | 45 | 00:00 Первый экран сайта 01:00 Подбор фрейма 02:35 Заголовок + текст описания 03:35 Разделение экрана и подбор цвета 10:00 Создание стилей 11:00 Добавление логотипа и строки меню 17:00 Подбор шрифтов 19:35 Добавление деталей 22:20 Добавление декоративных элементов 24:25 Добавление иллюстрации 30:00 Создаем паттерн 32:25 Добавление визуальной сложности 34:20 Редактирование готовых элементов 39:00 Финальное редактирование экрана | 2021 |
Курс 2: Уроки по Figma (Фигма), ютуб-канал Алексей Поляков (17 уроков)
| N | Название | Минуты | Теги/темы/тезисы | Год |
|---|---|---|---|---|
| 1. | Сетка в Figma | 10 | Модульные сетки, десктоп, планшет, мобильный телефон, блоки, стили | 2020 |
| 2. | Обложка проекта в Figma | 1 | Обложка, элементы, установка, правая кнопка Set as Thumbnail | 2020 |
| 3. | Анимация в Figma | 10 | 00:00 Вступление 00:12 Дизайн чекбокса 02:29 Анимация чекбокса 04:02 Дизайн табов 05:12 Анимация табов 06:25 Дизайн кнопки 08:19 Анимация кнопки 09:45 Завершение | 2020 |
| 4. | Дизайн система в Figma (часть 1: цвета и типографика) | 9 | 00:00 Вступление 00:30 Создание цветов 02:55 Занесение цветов в дизайн-систему 05:00 Доработка дизайна раздела цветов 06:22 Создание шрифтов 07:30 Занесение шрифтов в дизайн-систему 09:12 Итоги | 2020 |
| 5. | Дизайн система в Figma (часть 2: сетка, тени и иконки) | 10 | Сетки, тени, иконки | 2020 |
| 6. | Дизайн система в Figma (часть 3: UI-kit, подготовка) | 18 | 00:00 Вступление
01:13 Определяем блоки интернет-магазина
02:06 Создаем черновой прототип
08:06 Создаем дизайн-компоненты меню сайта
17:30 Преимущества компонентов UI-кита
18:20 Завершение | 2020 |
| 7. | Дизайн система в Figma (часть 4: создание UI-кита для интернет-магазина) | 16 | 00:00 Вступление 00:30 Дизайн кнопок 01:35 Кнопки навигации баннера 02:42 Блок «Преимущества» 05:20 Карточки товара 12:00 Доработка состояний компонентов 13:24 Дизан инпутов 14:43 Итог проделанной работы 15:47 Завершение | 2020 |
| 8. | Figma Variants (Фигма Варианты) | 6 | 00:00 Вступление 00:14 Функционал Figma Variants 01:25 Подготовка вариантов кнопок 03:55 Создание вариантов и настройка свойств 05:05 Настройка Boolean Values (Булин Тип) 05:25 Перемещение свойств 05:38 Тестирование Figma Variants 06:22 Итоги | 2020 |
| 9. | Дизайн система в Figma (часть 5: Создание интернет-магазина) | 20 | 00:00 Вступление 00:14 Обзор проделанной ранее работы 01:15 Создание меню 02:14 Создание главного баннера 08:25 Блок преимуществ 08:47 Блок категорий 13:14 Блок популярных товаров 14:56 Баннер 2 15:53 Блок новинок 16:47 Футер 19:55 Подведение итогов | 2020 |
| 10. | Работа с мастер-компонентом в Figma | 7 | 00:00 Вступление 00:11 Что такое мастер-компонент 00:43 Мастер-компонент на практике 04:36 Закрепляем навык 06:07 Комбинируем компоненты в Figma Variants 06:50 Итоги 07:06 Завершение | 2020 |
| 11. | Auto Layout в Figma на реальных примерах | 12 | 00:00 Вступление 00:11 Что такое Auto Layout 00:38 Идея Auto Layout 01:39 Основные настройки Auto Layout 03:47 Основные настройки Resizing 05:16 Практика: Дерево из чекбоксов 07:48 Практика: Карточка с графиком 12:07 Подведение итогов 12:29 Завершение | 2021 |
| 12. | Констрейнтсы в Figma (Figma Constraints) на реальных примерах | 9 | 00:00 Вступление 00:12 Что такое констрейнтсы в Figma 00:37 Основные настройки Figma Constraints 03:07 Примеры использования #1 06:32 Примеры использования #2 09:00 Итоги 09:22 Завершение | 2021 |
| 13. | Работа с иконками в Figma: секреты и нюансы | 17 | 00:00 Вступление 00:20 Виды иконок 02:36 Настройки для иконок 04:26 Установка пака иконок 04:55 Создание своих иконок 05:10 Иконка кубка 09:47 Иконка звездочка 11:54 Иконки Filled 14:28 Практика: создание карточки с иконками 16:56 Завершение | 2021 |
| 14. | Как сделать дизайн сайта в Figma. Дизайн сайта в Фигме | 20 | 00:00 Вступление 00:40 Смотрим мою работу на Behance 01:17 Начало работы: фон и свечение 03:58 Дизайн логотипа 06:25 Блок с девушкой 06:55 Меню сайта 08:04 Панель с навигацией 09:01 Работа с текстами 12:45 Интересное 13:07 Поиск и элементы навигации 15:42 Логотипы соцсетей 16:15 Фоновый текст 17:05 Кнопка Play 17:58 Дизайн наушников 20:08 Подведение итогов 20:48 Завершение | 2021 |
| 15. | Цвета и шрифты в Figma | Создание палитры и типографики | 18 | Как создать палитру, стили шрифтов и задать нейминг - разбор на примерах | 2021 |
| 16. | ТОП-10 плагинов Фигмы в 2022 году | Лучшие плагины для веб-дизайнера | 20 | 00:00 Вступление 01:15 Better Font Picker (текст) 02:46 Fish text (текст) 04:59 Spellchecker (ошибки в тексте) 06:33 Batch Styler (стили) 08:53 Image Pallet (цвета) ? 10:43 Color Compass (цвета и оттенки) 12:29 Automate Color Styles (стили цвета) 14:23 Content Reel (библиотека иконок, картинок и др.) 15:42 Unsplash (картинки) 17:22 Isometric (поворот объекта) 18:55 Auto Flow (стрелки) 20:08 Завершение | 2022 |
| 17. | Auto Layout в Figma на реальных примерах | Новые автолейауты 2022 года простым языком | 17 | О новых Auto Layout в Figma. Где и как их можно использовать в UI/UX дизайне. Разбор основных функций автолейаута на реальных примерах. | 2022 |
Курс 3: Бесплатный курс по Фигме (Figma), ютуб-канал Toolbar — Уроки Фотошопа (28 уроков)
| N | Название | Минуты | Теги/темы/тезисы | Год |
|---|---|---|---|---|
| 1. | Обзор интерфейса | 9 | Меню, панель слоев, панель опций (динамическая), папки (файловая система), инспектор (3 вкладки: дизайн, прототипы, код), панель вкладок, домашняя страница | 2021 |
| 2. | Инструменты перемещения | 2 | Move (V), Scale (K) | 2021 |
| 3. | Инструмент "Прямоугольник" | 11 | В группе фигур, горячая клавиша R, квадрат (удерживать Shift), квадрат из центра (Alt+Shift), 4 точки по углам (скругление углов), математические операции | 2021 |
| 4. | Инструмент "Эллипс" | 4 | Ellipse, горячая клавиша "O", круг (удерживать Shift), точка внутри эллипса Arc (дуга/арка), точка Ratio (соотношение), точка Start (старт), точка Sweep (развертка), точки трансформации, круговая диаграмма | 2021 |
| 5. | Выравнивание объектов | 8 | Выравнивание объектов относительно друг друга по левому/правому краю, по центру, по горизонтали/вертикали, по верхнему/нижнему краю, 3 опции функции умного выравнивания | 2021 |
| 6. | Работа с объектами | 6 | Направляющие, Shift при перемещении (фиксация оси), Alt для зеркального изменения объекта, способы копирования, удаление, выделение нескольких объектов, возврат на несколько шагов назад (Ctrl+Z), расстояние между объектами (Alt), перемещение стрелками, перемещение на 10px (Shift) | 2022 |
| 7. | Векторное меню | 8 | Режим векторного редактирования (кнопка Edit Object), инструмент "Перо", точки модификации, Paint Backet (ведро с краской) | 2022 |
| 8. | Заливка и градиент | 10 | Fill (заливка), тип заливки, цвета, палитра цветов, непрозрачность, цветовой код, цвета документа, режимы наложения, градиент (плавный переход от одного цвета к другому), контрольные точки | 2022 |
| 9. | Эффекты | 10 | Падающая тень, внутренняя тень, размытие, размытие фона, несколько эффектов для одной фигуры | 2022 |
| 10. | Работа с изображениями | 15 | Несколько способов добавления изображений (одно/несколько/папка), перетаскивание изображений, инструмент Place image, типы встраивания изображений (fill, fit, crop, tile), корректировка изображений (экспозиция, контрастность, насыщенность, температура, оттенок, яркость, тени), замена изображения | 2022 |
| 11. | Работа с текстом | 12 | Горячая клавиша T, контейнер для текста, выпадающий список с семействами шрифтов, начертания, интерлиньяж (размер межстрочного интервала) в % или пикселях, отступы между символами, отступы между абзацами, границы текстового блока, параметры выравнивания, дополнительные настройки текста, цвет текста, обводка, эффекты, текстовый слой | 2022 |
| 12. | Инструмент "Маска" | 8 | Маски из слоя, из фигуры (например, круга или прямоугольника), точки модификации, контейнер для изображения, свойства группы, создание обводки для маски, сложные маски | 2022 |
| 13. | Инструмент "Перо" | 16 | Горячая клавиша P, инструмент для создания и редактирования векторных объектов, опорные точки, синяя линия (сегмент), режим векторного редактирования (векторного меню), прямые линии с горячей клавишей Shift, рисование прямоугольника, выпадающий список с параметрами, рисование волны, рисование стрелки | 2022 |
| 14. | Булевы операции | 7 | Булевы (логические) операции, 4 формулы, объединение (union), вычитание (subtract), пересечение(intersect), исключение (exclude), соединение в один векторный объект нескольких фигур (flatten selection или Ctrl + E), рисование иконки сердечка из квадрата и кругов | 2022 |
| 15. | Режимы наложения | 9 | Pass through (пропускать сквозь), normal (нормальный), darken (замена темным), multiply (умножение), color burn (выжигание/форсирование/затемнение цвета), lighten (осветление), screen (экранирование, противоположен режиму multiply), color dodge (убирание/выгорание цвета), overlay (подходит для улучшения тусклых фотографий), soft light (мягкий свет, поход на overlay, но более мягкий), hard light (жёсткий), difference (вычитание верхнего слоя из нижнего), exclusion (исключение), hue (оттенок), saturation (насыщенность), color (цвет), luminosity (яркость) | 2022 |
| 16. | Работа со слоями | 7 | Панель слоев, пример с карточкой товара, иконки слоев, что можно делать со слоями (перемещать, копировать, удалять, группировать, переименовывать) | 2022 |
| 17. | Группы | 11 | Группы нужны для порядка в панели слоеа, горячие клавиши Ctrl + G, 2 клика по группе для переименования, группы внутри групп, как управлять группами, разгруппировка (Ctrl + Shift + G), свойства группы в инспекторе (панель справа), как изменить цвета фигур в группе, границы группы, пропорциональное увеличение всех элементов группы | 2022 |
| 18. | Фреймы | 17 | Горячая клавиша F, пресеты для автоматического создания фреймов, контейнер высшего уровня, что может быть внутри фрейма (слои, графика, картинки и др.), сравнение фреймов и групп (у фреймов больше настроек и функционала), начало работы над дизайном, создание фрейма произвольного размера, как указать точные размеры сторон фрейма, копирование фрейма (Alt), свойства фрейма на панели справа (ориентация горизонтальная/вертикальная, положение по осям X и Y, высота, ширина, угол наклона, радиус скругления углов, clip content, resize to fit, привязки, заливка фона, обводка, эффекты, модульные/пиксельные сетки), увеличение фрейма (Ctrl) | 2022 |
| 19. | Экспорт и инструмент Slice | 7 | Права доступа к документу, параметры экспорта файла, slice (горячая клавиша S), экспорт слайса, слайс как скриншот, экспорт всего документа (save as .fig) | 2022 |
| 20. | Главное и контекстное меню | 33 | Подпункты меню, как открыть контекстное меню (правая кнопка мыши), выбор слоя, перемещение слоев, подробный разбор пунктов контекстного и бургерного меню с примерами | 2022 |
| 21. | Привязки (Constraints) | 19 | Панель привязок, в переводе constraints - ограничения, привязки работают только в рамках фрейма, на примере круга, настройки привязок, привязки по умолчанию (левый и верхний края фрейма), запоминает расстояния, пунктирные синие линии, привязка групп, чаще всего привязки используются для создания дизайна мобильных приложений, настройка привязок на примере карточки товара, привязка с помощью клавиши Shift, привязки для фрейма внутри основного фрейма, в каких случаях надо использовать привязки | 2022 |
| 22. | Сетки в веб-дизайне | 8 | Порядок в элементах, каркас, сетки работают только внутри фреймов, как создать сетку, Layout Grid, пиксельная сетка, цвет, прозрачность, размер, точность, колоночная сетка, строчная сетка, типы колонок (адаптивная, из центра, по правому краю, по левому краю), модульная сетка (из колонок и строчек), пересечения (модули), границы отображения, выключение, включение всех сеток (Ctrl + G) | 2022 |
| 23. | Компоненты | 16 | Ускоряют работу, компонентом может стать любой элемент в дизайн-макете, мастер-компонент, дочерние элементы, как создать компонент, что можно/нельзя изменить в дочерних элементах, как отменить изменения в дочерних элементах, как найти мастер-компонент, мульти-компоненты (состоят из других компонентов), библиотека компонентов | 2022 |
| 24. | Стили | 17 | Ускоряют работу, какие стили можно создавать (заливка, эффект, текст, сетка), иконка из 4-х точек, стандартные стили по умолчанию, название стиля, сколько стилей можно создать, стили в папках (слэш), стиль может состоять из нескольких заливок, как отредактировать готовый стиль, как добавить описание стиля, как отменить привязку стиля, стили в инспекторе, как стили из старого документа сделать доступными в новом (активы, библиотека) | 2022 |
| 25. | Auto Layout | 17 | Сравнение 3-х типов объединений (фрейм, группа, auto layout), привязка по умолчанию, размеры границ auto layout зависят от размеров элементов внутри, как создать auto layout, настройки auto layout, в каких случаях применять auto layout, контроль отступов между элементами в auto layout, auto layout внутри другого auto layout, динамическое изменение, автоматическая и фиксированная ширина, создание компонента из auto layout | 2022 |
| 26. | Создание сайта с нуля / Часть 1 из 3 | 32 | В 3-х частях урока показ всего процесса создания макета и закрепление изученного в курсе, фрейм 1480*800 px, сетка 1280 px (6 колонок), сайт по поиску работы, название фрейма, название документа, создание простого логотипа, шапка сайта, изображение, фон сайта, слоган (текстовый блок), элементы интерфейса (списки, кнопки, иконки и т.д.), рисование иконок поиска и локации, кнопка поиска, группировка элементов, выравнивание групп, стиль для элементов интерфейса, отступы, секция с логотипами партнеров, увеличение размеров фрейма, создание маски, сайт с векторными логотипами всех марок https://worldvectorlogo.com/ru, заливка векторных фигур поверх основной заливки | 2022 |
| 27. | Создание сайта с нуля / Часть 2 из 3 | 44 | Как создать сайт с использованием инструментов Figma, включая фреймы, прямоугольники и сетки. Возможность игнорировать привязки при изменении размеров элементов, использование горячих клавиш для быстрого доступа к инструментам, создание разделов и фоновых элементов для улучшения внешнего вида сайта, а также правильное расположение и отступы между элементами для достижения эстетического и функционального дизайна. | 2022 |
| 28. | Создание сайта с нуля / Часть 3 из 3 | 21 | В данной части урока рассматривается процесс наполнения сайта контентом, включая добавление блоков с новыми вакансиями, работой по категориям и секцией помощи в поиске работы. Затем создается подвал сайта (footer), где размещается важная информация, быстрые ссылки на категории и связанные социальные сети. Видео также показывает, как увеличить высоту фрейма и создать фон для подвала, а затем редактировать и добавлять текст, включая раздел "Популярные города". | 2022 |
Основные выводы
Уроки по Figma с нуля будут полезны для всех, кто стремится овладеть этим актуальным инструментом для создания дизайна. Подборка охватывает широкий спектр тем: от основных принципов работы с программой до более сложных функций.
Овладение Фигмой не только обогатит портфолио и повысит профессиональные навыки, но и даст возможность реализовывать больше творческих идей.
И главное, используйте эту подборку уроков для практического обучения. Смотрите и повторяйте — это лучший способ освоить навыки работы с Фигмой.
А сегодня на этом всё, желаю вам успехов в обучении, работе и творчестве!
Оставить комментарий