Как сделать слайдер в фигме
Что такое Figma Overlays и как его использовать при создании интерфейса
Современные интерфейсы — это не просто статические экраны. Рассказываем, какие эффекты можно создать с помощью Figma Overlays.
Что такое оверлей
Overlay (дословно «перекрытие») — один из вариантов действий, которые можно назначить любому элементу.
Существует 3 варианта анимации для элементов на сайте:
Оверлей подходит для прототипирования бургер-меню, всплывающих модальных окон, системных сообщений, а также для всплывающих подсказок и экранной клавиатуры.
Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикует переводы на Хабре.
Как использовать параметр Overlay
Разберем на примере одного проекта, как использовать параметр Overlay и какие преимущества он дает.
Чтобы активировать оверлей, нужно перейти в режим прототипа.
Выберите элемент, по нажатию на который должен срабатывать оверлей. В нашем примере клик по элементу будет вызывать бургер-меню.
Чтобы создать связку бургер-меню с оверлеем, перетащите круглый маркер, который появился при выделении бургер-меню, на фрейм оверлея (я назвал его OverlaysMenu).
Выберите тип триггера — событие, которое будет запускать действие. Я выбрал On Tap — то есть при нажатии.
Как сделать прототип в Figma: интерактивные компоненты
Создаём рабочий чекбокс, радиокнопку и всплывающее меню с умной анимацией.
Каждый элемент интерфейса по-своему даёт пользователю обратную связь: меняет цвет, форму, текст, добавляет или убирает что-либо на экране. Делать прототип без компонентов очень сложно, так как вам придётся создавать очень много копий одного и того же экрана.
С помощью функции интерактивных компонентов в Figma вы можете один раз сделать анимацию элемента и затем использовать его во всех своих макетах.
Рассказываем, как анимировать ваши компоненты для прототипа.
Это руководство по продвинутой работе с прототипами и вариантами в Figma. Если вы впервые о них слышите, советуем сначала прочитать предыдущие статьи об этих инструментах:
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Базовые интерактивные элементы
Заранее настройте чекбокс, радиокнопку, обычную кнопку и переключатель. Благодаря этому у вас появится «библиотека», из которой вы сможете взять что угодно в любое время.
Каждый интерактивный компонент можно в любой момент изменить в комбайне, и они будут одинаково работать на всех экранах вашего прототипа:
Всплывающее меню с умной анимацией
Внутри одного интерактивного компонента может быть сразу несколько. Это позволяет делать сложные элементы интерфейса и быстро их менять, если вам в них что-то не нравится. Для примера сделайте всплывающее меню, в котором все пункты меняют цвет по наведению курсора.
Добавьте своё меню на прототип и проверьте результат. Даже если разместить его на нескольких фреймах прототипа, работать оно везде будет одинаково:
Также из вашего меню можно сделать ссылку на внешний фрейм прототипа. Для этого свяжите любой из пунктов меню прямо из комбайна с внешним фреймом:
Анимация в фигме: как сделать анимацию слайдера со Smart animate
Анимация в фигме на практике с функцией «Smart animate». В этом уроке вы научитесь анимировать слайдер с отзывами и узнаете как сделать анимацию кнопки при наведении.
Пример анимации слайдера в Figma
Выше пример слайдера, который вы сможете сделать в этом уроке. Покликайте на кнопки внизу и посмотрете как он работает.
Файл для практики создания анимации в фигме
Специально для этого урока я подготовил файл для практики, который вы можете дублировать по этой ссылке. Сверху нажмите на кнопку «Duplicate», чтобы создать копию.
Как сделать анимацию кнопок в фигме при наведении
Чтобы сделать анимацию кнопок при наведении в фигме (Figma), нужно их дублировать.
Затем выделите их и создайте из них компоненты с помощью надписи «Create multiple components».
Объедините компоненты в варианты.
Копируйте кнопки с зажатой клавишей «Alt».
Измените прозрачность или цвет у копий. Задайте любое изменение, которое хотите видеть при наведении.
Перейдите в раздел «Prototype» и создайте связь между первой кнопкой и кнопкой при наведении. Поставьте следующие параметры анимации: «Mouse enter» и значение Animate «Instant».
Аналогичную операцию проделайте с прозрачной кнопкой. Поставьте значение «Mouse leave» и анимацию «Instant»
Ту же операцию сделайте с кнопкой, которая показывает вправо.
Копируйте 2 кнопки в нормальном состоянии во фрейм.
Анимация слайдера в фигме с функцией «Smart animate»
Чтобы создать анимацию в слайдере с помощью фунции «Smart animate» необходимо сделать 3 копии отзывов, как на примере выше и вставить туда фотографии (как это сделать смотрите в видео уроке).
Теперь создадим связи между фреймами, чтобы анимация работала. Для этого выберите стрелку направо, перейдите в раздел «Prototype» и свяжите стрелку с фреймом №2. В параметрах анимации поставьте следующие зданчения:
Создаем связь в прототипе между стрелкой во втором фреме с третим фремом, как показано выше.
Стрелка вправо в третьем фрейме будет связана с первым фреймом.
Левая стрелка в третьем фреме связывается со вторым фреймом.
Во втором фрейме левую стрелку необходимо связать с первым фреймом.
Левую стрелку в первом фрейме, свяжите с третьим.
Если посмотреть анимацию, то сейчас отзывы не перемещаются. Для того, чтобы они перемещались, необходимо определенным образом назвать слои.
Сделаю отзывы по бокам прозрачностью 20%. Затем выберу в трех фреймах отзывы с одинаковыми фотографиями.
Чтобы массово их переименовать нажму на комбинацию 2 клавиш «Ctrl» + «R». Назовем эти слои «otziv1». Таким образом при анимации figma поймет, что это одни элементы и будет их перемещать.
Переименовываем отзывы с женщиной. Выделяем их, как показано выше на скриншоте.
Переименовываем слои на «otziv2».
Ту же операцию проделываем с отзывами с мужчиной. Выделяем их с зажатой клавишей «Shift» и кликаем правой клавишей мыши.
Переименовываем слои на «otziv3». Включаем режим презентации и проверяем нашу анимацию.
Если вам, что-то было непонятно из статьи, то лучше посмотрите видео выше и все станет на свои места.
Заключение
Итак, вы этом видео вы узнали как сделать анимацию в фигме.
Дизайн сайта в Figma за 10 минут. Практический урок.
В этом уроке вы узнаете как сделать дизайн сайта в Figma за 10 минут и познакомитесь с сайтом, где можно брать классные 3D фигуры. На практике сделаем первый экран сайта используя эти 3D фигуры.
В результате этого урока вы сможете сделать такой дизайн первого экрана Landing Page (пример выше).
Где найти 3D элементы для дизайна сайта в Figma
Вы можете найти 3D элементы на сайте shapefest.com. Здесь представлено множество фигур, которые вы сможете использовать в своих проектах.
Для примера выберу комплект материалов под названием «Clay Shapes».
Чтобы скачать элементы нажмите на кнопку под заголовком, как показано на скриншоте выше.
Затем нажмите кнопку «Continue»
Внесите ваш email и нажмите на кнопку Download for FREE.
На почту придет письмо, где нужно нажать зеленую кнопку «View your order».
Вас перенаправит на страницу скачивания материалов. Вес немного большой (1.2 ГБ). Чтобы скачать нажмите на «Download».
Распакуйте скачанный архив. После этого у вас появиться множество папок с материалами.
Скачивание шаблонов для Figma
Второй шаг, который вам нужно сделать — это скачать комплект материалов для Figma SIRIUS. Скачать можно здесь.
После скачивания комплекта у вас появиться файл под названием «Комплект SIRIUS 1.1». Вы можете загрузить его в Figma перейдя во вкладку «Drafts» и перетащив к другим файлам.
После загрузки файл будет выглядеть вот так.
В комплекте представлены заготовки, которые помогут ускорить ваш дизайн процесс. Здесь есть меню, элементы для первого экрана, иконки, видео и т.д.
Делаем дизайн Landing Page в Figma
Теперь перейдём к процессу создания дизайна с помощью этих заготовок.
Чтобы не создавать хаос, я создаю новую страницу под названием «Shapes».
Захожу в папку с 3D фигурами, которую ранее скачал. Открываю папку «Clay 01 Red».
Далее открываю папку «Angle_A1»
Выбираю один элемент и нажимаю комбинацию клавиш «Ctrl» «A», чтобы выделить все элементы в папке.
После выделения перетаскиваю все 3D элементы в фигму.
В итоге у вас будут на виду все фигуры, что удобно в работе.
Перехожу к шаблонам и копирую 2 элемента: шапку и раздел с заголовком, текстом и кнопкой внизу. Чтобы скопировать элементы нажимаю «Ctrl» «С».
Возвращаюсь на страницу с фигурами и вставляю скопированные элементы нажав на «Ctrl» «V»
Выделяю шапку и нажимаю комбинацию клавиш «Ctrl» «Shift» «G», чтобы разгруппировать фрейм и оставить только элементы находящиеся в нём.
Увеличиваю фрейм с текстом, нажав на клавишу «Ctrl и потянув за вернхнюю часть.
Меняем цвет элементов в Figma
Вставляю элементы шапки во фрейм с текстом. Получается заготовка для первого экрана лендинга.
Выделяю фрейм, справа внизу надписи Fill меняю белый (#FFFFFF) цвет на темно синий (#211132).
Затем снова выбираю фрейм и внизу надписи «Selection colors» меняю «Серый 1» на «Белый».
Таким образом изменится цвет текста и заголовков.
Выбираю подзаголовок и меняю цвет аналогичным образом на белый.
Вставляем 3D фигуры в дизайн макет
Выбираю какую-то фигуру, которую хочу использовать в своём проекте.
Затем вставляю её во фрейм. Фигура получается обрезанной.
Увеличиваю фрейм нашего макета, чтобы фигуру было видно.
Далее выбираю фрейм и меняю «Синий» на «Желтый».
Где написано «Цвет на кнопках» нужно выбрать «Тёмный».
Добавляем новый раздел в дизайн макет Landing Page
Копирую элементы с цифрами, чтобы добавить в наш дизайн макет.
Вставляю цифры во фрейм.
Копирую 3 любых элемента.
Ставлю высоту этих фигур 140 px.
Затем помещаю эти фигуры вниз нашего фрейма.
Перетаскиваю элементы под цифры. Все перестроится автоматически, благодаря функции Auto Layout.
Удаляем цифры в этих прямоугольниках.
Выделяю элементы как показано на скриншоте выше с зажатой клавишей Shift.
Увеличиваю вертикальный отступ под надписью «Auto Layout» на 20.
Результат, который получился у нас в итоге.
Заключение
Итак, вы этом видео вы узнали как использовать 3D фигуры и делать дизайн сайта в Figma.
Веб-дизайн в Figma: делаем дизайн 2 экранов сайта (Landing Page)
В этом видео уроке поговорим про веб-дизайн в Figma. Вы узнаете как быстро сделать дизайн первых экранов сайтов (так называемых Landing Page).
Также освоите простой приём «Склейка фото», который поможет делать классный фон для сайта в программе Фигма.
Это вам подойдёт, если вы хотите прокачать свои навыки в веб-дизайне. Смотрите видео ниже и примеры того, чему сможете научиться уже через 20 минут.
В видео уроке я упомению о ссылках на плагины и фотографии. Вот PDF файл со всеми ссылками из урока.
5 примеров дизайна сайтов в Figma. Вы этому научитесь за 20 минут.
Смотрите 5 примеров работ ниже. Вы научитесь делать дизайн таких первых экранов сайтов (Landing Page). Причем легко и просто.
Как сделать крутой фон в фигме. Пошаговый алгоритм.
Чтобы сделать крутой фон в фигме, следует сначала подобрать качественное изображение. Для этого рекомендую использовать сайты freepik.com или unsplash.com с бесплатными фотографиями. Также для этого можно установить плагины в Figma. Плагины с фотографиями в figma — freepik, unsplash.
Шаг №1. Подбор фотографии для фона сайта.
Для того, чтобы приём «Склейка фото» для создания фона в фигме сработал необходимо подобрать изображение с однородным фоном по бокам. Выше пример. Как видите слева и справа фон без каких либо объектов.
Шаг №2. Размещение фотографии в вашем дизайн макете.
Затем поместите фотографию в ваш макет. Нужно выстроить композицию. Люди будут являться доминантой в этой композиции. Доминанта — это главный элемент в композиции, который доминирует над остальными. Для примера я буду использовать заготовки с текстом, кнопкой и шапкой сайта (где размещен логотип, название, email, адрес и телефон). Скачать мои заготовки можно скачать по ссылке бесплатно.
Шаг №3. Убираем белые полосы по бокам.
После размещения фотографии в заготовку остаются белые полосы по краям. Это нормально.
Чтобы их убрать продублируйте изображение и состыкуйте с левым краем, как показано на примере выше. Затем отразите фотографию по горизонтали нажав на горячие клавиши «Shift + H».
Активируйте инструмент «Crop image». Для этого нажмите на иконку сверху по центру и обрежьте изображение, чтобы удалить элементы, предметы или людей на фото. Получится длинная полоска с однородным фоном.
Затем скопируйте её снова и поместите слева. Вновь отразите её по горизонтали.
Выберите 2 полоски слева с однородным фоном. Затем зажмите Alt и потяните в сторону с зажатой левой клавишей мыши, чтобы их скопировать. Состыкуйте с левой границей.
Если нажмёте 2 клавиши «Ctrl + D», то эти изображения будут продублированы на нужном расстоянии. Таким образом нужно добиться чтобы слева был однородный фон. Желательно, чтобы было не заметно отзеркаливание фотографий.
Если есть пустое пространство справа, то можно проделать аналогичную операцию, либо увеличить фотографию. Вот, что у меня получилось. Теперь доработаем эту фотографию, чтобы она смотрелась лучше.
Шаг №4. Доработка фона фотографии
Создам прямоугольник и задам ему линейный градиент. Цвет градиента взят из фотографии. Для этого нажал на пипитку и скопировал значение цвета. Получился плавный переход в прозрачность у одного цвета.
Помещаю созданный прямоугольник с градиентом во фрейм. Затем размещаю его внизу текста, но поверх фотографий.
Изменяю цвет логотипа сверху и кнопки на желтый.
Шаг №5. Склейка нескольких фото в фигме в одну.
Теперь поговорим, как объединить несколько фотографий в одну. Для этого скопирую получившуюся работу (Ctrl + C) и вставлю (Ctrl + V). Удалю из фрейма всё кроме фотографий.
Затем нажму на правую клавишу мыши и выберу пункт «Copy/Paste», потом надпись «Copy as PNG».
Нажму Ctrl + V чтобы вставить. Изначально изображение копируется больше по размеру, чем оригинал.
Чтобы скопировать изображение один к одному, выберите фрейм и нажмите напротив надписи Export справа на иконку «+». Там будет стоять значение 1X.
Если снова скопируете элементы во фрейме с фунцией «Copy as PNG», как описано выше, то вставите изображение 1 к 1.
Шаг №6. Как сделать цветокоррекцию фотографий в Figma.
Чтобы сделать цветокоррекцию получившейся фотографии в Figma, выберите её и нажмите справа на «Image».
Затем для этой фотографии я подвину ползунки следующим образом. Увеличиваю значение «Contrast» и «Saturation».
Сравните исходную фотографию и после цветокоррекции. Цвет стал более насыщенным. Если у вас другое фото, то меняйте значения у этих ползунков по другому, поскольку это подойдет не для всех.
По итогам этого урока получаем готовый фон для дизайна сайта (Landing Page).
Заключение
Итак, вы этом видео вы узнали как делать веб-дизайн в Figma. Разобрали приёмы для создания первых экранов Landing page.
Аналогичную операцию я проделал с фотографиями выше. Вот что получилось с помощью этого алгоритма. Если хотите прокачать веб-дизайн в Figma, то смотрите другие уроки по этой теме.