Введение в Figma 0:00 Figma — инструмент для разработки приложений и веб-сайтов. Преимущества: бесплатная версия, совместная работа, быстрая работа, поддержка разных платформ, мобильное приложение.
Начало работы с Figma 1:18 Регистрация на сайте Figma.com с помощью аккаунта Google. Рекомендация начать с копирования существующих дизайнов для практики.
Поиск шаблонов 2:55 Использование Google для поиска шаблонов Figma. Пример использования шаблона интерфейса приложения для доставки еды.
Работа с копиями файлов 3:49 Создание копии файла для редактирования. Перемещение и масштабирование экранов в Figma.
Создание рамок и настройка размеров 5:14 Использование инструмента «Рамки» для создания прямоугольников. Настройка размеров рамок с помощью шаблонов, например, iPhone 11 Pro Max.
Настройка цвета и закруглённых углов 6:37 Изменение цвета фона с помощью пипетки. Настройка закруглённых углов с помощью инструмента «Радиус поворота».
Создание круга 10:24 Создание круга через меню «Фигуры» или с помощью клавиши «О». Удержание клавиши Shift для создания идеального круга.
Работа с размерами и позиционированием в Figma 10:40 Определение точных размеров элементов с помощью щелчков мыши. Использование клавиш Option на Mac или Alt на Windows для отображения расстояний до соседних элементов. Центрирование элементов с помощью Figma.
Работа с текстом и иконками 12:15 Изменение цвета элементов. Поиск и использование бесплатных иконок в Figma. Копирование и вставка иконок с помощью сочетаний клавиш.
Вставка изображений 14:28 Поиск и вставка изображений с сайта Unsplash. Простота вставки изображений в Figma через копирование и вставку.
Работа с текстом 15:21 Добавление текста с помощью значка «Т». Настройка размера и шрифта текста. Выравнивание текста по центру и изменение его цвета.
Создание кнопки 19:01 Создание кнопки с размерами 374x56. Центрирование кнопки и настройка её высоты. Изменение радиуса угла кнопки.
Копирование и дублирование элементов 20:06 Копирование элементов с помощью команд C и V. Дублирование элементов с помощью клавиш Option или Alt. Изменение цвета элементов для соответствия кнопке «Отклонить».
Заключение 21:33 Создание дизайна, близкого к оригинальному, путём копирования элементов из шаблонов. Рекомендация искать бесплатные ресурсы для дизайна мобильных и веб-приложений. Подчёркивание важности изучения теории дизайна в будущем.
Начало работы с Figma 22:22 Практикуйтесь и изучайте теорию, чтобы начать применять знания. Копируйте существующие проекты для начала работы. Проектируйте приложения, которые вам нравятся, например, Instagram или TikTok. Исследуйте необычные эффекты и возможности Figma через поиск в интернете.
Улучшение существующих приложений 23:17 Найдите приложение, которое хотите улучшить, например, банковское приложение. Используйте знания Figma для создания нового дизайна. Оставляйте комментарии с вопросами и проблемами. Подпишитесь на бесплатную рассылку по пользовательскому интерфейсу и UX для получения дополнительных советов и новостей.
