Практическое создание продвинутого дизайна в Figma: шаг за шагом

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

"Во-первых у нас тут есть фон главного... градиент от чёрного к тёмно тёмно-синему." 0:25
"Там повторение той же самой фотографии... только заблюренное и обрезанная." 0:43

Артур показывает, как растянуть фотографию, чтобы она выходила за края фрейма, чтобы избежать чёрных краёв, используя шорткат с фиксированными пропорциями (Option + Shift).

Ключевые моменты:

• Фон — градиент + заблюренная фотография.
• Фотография растягивается с сохранением пропорций, чтобы скрыть чёрные края.
• Использование эффектов blur и затемнения для создания глубины.

---

Далее Артур объясняет, зачем усложнять дизайн с помощью градиентов и прозрачностей — чтобы дизайн выглядел более насыщенным и детализированным, что воспринимается глазом как более проработанный.

"Чем более детализированный насыщенный дизайн, тем больше человеческому глазу кажется, что тут много работы проведено." 3:49

Он рисует подложку с градиентом и бледной обводкой, используя три точки белого цвета с разной прозрачностью. Затем добавляет фотографию с радиусом скругления и иконку, превращая её в авто layout с отступами и скруглением 100% для создания круглой кнопки.

Ключевые моменты:

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

---

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

"Градиент по диагонали... точку самую светлую по диагонали и вот эту точку в самом тёмном внизу." 7:30
"Нам надо чтобы она лежала в контейнере во фрейме, меняем группу на фрейм." 7:54

Ключевые моменты:

• Создание диагонального градиента с точками цвета.
• Превращение группы в фрейм для правильного управления размерами.
• Центрирование и компенсация веса иконки с помощью смещения на 1 пиксель.

---

Далее Артур копирует стили текста и изображений с помощью сочетаний клавиш Command + Option + C/V, чтобы быстро применять одинаковые стили. Он напоминает, что для вставки текста без стиля нужно использовать Command + Shift + V.

"Копируете текст, если вставляете просто Ctrl V, он копируется вместе со стилем... если надо вставить просто так, Command Shift V." 10:27

Он выравнивает текст по левому краю и настраивает отступы, чтобы элементы выглядели аккуратно.

Ключевые моменты:

• Быстрое копирование и вставка стилей текста и изображений.
• Вставка текста с сохранением или без стиля.
• Внимание к отступам и выравниванию.

---

Артур рисует переключатель — прямоугольник с двумя скруглёнными кнопками внутри, которые он объединяет в авто layout с отступами. Для кнопок он настраивает градиенты, копируя цвета с оригинала.

"Два маленьких прямоугольника скругленными углами и вокруг них авто layout." 11:53
"Забираю градиент с оригинала и вставляю в свой." 12:55

Он объединяет кнопки в авто layout с отступами по 4 пикселя и выравнивает их по центру. Также настраивает подложку с прозрачностью 20% белого и blur 44.

Ключевые моменты:

• Использование авто layout для группировки кнопок.
• Копирование и настройка градиентов.
• Настройка прозрачности и blur для подложек.

---

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

"Можно сразу настроить две иконки одновременно, это ускоряет работу." 19:12

Он обращает внимание на мелкие детали, например, толщину иконок, и корректирует их.

Ключевые моменты:

• Массовая настройка одинаковых элементов.
• Внимание к деталям толщины иконок.
• Использование прозрачности и blur для стилизации.

---

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

"Если текст слишком длинный, можно сделать обрезку с многоточием." 20:19

Он также настраивает высоту строк и отступы, чтобы избежать наложения элементов.

Ключевые моменты:

• Обрезка длинного текста с многоточием.
• Выравнивание текста по центру и по верхнему краю.
• Настройка высоты строк и отступов.

---

Артур собирает все элементы в авто layout, настраивая отступы и поведение растяжения. Он объясняет, что разные блоки могут иметь разные отступы, и показывает, как сделать так, чтобы текст не залезал на иконки.

"Главное, чтобы текст не залазил на иконки и стоял всё время как бы здесь." 23:39
"Меняем констрейнт слева направо, чтобы блоки растягивались." 24:49

Он демонстрирует, как отключать выделение фона, чтобы не мешал при перемещении элементов.

Ключевые моменты:

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

---

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

"Вот по сути наш резиновый дизайн готов." 31:30
"Если текст длинный, он сожмётся, и это нормально." 30:58

Он подчеркивает, что задача — собрать такой же экран, повторяя за ним, чтобы понять работу гибких контейнеров.

Ключевые моменты:

• Проверка адаптивности элементов при изменении ширины.
• Привязка кнопки к низу фрейма с помощью констрейнтов.
• Важность самостоятельного разбора и экспериментов для понимания.

---

Итог

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