Как сделать прокрутку в фигме
Закрепление меню в фигме при скроллинге на сайте.
В этой короткой инструкции вы узнаете про закрепление меню в фигме. Это можно использовать для закрепления любых элементов. Они будут оставаться неподвижными при скроллинге в режиме просмотра. Это поможет оживить ваш дизайн макет и показать как это может выглядеть на сайте заказчику, либо коллегам.
Для практики можете дублировать файл, где есть меню, которое вы можете закрепить.
Закрепление меню в фигме. Пошаговая инструкция.
Чтобы закрепить меню или любой другой элемент в фигме при скроллинге, выделите его и нажмите во фрейме. Затем напротив надписи «Fix position when scrolling» поставьте галочку.
Чтобы посмотреть как это будет выглядеть при скроллинге, нажмите на кнопку «Present» в верхнем правом углу.
Промотайте вниз и убедитесь, что шапка сверху закреплена. Если на сайте есть якорные ссылки, то посетителям будет удобно передвигаться по разделам лендинга.
Пропала функция «Fix position when scrolling» в Figma — что делать?
Если у вас пропала функция «Fix position when scrolling» в Figma, то нужно убедиться, что элемент, который вы выбираете находится во фрейме. Если выбрать элемент вне фрейма, то этой функции не будет.
Заключение
Итак, вы этом видео вы узнали как закрепить меню или любые другие элементы в Figma при скроллинге с помощью функции «Fix position when scrolling». Это можно использовать для элементов, которые должны оставаться неподвижными на сайте при скроллинге.
7 лайфхаков в Figma, которые упростят вам работу
Рассказываем, как быстро выровнять файлы, переименовать пачку фреймов за раз и сделать прогресс-бар в несколько кликов.
Катя Павловская для Skillbox Media
В Figma есть множество скрытых функций и горячих клавиш, которые самостоятельно найти не так просто. Но если их освоить, вы сможете ускорить работу над макетом: быстрее искать фреймы или группы и подбирать цвет с помощью пипетки.
Рассказываем о семи простых лайфхаках, которые помогут вам быстрее работать в Figma.
Свернуть вложенные фреймы и группы
Если вы работаете над большим проектом, в документе становится сложно ориентироваться из-за большого количества фреймов, групп и компонентов, особенно когда они все развёрнуты.
Чтобы моментально свернуть все фреймы, группы и компоненты, нажмите сочетание клавиш Alt (⌥) + L.
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Предпросмотр цвета
Выделите любой фрейм или фигуру, нажмите кнопку I, зажмите правую кнопку мыши и водите курсором по макету. Любой цвет под ним станет фоновым для выделенного элемента. Так вы сможете быстрее выбрать нужный оттенок для кнопки, текста или основного фона макета.
Переименование фреймов
По умолчанию Figma создаёт новые фреймы с названием Frame 1 — оно ничего не говорит о содержимом фрейма, особенно для тех, кто в ваш макет заходит впервые. Переименовать один такой фрейм — легко, но если их 10 или 20, то придётся потратить на это много времени.
Чтобы быстро систематизировать названия одинаковых по смыслу фреймов, выделите их, нажмите сочетание клавиш Сtrl (⌘) + R. Откроется меню, в котором вам будет предложено переименовать выделенные объекты:
Настройки переименования объектов:
Выравнивание с Tidy up
Два одинаковых объекта поставить ровно очень просто. Но если их 10 или 20, это превращается в большую и нудную задачу. Чтобы дизайнер не занимался подобной рутиной, в Figma есть функция Tidy up, с помощью которой можно автоматически расставить все объекты ровно, поменять их местами и изменить отступы.
Как пользоваться Tidy up
Горизонтальный прогресс-бар
Если вы занимаетесь интерфейсом технически сложного приложения, скорее всего, вам понадобится прогресс-бар. В Figma есть множество способов его нарисовать, но самый простой — с помощью текста!
Как создать горизонтальный прогресс-бар из текста
Теперь у вас есть регулируемый прогресс-бар. Чтобы изменить длину полосы загрузки, просто добавляйте в него текст:
Круглый прогресс-бар
Если вместо горизонтального прогресс-бара вам нужен круглый, его сделать так же легко.
Готово — получился круглый прогресс-бар. Чтобы изменить его длину, наведите курсор на фигуру, зажмите правой кнопкой мыши один из концов фигуры и тяните.
Кляксы стандартными инструментами
В Figma есть много плагинов для создания интересных форм, но их можно сделать и самостоятельно с помощью стандартных инструментов. Например — сферы и связки, похожие на кляксы.
Как сделать кляксу
Теперь вы можете двигать фигуры как угодно и они будут похожи на кляксы:
5 способов улучшить процесс прототипирования в Figma
Как дизайнеры, мы создаем прототипы для множества различных целей: запуск пользовательских тестов, представление реалистичных планов заинтересованным сторонам, донесение замыслов и идей до разработчиков, список можно продолжать бесконечно.
Поскольку прототипы очень важны в процессе проектирования, опыт должен позволять делать все быстро и просто. Чтобы упростить и ускорить рабочий процесс создания прототипа, я собрал для вас несколько моих любимых советов и приемов. Читать дальше!
Используйте мастер-компоненты для ускорения соединений прототипа
Допустим, вы проектируете экран с какой-то постоянной навигацией, например панелью вкладок. Вы должны привязать каждый пункт меню к определенному фрейму (например, связать кнопку «домой» с фреймом домашней страницы). Если это меню повторяется на нескольких экранах, как это часто бывает с панелями вкладок, утомительная задача связывания может занять больше времени, чем могла бы.
Решение. В самом начале вашего процесса, превратите ваше меню гамбургера в компонент. Как только вы это сделаете, свяжите каждый пункт меню этого мастер-компонента с соответствующим фреймом. Далее, каждый раз, когда вы создаете экземпляр компонента гамбургера, все соединения будут автоматически распространяться! Больше не надо биться головой о стену, по-поводу этой утомительной работы.
Одно предостережение: это не работает, если вы перетаскиваете экземпляр компонента из командной библиотеки. Поскольку главный компонент находится в другом файле, отличном от вашего, вы не сможете использовать ранее упомянутый совет.
Вместо этого создайте новый мастер-компонент с экземпляром из вашей библиотеки внутри него. Figma позволяет вам выбирать глубоко вложенные слои внутри каждого компонента, так что вы все равно можете связать несколько пунктов меню из экземпляра, не отрывая его от мастера. Я часто размещаю некоторые из этих повторяющихся компонентов в стороне, за пределами моих макетов, в качестве удобного места для доступа к ним и поддержания связанных соединений с различными экранами.
Используйте компоненты для прокрутки контента
При разработке более длинных скролл-экранов с фиксированными элементами, такими как строки состояния, верхние или нижние колонтитулы, вы можете просто перетащить нижнюю часть рамки вниз, чтобы разместить дополнительный контент. Если содержимое превышает высоту области просмотра для выбранного вами устройства, Figma автоматически прокручивает кадр в режиме прототипа. Удобно, правда?
Но бывают случаи, когда вы хотите увидеть то, что видно в окне просмотра по умолчанию (то есть до того, как пользователь прокрутит). Это дает вам представление о том, какой контент изначально отключается, когда пользователи впервые переходят к этому фрейму прототипа. Устройства с различными размерами области просмотра будут сегментировать контент в разных местах. Чтобы облегчить просмотр этих разных визуализаций, используйте компонент.
Чтобы увидеть, какой контент изначально виден в прокручиваемом фрейме:
Теперь вы можете понять, что находится в поле зрения для каждого из устройств разного размера и централизованно управлять всем прокручиваемым контентом с помощью одного компонента.
Используйте временные задержки и наложения для имитации взаимодействия
С прототипами мгновенное взаимодействие может казаться резким для конечного пользователя. Возможно, вы захотите добавить элементы реализма, такие как имитация загрузочных экранов или добавление небольшой задержки.
Одним из легких способов, который вы можете использовать для этого, является запуск после задержки, когда взаимодействие происходит после заданной продолжительности. Задержки по времени особенно полезны в сочетании с оверлеями, как вы можете видеть на примере простой формы ниже.
Пользователи ожидают, что форма переместит их на страницу подтверждения, но если это произойдет слишком резко, они могут чувствовать дезориентацию. Используя наложения, ручное позиционирование и функцию наложения свопов, мы можем создать простое взаимодействие кнопок в тандеме с временными задержками. Затем происходит взаимодействие отправки, краткая последовательность загрузки и сообщение об успешном завершении до появления страницы подтверждения.
Стартовый экран
Прототипы в Figma в настоящее время ограничены отдельными страницами. Это позволяет вам иметь отдельные прототипы в одном документе, каждый со своим уникальным URL-адресом, которыми вы можете поделиться с людьми, когда они захотят их просмотреть. Но иногда вы просто хотите поделиться одной ссылкой с людьми, которая позволяет им увидеть несколько вариантов дизайна.
Для этого в Figma создайте фрейм оглавления в качестве стартового экрана вашего прототипа. Затем свяжите каждый элемент списка в оглавлении с другим пользовательским флоу. Изнутри Figma будет интерпретировать все это как один прототип, но конечные пользователи будут воспринимать их как разные прототипы с выбором между ними в начале. Примечание: все ваши пользовательские флоу должны быть на одной странице, чтобы это работало.
Используйте режим наблюдения
Знаете ли вы о режиме наблюдения в Figma? Это позволяет вам следить за экраном другого человека, пока он что-то показывает. Вы можете щелкнуть аватар вашего сотрудника в верхнем правом углу редактора, чтобы увидеть все, что он видит в файле дизайна.
Режим наблюдения ТАКЖЕ работает с прототипами. Вы можете щелкнуть аватар вашего сотрудника, чтобы узнать, где он находятся в прототипе и что он там делает. Это отлично подходит для удаленных пользовательских тестов, когда вы хотите изучить, как пользователь взаимодействует с вашим дизайном. Это также отличный способ заставить всех следить, когда вы представляете свою работу на собрании.
Совершенствуйтесь и начинайте прототипирование!
Я надеюсь, что некоторые из этих советов помогут вам ускорить процесс создания прототипа. Как всегда, не стесняйтесь делиться своими советами, вопросами и опытом в нашем онлайн-сообществе на Spectrum.
Эффектная параллакс анимация в Figma — пошаговое руководство
Привет друзья! Давно я ничего не писал в блог, пришло время это исправить, держите отличный пошаговый авторский гайд по созданию и настройке параллакс анимации в Figma.
Параллакс анимация в Figma
Используя возможности Figma, можно быстро и просто продемонстрировать заказчику сложную интерактивную анимацию типа параллакс эффекта. Это делается буквально в несколько шагов.
Что будет в этом уроке
Мы сделаем такой красивый, эффектный и простой параллакс эффект:
Что такое параллакс эффект в веб-дизайне
Параллакс эффект — это специальный прием при котором объекты переднего плана движутся быстрее относительно фонового изображения когда страница прокручивается вверх или вниз, за счет чего создается иллюзия объема который часто применяется в веб-дизайне.
Подготовка рабочего пространства в Figma, выбор фрейма
На основной панели инструментов Figma или с помощью клавиши F выберите нужный вам Frame — то рабочее пространство, где вы будете работать над созданием проекта.
Выбор фрейма на основной панели инструментов
Я выбрал для примера фрейм iPhone 11 Pro Max с размерами 414 х 896.
Рабочее пространство в Figma готово
Исходники
Теперь нужно подобрать исходные изображения из которых состоит проект, вырезать нужные части в Photoshop и создать красивую композицию для реализации параллакс-эффекта.
Поиск изображений
Изображения можно добыть разными способами. Например, купить в фотобанке или сфотографировать самому. Мы пойдем простым и быстрым путем — воспользуемся бесплатными из Unsplash и Pexels. Для создания нашей композиции понадобятся фотографии гор, облаков и каких нибудь объектов на передний план — например, вагончика канатной дороги.
Мои фотографии для создания параллакс эффекта
Подготовка композиции в Photoshop
Дальше вырежем нужные фрагменты в фотошопе и создадим из них композицию с размером фрейма, который мы выбрали в Фигме. Это можно сделать с помощью любой техники обтравки: лассо, волшебная палочка, маски, каналы и так далее. Просто вырезаем нужный фрагмент и размещаем его на новом слое Photoshop (Ctrl+J).
Изображение гор из двух фрагментов: горы на фоне и горы, которые ближе к зрителю. В итоге получилось два отдельных слоя
Точно так же с помощью лассо и каналов создается подвесной вагончик.
Отделение вагончика от фонового изображения
Исходник для основной части облаков вырезать не пришлось, потому что нашлась фотография сразу с прозрачным фоном. Когда основные элементы готовы, создаем новый фрейм (артборд) в Photoshop с размерами 414 х 896 и переносим туда все вырезанные фрагменты:
Готовая композиция в Photoshop
Сохраняем отдельно каждый слой в формате PNG и переходим в фигму, у меня получилось 8 PNG файлов:
Получившиеся изображения на прозрачном фоне готовы к экспорту в Figma для дальнейшей работы
Размещение элементов на фрейме в Figma
Теперь все полученные PNG изображения нужно аккуратно разместить на созданном ранее рабочем пространстве в Figma.
Повторяем композицию в Figma
Возьмите за правило давать четкие и простые названия слоям, чтобы при работе с ними было проще ориентироваться в созданной композиции.
Когда композиция готова можно приступать к созданию анимации параллакс-эффекта. Но так как мы делаем анимацию для мобильного устройства, то для большей достоверности можно добавить еще несколько элементов — логотип, бургер меню и какую-нибудь надпись на темном фоне. Например вот так:
Добавление элементов — логотип, бургер меню и надпись
Frame готов, можно приступать к созданию анимации первого экрана.
Создание анимации первого экрана
На самом деле этот шаг можно пропустить, но он дает понимание работы анимации в Figma поэтому я его включил в руководство.
Копируем Frame
Для создания анимации появления первого экрана понадобится копия фрейма — зажмите мышкой левый верхний угол фрейма и потяните его вправо с зажатой клавишей Alt.
Создание копии первого фрейма
Анимация в Figma работает следующим образом: фрейм проекта дублируется и на первом фрейме вносятся изменения, например можно передвинуть логотип и меню наверх. Затем с помощью режима Prototype создается связка со вторым фреймом и настраивается интерактив, то есть то как первый фрейм взаимодействует со вторым. Итог анимации в данном случае будет плавное появление логотипа и меню. Анимация в Figma это переключение между фреймами, здесь нет ключевых кадров как например в After Effects.
Сдвигаем объекты шапки первого фрейма
Убираем логотип и бургер меню вверх, за пределы фрейма:
Сдвигаем логотип и бургер меню на первом фрейме
Тут есть один нюанс: когда выносишь элемент за пределы фрейма то он выносится из фрейма и на панели слоев.
Объекты вынесены за пределы фрейма на панели Layers
Элементы нужны в пределах фрейма, иначе они просто не будут участвовать в анимации, поэтому переносим их обратно. Выделяем нужные слои с зажатым Ctrl на клавиатуре и сдвигаем в стек фрейма на панели слоев, как показано ниже.
Возвращение элементов внутрь фрейма
Отлично, разобрались с объектами и фреймом, вернемся к анимации. Чтобы посмотреть получившуюся анимацию нужно связать первый фрейм со вторым, настроить анимацию и перейти в режим просмотра прототипа в реальном времени (Present).
Режим Prototype
Справа на панели свойств выбираем вкладку Prototype (режим прототипирования), переходим на первый фрейм, в середине появится кружок с синей обводкой. Захватываем этот кружок мышкой и тянем появившуюся стрелку до второго фрейма, после того как стрелка прилипнет к нему, справа появится окно настройки интерактивного взаимодействия с интерфейсом и анимации (Interactive details & Animation).
Связываем два фрейма в режиме Prototype
Настраиваем анимацию
Выставляем следующие параметры:
В блоке Interaction Details (детали взаимодействия) выбираем After Delay (действие с задержкой) и напротив ставим тайминг 200ms, этого будет вполне достаточно чтобы не ждать появление элементов долго, но в тоже время чтобы они не появились мгновенно, нужно успеть все рассмотреть. В блоке Animation (анимация) из выпадающего списка выбираем пункт Smart Animate (умная анимация), ниже указываем свойство анимации Ease Out (плавное затухание), а тайминг ставим 800ms, это нужно для того чтобы анимация была плавной. Протестируем и посмотрим что получилось, для этого в верхнем правом углу есть кнопка Present (представлять).
Кнопка Present для перехода в режим просмотра прототипа
Тестируем анимацию
Нажимаем на кнопку Present и в режиме просмотра прототипа смотрим результат:
Получившаяся анимация в режиме просмотра прототипа
Нам удалось получить добротную анимацию логотипа и меню, теперь нужно повторить те же действия для всех остальных элементов. Какие то вынести за пределы фрейма, другие оставить на месте, настроить прозрачность, а какие то просто не трогать.
Настраиваем режим просмотра прототипа
Еще одна важная деталь: фон и корпус смартфона в режиме просмотра также можно поменять. Кнопка Show Prototype Settings (показать настройки прототипа) на вкладке Prototype:
Настройка фона и модели для режима просмотра прототипа
Вернемся к нашей композиции и продолжим настройку анимации первого экрана.
Настраиваем появление всех элементов первого экрана
Горы и нижние облака вместе с надписью опускаем чуть ниже, надпись не выносим за пределы фрейма, а в свойствах на вкладке Design устанавливаем прозрачность 0% также как фоновой картинке и верхнему небосводу, облако посередине сдвигаем влево.
Настройка прозрачности и перенос элементов
Тестируем анимацию первого экрана
Нажимаем на иконку Present для того чтобы протестировать анимацию.
Анимация появления первого экрана
Можно сделать еще анимацию вагончика, например выезжает слева или сверху, или вообще оставить на месте и поиграть с прозрачностью:
Настройка прозрачности слоя с вагончиком
Первый экран готов, уже сейчас можно сказать что эффект параллакса имеет место быть, но в большей степени он проявит себя при прокрутке страницы вверх или вниз. Переходим к интерактиву, сделаем так чтобы при прокручивании страницы, изображения двигались с разной скоростью создавая полноценный красивый эффект параллакса.
Создание интерактивной анимации
Для создания интерактивной анимации понадобится третий фрейм. Его легко создать из второго фрейма сделав копию — зажимаем мышкой левый верхний угол второго фрейма и тянем его вправо с зажатой клавишей Alt. Далее на третьем фрейме делаем те же манипуляции что и на первом: смещаем слои и используем прозрачность. Затем связываем фреймы в режиме прототипа и настраиваем интерактив и анимацию.
Настраиваем появление элементов третьего фрейма
Слои на третьем фрейме в этот раз сдвигаем вверх: вагончик уезжает за пределы фрейма, темная гора доезжает до логотипа, фоновая гора чуть смещается вверх, облака практически исчезают, надпись смещается вслед за темной горой:
Элементы третьего фрейма
Связываем второй и третий фрейм в режиме Prototype и настраиваем анимацию
Переходим на вкладку Prototype и стрелочкой связываем второй и третий фрейм. В появившемся справа окне указываем следующие параметры:
В первом блоке выбираем On Drag (перетаскивание), это нужно для интерактивного взаимодействия с прототипом, ну как будто мы пальцем сдвигаем страницу вверх, во втором блоке скорость анимации меняем на 1100ms, все остальное оставляем без изменений. Тестируем:
Тестирование интерактивной анимации в режиме просмотра прототипа
Можно еще поиграть со скоростью перемещения элементов, а также с их расположением, но и сейчас все выглядит достаточно неплохо. Вернуть экран в исходное положение пока не получится потому что не настроена связь третьего фрейма с чем бы то ни было, на нем анимация заканчивается.
Настраиваем обратную связь для возврата на предыдущий фрейм
В режиме прототипа перемещаем стрелку обратно на второй фрейм, таким образом создаем возврат с третьего фрейма на второй при пролистывании.
Связываем третий фрейм со вторым в обратном порядке
Далее в настройках выбираем On Drag, а анимацию на возвращение делаем чуть быстрее — 1000ms, все остальное без изменения:
Тестирование интерактивной анимации скроллирования вверх и вниз
Отлично, для финального варианта не хватает контента на темном фоне. Добавьте его самостоятельно, можно добавить блок текста или карточки:
Финальное тестирование интерактивной анимации
При добавлении карточек принцип тот же самый — добавляем карточки, сдвигаем за пределы фрейма, возвращаем во фрейм на панели Layers, используем прозрачность. Все просто.
Финальный результат
Финальный результат с появлением первого экрана и интерактивной анимацией
Получился отличный параллакс эффект — за счет того что передние элементы движутся быстрее фоновых создается некий объем. Интересен эффект еще тем что запускается во время взаимодействия с интерфейсом, то есть во время пролистывания страницы.
P/S/ Запилю чуть позже гайд по созданию верхней иллюстрации (если будет лень то не запилю), которая готовилась специально для этого урока