Как сделать в фигме всплывающее окно

Обновлено: 20.05.2024

5 способов улучшить процесс прототипирования в Figma

Как дизайнеры, мы создаем прототипы для множества различных целей: запуск пользовательских тестов, представление реалистичных планов заинтересованным сторонам, донесение замыслов и идей до разработчиков, список можно продолжать бесконечно.

Поскольку прототипы очень важны в процессе проектирования, опыт должен позволять делать все быстро и просто. Чтобы упростить и ускорить рабочий процесс создания прототипа, я собрал для вас несколько моих любимых советов и приемов. Читать дальше!

Используйте мастер-компоненты для ускорения соединений прототипа

Допустим, вы проектируете экран с какой-то постоянной навигацией, например панелью вкладок. Вы должны привязать каждый пункт меню к определенному фрейму (например, связать кнопку «домой» с фреймом домашней страницы). Если это меню повторяется на нескольких экранах, как это часто бывает с панелями вкладок, утомительная задача связывания может занять больше времени, чем могла бы.

Решение. В самом начале вашего процесса, превратите ваше меню гамбургера в компонент. Как только вы это сделаете, свяжите каждый пункт меню этого мастер-компонента с соответствующим фреймом. Далее, каждый раз, когда вы создаете экземпляр компонента гамбургера, все соединения будут автоматически распространяться! Больше не надо биться головой о стену, по-поводу этой утомительной работы.

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

Вместо этого создайте новый мастер-компонент с экземпляром из вашей библиотеки внутри него. Figma позволяет вам выбирать глубоко вложенные слои внутри каждого компонента, так что вы все равно можете связать несколько пунктов меню из экземпляра, не отрывая его от мастера. Я часто размещаю некоторые из этих повторяющихся компонентов в стороне, за пределами моих макетов, в качестве удобного места для доступа к ним и поддержания связанных соединений с различными экранами.

Используйте компоненты для прокрутки контента

При разработке более длинных скролл-экранов с фиксированными элементами, такими как строки состояния, верхние или нижние колонтитулы, вы можете просто перетащить нижнюю часть рамки вниз, чтобы разместить дополнительный контент. Если содержимое превышает высоту области просмотра для выбранного вами устройства, Figma автоматически прокручивает кадр в режиме прототипа. Удобно, правда?

Но бывают случаи, когда вы хотите увидеть то, что видно в окне просмотра по умолчанию (то есть до того, как пользователь прокрутит). Это дает вам представление о том, какой контент изначально отключается, когда пользователи впервые переходят к этому фрейму прототипа. Устройства с различными размерами области просмотра будут сегментировать контент в разных местах. Чтобы облегчить просмотр этих разных визуализаций, используйте компонент.

Чтобы увидеть, какой контент изначально виден в прокручиваемом фрейме:

Превратите свой прокручиваемый контент в компонент.
Убедитесь, что вы установили ограничения для всех элементов внутри.
Убедитесь, что на панели свойств установлен флажок «clip content» (по умолчанию этот параметр должен быть включен).
Перейдите в режим прототипирования и включите нужное направление прокрутки, настроив «overflow Behavior.».
Поместите экземпляр этого компонента в свои проекты и измените их размер.

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

Используйте временные задержки и наложения для имитации взаимодействия

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

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

Стартовый экран

Прототипы в Figma в настоящее время ограничены отдельными страницами. Это позволяет вам иметь отдельные прототипы в одном документе, каждый со своим уникальным URL-адресом, которыми вы можете поделиться с людьми, когда они захотят их просмотреть. Но иногда вы просто хотите поделиться одной ссылкой с людьми, которая позволяет им увидеть несколько вариантов дизайна.

Для этого в Figma создайте фрейм оглавления в качестве стартового экрана вашего прототипа. Затем свяжите каждый элемент списка в оглавлении с другим пользовательским флоу. Изнутри Figma будет интерпретировать все это как один прототип, но конечные пользователи будут воспринимать их как разные прототипы с выбором между ними в начале. Примечание: все ваши пользовательские флоу должны быть на одной странице, чтобы это работало.

Ссылка на файл Figma

Используйте режим наблюдения

Знаете ли вы о режиме наблюдения в Figma? Это позволяет вам следить за экраном другого человека, пока он что-то показывает. Вы можете щелкнуть аватар вашего сотрудника в верхнем правом углу редактора, чтобы увидеть все, что он видит в файле дизайна.

Режим наблюдения ТАКЖЕ работает с прототипами. Вы можете щелкнуть аватар вашего сотрудника, чтобы узнать, где он находятся в прототипе и что он там делает. Это отлично подходит для удаленных пользовательских тестов, когда вы хотите изучить, как пользователь взаимодействует с вашим дизайном. Это также отличный способ заставить всех следить, когда вы представляете свою работу на собрании.

Совершенствуйтесь и начинайте прототипирование!

Я надеюсь, что некоторые из этих советов помогут вам ускорить процесс создания прототипа. Как всегда, не стесняйтесь делиться своими советами, вопросами и опытом в нашем онлайн-сообществе на Spectrum.

Figma: самостоятельное создание кликабельного прототипа [Часть 2]

После трудоемкой работы дизайнеру важно грамотно презентовать макет внутреннему или внешнему заказчику. Наиболее наглядной демонстрацией послужит кликабельный прототип. Это вполне реально сделать, если добавить ссылки в Figma . В этой статье будет подробно описано, какие именно кнопки и опции понадобятся для создания кликабельного прототипа. Приведенная в статье информация поможет понять, как в Фигме прописать ссылки, а также воссоздать галерею “карусель”, всплывающее pop-up окно и добавить интересную возможность “якоря”, с помощью которого можно осуществить переход на любой блок страницы.

Как ставить линки в кликабельный прототип

В качестве примера мы воспользуемся проектом из предыдущей статьи. Создавая дизайн в первой части, мы использовали две страницы и объединили их с помощью вкладки prototype, Пример работы можно видеть на картинке ниже:

Вкладка prototype открывает всплывающее окно, где нужно выбрать тип перехода. Для этих целей обычно используется функция onClick. В раскрывающемся списке доступно еще несколько вариантов:

OnDrag – предназначен для захвата и перетаскивания. Допустим, дизайнер создал два окна для смартфона и нужно реализовать действие, где щелчком мыши по фрейму и перемещением открывается новое окно.
Hovering – при наведении на фрейм будет переход на следующую страницу. Как только курсор мыши уберется с целевой области, автоматически произойдет возврат обратно.
Pressing – действия происходят при нажатии мышки на страницы.
Key/gamepad – здесь пользователь устанавливает нажатие клавиши. После выбора этого пункта появится поле, где нужно обозначить клавишу на клавиатуре.

Функции, приведенные ниже, предназначены только для работы с мышкой.

Enter – координаты курсора мышки фиксируются, и когда они попадают в рабочую область страницы прототипа, автоматически осуществляется перенаправление.
Leave – при наведение на любой участок, кроме основного фрейма, будет выполнен переход.
Down – зажатая кнопка мышки на фрейме сделает переход.
Up – аналогично предыдущему варианту, только в этом случае переход работает при отпускании мышки.

Как в Фигме сделать ссылки ? Приведем пример и создадим две области, где при нажатии на кнопки будут переключаться картинки. Для этого применим оригинальный шаблон из первой части и увеличим высоту (height), и перенесем часть блоков ниже:

Добавим в пустое пространство еще один frame (фрейм). Редактирование внутри фреймов может оказаться непростой задачей, поэтому мы приняли решение сначала создать контейнеры выше макета, в которых будет находиться картинка. Создадим еще два фрейма. Лучше всего сделать так – сначала добавить один, потом выбрать его и нажать CTRL+C и CTRL+V, второй появится рядом. Сделайте так, чтобы они плотно прилегали друг другу, как показано на картинке ниже:

Теперь заполним области случайными image (изображениями), для этих целей воспользуемся Unsplash. Выбираем два контейнера Frame8 и Frame7 правой кнопкой Plugins->Unsplash, В итоге у нас получится вот что:

Теперь внешние кадры перенесем и вставим внутрь десктопного приложения номер 1 (Desktop-1). В левой вкладке Layers захватываем frame8 и frame7 и перетаскиваем их. Они должны оказаться в ранее созданном объекте Frame6. В итоге на общем холсте они скроются, чтобы снова их отобразить, нужно настроить позиционирование. Пример:

Ниже оставлен небольшой отступ для стрелок, чтобы с их помощью менять баннеры.

Desktop-1 следует дополнить двумя прямоугольниками (Rectangle). И задать настройки: обводку Stroke и заливку, как показано на скриншоте:

Дальше оформляем каждый квадрат стрелочкой. Воспользуемся плагином, который открывает иконки на разные объекты. Называется plugin “Font Awesome Icons”.

Выбрав icons (иконки), мы увидим, что они расположены не в том месте, где нам надо, поэтому следующий шаг – это назначить позиции и размер, например, 55 пикселей высота и ширина. Дальше следует их назвать arrow-right и arrow-left и сгруппировать с rectangle быстрыми клавишами CTRL+G. Выделяем и группируем. Придумываем название, например, button-arrow-right и button-arrow-left.

Для каждого квадрата свой arrow. Полностью пример всех действий показан на скриншоте:

Сделаем привязку к кнопкам. При щелчке будет меняться кадр. Стоит напомнить, что в предыдущей статье мы сделали копию макета, чтобы показать, как работают переходы. Сейчас копия нам не нужна. Если по пути встречаются посторонние объекты, которые мешают просмотру и редактированию, вы всегда сможете сделать две вещи: “скрыть” и “повесить замок”. Таким образом, вы прячете страницу, используя глаз, и защищаете от изменений с помощью замка:

Чтобы сделать переходы, нужно сначала добавить горизонтальную прокрутку. Делается это так: щелкаем по Frame6, открываем вкладку prototype и видим надпись Overflow Behavior, из списка выбираем Horizontal scrolling. Настраиваем связи, используя ранее созданные кнопки “стрелки”. Чтобы удобнее было привязывать элемент, отобразим второй кадр. Для этого уберем везде галочки “Clip Content”, где находится наш кадр, у Frame6 и Desktop-1:

После того, как выполнили предписанные действия, настраиваем связь между фреймами: правую стрелку привязываем к кадру, которая находится за пределами видимости станицы, левую, соответственно, указываем на первый frame. Делается это все через prototype. В всплывающем окне указываем настройки анимации. Пример:

Данная процедура – это настройка якорных ссылок (anchor link) в Фигме. Эффект, когда при нажатии кнопки контент сдвигается и показывается следующий блок. После того, как все сделано, можно протестировать полученный результат. Нажимаем вправо, появится следующий frame, влево – вернется на исходную позицию. Прежде, чем проводить тестирование, не забудьте поставить флажки в опциях clip content, чтобы скрыть выступающую за границы макета картинку.

Это методика допустима для одного объекта, в случае, когда понадобится добавить якорные ссылки в Фигме. Если же появилась задача, где нужно работать с анимацией, то этот вариант определенно не подойдет.

Чтобы зациклить баннер или сделать плавное появление следующего image, нужно использовать Smart Animate. В таком случае потребуется дублировать страницу, после этого появится возможность добавлять разные эффекты при переходе.

Еще один важный элемент, который может присутствовать на вебсайте, это вертикальный anchor link. Щелкнув по веб-ссылке в меню навигации, страница прокрутится до указанного фрагмента и отобразится нужный контент. Чтобы это реализовать, понадобится в наш прототип добавить в самом верху меню. Поэтому, создавая прототип в первой части, нужно сделать отступ, там мы и разместим элемент menu.

Сверху разместим четыре figma ссылки , например: Наши новинки, Товары, Консультация и Подвал. В макете одного раздела не хватает, а именно возможности задать вопрос, поэтому следующее, что необходимо сделать, – расширить высоту шаблона и добавить фрейм free-consultation. Еще важно разместить в макете подвал с контактами (footer), пример элемента ниже:

Вставим в шапку (header) несколько текстовых полей, преобразуем в anchor link и перенаправим на определенный фрагмент страницы. Чтобы это сделать, нужно выбрать любое текстовое поле, потом перейти во вкладку prototype, затем на экране появится плюсик, делаем захват и ведем стрелку на целевой контейнер. Показываем screenshot с примером всех связей:

Способ поставить линк на внешний ресурс – это использование инструмента “Create Link” (цепь). Иконка цепи расположена на верхней панели. Для начала выбираем text, потом щелкаем по “цепи”, затем появится всплывающее окно, вписываем url-адрес сайта. При тестировании веб-ссылка станет активной.

Создание кликабельной карусели с картинками

На просторах интернета встречаются карусели, по которым можно кликнуть и открыть следующую страницу. Владельцы интернет-магазинов размещают в каруселях фото товары или последние новинки. Карусель обычно автоматически прокручивается, привлекая внимания потенциальных клиентов. Сделаем такую же горизонтальную прокрутку, которая будет через каждые несколько секунд прокручиваться самостоятельно, показывая новые товары.

Создадим новый пустой проект “Blank canvas”. Начинаем рисовать фреймы. Их будет четыре, придумаем каждому названия, например, image-frame1-4, зададим ширину и высоту 200 пикселей и добавим туда картинки с помощью плагина unsplash. Первые три будут сгенерированы случайно, а четвертую нужно перенести с первой позиции:

Сделаем четыре дубликат main-frame, используя CTRL+C и CTRL+V. Теперь начнем смещать наши группы. Во втором дубликате на 200 пикселей, в третьем на 400, в четвертом на 600, разумеется, все это со знаком минус:

Настроим связи между четырьмя кадрами с помощью Prototype. При переходе с первой на четвертую будет Smart Animage. С четвертой по первую Instant.

При тестировании запускаем бесконечный слайд. Вернёмся к нашему шаблону и найдем блок с новинками товаров. Напомним, что в первой части статьи мы использовали целый ряд карточек товаров и прокручивали его с помощью вкладки Overflow behavior->Horizontal Scrolling. Теперь создадим бесконечный скроллинг, используя Smart Animate. Графическое изображение “новинок товаров” находится в блоке Frame3, он будет у нас основным, создадим там еще один блок и назовём slides-frame. Раньше мы сгенерировали иллюстрации, чтобы протестировать Overflow behavior, поэтому часть придется удалить, оставить только 6 и сделать дубликат. Переносим весь ряд в slides-frame:

Все отступы должны быть строго соблюдены, например, во вложенной группе, куда добавлены все картинки, от левого края рекомендуется установить 15 пикселей, а расстояние между карточками 55 px. Кроме того, следует добавить стрелки, чтобы дать возможность прокручивать вручную.

Дальше делаем несколько копий со сдвигом на одну картинку в каждой. Потом реализуем привязку (Prototype). Учитывая количество изображений (одиннадцать), дублированных макетов должно быть семь. Пример на картинке:

Обратите внимание, что первый и последний шаблон похожи. Это сделано для того, чтобы осуществить плавный переход во время бесконечной прокрутки. С 1 по 7 мы будем использовать связь Smart Animate, c седьмого по первый –Instance. Настройки на скриншоте:

Если требуется сделать привязку ко кнопке, то для этого нужно взаимодействовать с функцией onclick, привязать её к последующему и предыдущему шаблону.

Чтобы картинка в ленте стала кликабельной, следует применить prototype к ней и провести стрелку на блок, куда будет переходить пользователь при нажатии.

Создаем окно pop-up

Вы наверняка видели на веб-сайтах всплывающее окно, где автор блога предлагает бесплатно скачать видеокурс, разумеется, за подписку, в которой нужно указать свой email и имя. Эти окна, всплывающие посередине экрана, называются pop-up, и сейчас мы расскажем, как сделать такое окно в figma. Главный плюс заключается в том, что дублировать макет интернет-магазина не придётся. Экспериментировать с всплывающими окнами мы будем в шаблоне онлайн магазина. Раньше мы создавали блок с кнопкой “бесплатная консультация”. На неё мы и повесим модульное окно. Чтобы посторонние элементы не мешались, была убрана ранее созданная галерея, теперь добавим еще один фрейм, который назовем free-consultation-frame. Начертим несколько прямоугольников и напишем текст, чтобы вид был как у формы для заполнения полей.

Сделаем связь prototype, появится окно, где нужно провести настройки, а именно указать Target-> onclick, В Action вместо стандартного Navigate To, выберем Open Overlay, появятся дополнительные опции выравнивания, укажем Centered, и по центру обязательно установим две галочки.

Сlose when clicking outside – закрыть при нажатии снаружи
Add background behind overlay – добавить фон. Там нужно установить цвет и процент затемнения.

Полностью настройки показаны ниже:

Как шерить проект

Допустим дизайн готов и самое время показывать его заказчику. Для этого есть специальная кнопка в верхнем углу экрана Share, при нажатии на нее появится окно, далее нажимаем Copy Link. Скопированную ссылку можно передавать заказчику. Если запустить тестирование, то там тоже есть Share, работает аналогично.

В раскрывающемся списке можно выбрать обычный просмотр или редактирование:

Кроме того, нажав “Get embed code”, откроется код с тегом iframe, который можно разместить на сторонний веб-сайт.

Подведем итоги: прочитав статью, вы ознакомились с таким понятием как ссылки в Фигма. Научились делать “галерею” из бесконечно прокручивающихся картинок и освоили дополнительную простую тему создания popup окон. Все это в совокупности позволит вам собрать кликабельный прототип в сервисе Фигма.

Figma: обзор интерфейса

Разработка дизайна сайта требует специального программного обеспечения. И чтобы его установить, вам потребуется достаточно мощный компьютер. Сервис Figma умеет работать с графикой, с ним можно работать в онлайн-режиме. Для использования Figma в проектах, нужно будет пройти регистрацию, затем вам откроется набор рабочих инструментов. При первом знакомстве у многих могут возникнуть трудности, но, прочитав эту статью, вы поймете, что такое интерфейс Figma и получите советы, как работать в этой программе.

Появится следующее окно, вписываем свое имя и в раскрывающемся списке выбираем профессию. Если вы собираетесь заниматься дизайном, то выберите “Design”. После завершения регистрации и авторизации можно приступать к работе.

Как работать в Фигме бесплатно – создаем проект

Главная страница авторизованного пользователя представляет собой рабочий стол, там хранятся все проекты, доступные для редактирования. Если вы зарегистрировались недавно, то первые работы будут представлены шаблонами других дизайнеров. Чтобы создать собственной дизайн, нажмите ссылку “New”, как показано на скриншоте ниже.

Дальше выбираем устройство, для которого будет разрабатываться приложение: мобильный телефон или десктопная версия. Есть вариант просто создать пустой бланк, там уже разработчик сам будет выбирать инструменты и работать с ними.

Кроме основных кнопок и “пресетов”, есть еще и набор шаблонов. Они доступны для редактирования. Но, чтобы лучше разобраться в функционале программы, рекомендуется выбрать вариант из “Blank Presets”. При переходе откроется окно с панелями инструментов, а также создастся frame, названный в зависимости от типа проекта “IPhone” или “Desktop”. Но если выбрать “Blank Canvas”, то проект откроется без фреймов, тут нужно самому выбрать тип устройства.

Как работать в Фигме: инструкция

Дизайн проекта состоит из элементов, с которыми будут взаимодействовать пользователь, для их добавления нужно создать frame. Делается это просто, на верхней панели выбираем иконку, на которой нарисована решетка или для быстрого доступа просто нажимаем F на клавиатуре. Откроется панель со списком типов устройств, выбираем подходящий вариант для нашего приложения.

Инструмент frame – это окно интернет-приложения. Если планируется разработать многофункциональную программу, то одного фрейма недостаточно, и чтобы добавить остальные, щелкните по фрейму (как пример iPhone 11 Pro/x – 1) в левой панели и нажмите CTRL+C и CTRL+V для создания дубликата или выполните действия, показанные на картинке выше.

При разработке прототипа используют разные примитивы, например, квадраты, линии, эллипсы и так далее, чтобы получить к ним доступ, щёлкните по иконке сверху, затем появится раскрывающийся список, пример ниже.

Дальше выбираем фигуру и рисуем во фрейме. Вот список примитивов:

Rectangle – квадрат, в каждом углу есть точки, с помощью них можно сделать скругления.
Line – чертит линию.
Arrow – похож на Line, только в конце линии есть стрелка.
Еllipse – круг.
Polygon – это треугольник.
Star – вычерчивает звезду с пятью углами.
Place Image – добавляет картинку с жесткого диска пользователя. При размещении появятся две кнопки Place All (Добавить все) и Discard All (Отменить все). За один раз можно выбрать несколько image. Делается это тремя способами: стандартный – выделение мышкой, ctrl + щелчок по очереди или shift + кнопка мыши, так сразу выделяется группа. После нажатия кнопки Place All в интерфейсе Фигма они все окажутся на холсте. Дополнительный вариант – просто перетащить файл в окно браузера.

У сервиса Figma, как и у Фотошопа, есть вкладка Layers, при добавлении объекта он начинает отображаться в слоях. Если object разместить во фрейме, то вид будет в форме дерева. Фигуры можно сгруппировать, если их выделить курсором мыши, удерживая левую кнопку, или же выбирая object, по очереди зажимая Shift, а после использовать комбинацию клавиш CTRL+G, тогда произойдет объединение в группу, полный пример на картинке:

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

Свойства объектов

1. Design – показывает параметры выбранного объекта, ширину, высоту, координаты по оси (x, y), выравнивания по отношению фрейма: слева, справа и посередине, а также дополнительные свойства, которые можно придать объекту, такие как: Fill (заполнение цветом), Stroke (цвет контура), Effect (настройка разных эффектов например тени) и Export (сохранение полученного результата в файл: png, jpg, svg и pdf). Ниже показано, как применять эффекты.

2. Prototype – эта вкладка помогает делать графические элементы более функциональными, например, повесить на кнопку переход на следующий frame, и при щелчке будет открываться страница. Это легко проверить. Создадим два фрейма, напомню, что инструмент находится в верхней панели, выберем любой тип устройства, например телефон, сделаем копию (Ctrl+C) и вставим (CTRL+V). На первом можно поместить квадрат, на втором эллипс. Пример ниже.

Воспользуемся Prototype, выделим объект “прямоугольник” и сбоку посередине при наведении мышки появится кружок с плюсом, щелкаем по нему и стрелкой указываем направление – второй фрейм. Всплывет дополнительное окно, разберем его позже, в итоге у нас должно получиться вот это:

Теперь можно протестировать. В верхнем углу есть кнопка “Present”, выглядит она как треугольник, при нажатии появится тест. Если все сделано правильно, то щелчком мышки по прямоугольнику откроется второе окно, где есть эллипс.

Переходим к следующему свойству.

3. Inspect, последняя вкладка – показывает параметры: размер, цвет и многое другое. Здесь запрещено менять настройки, можно только просматривать.

Вернемся к прототипам, здесь есть такая фишка, как настройка мобильного устройства, чтобы туда попасть следует нажать кнопку “Show prototype settings”.

При нажатии на кнопку, откроется блок с настройками оборудования: выбрать “device”, model, отобразить устройство по вертикали и горизонтали, цвет заднего фона и список стартовых фреймов.

Ранее упоминалось про окно, появление которого происходит, когда делаем стрелочную привязку от кнопки к фрейму. В этом окне присутствуют опции, где можно настроить плавный переход на следующую страницу и установить действия кнопки мышки. Например, один щелчок, drag-drop удержание и перелистывание, и так далее.

Prototype объединяет несколько фреймов, а его настройки способны создать интересные анимации переходов.

Таким образом, можно объяснить заказчику, как будет работать проект, и получить рекомендации от клиента. Для добавления комментария нужно поставить маркер на холст, написать text и нажать кнопку Comment. Message отобразиться в онлайне.

Text (hotkey “K”)

Предназначен для добавления текста в графическом интерфейсе пользователя (GUI). С помощью него можно создавать меню, делать подробное описание товара, услуги. Как и в остальных инструментах Figma, здесь есть свойства, а если вы уже сталкивались с оформлением текста в других графических редакторах, то и здесь сможете разобраться.

По “пресетам” существуют некоторые сходства c примитивами Rectangle и Ellipse, но есть и отличие, например, здесь можно указать размер и тип шрифта, а также выравнивание.

Подсказка: когда устанавливаешь шрифт, пишешь текст, позже появляется необходимость увеличить размер на несколько пунктов. Но при взаимодействии с параметрами ничего не происходит, это связано с тем, что сначала нужно выделить текст курсором, а потом вносить изменения. Пример работы с font показан ниже:

Pen/Pencil

Два инструмента для рисования произвольных форм. Перо (pen) используется для черчения линий. Ставим точку, потом еще одну, и появляется отрезок, повторяем действие несколько раз, при желании можно линию сделать изогнутой. Для этого при добавлении второй точки удерживаем клавишу мыши и плавно передвигаем, пример на картинке:

Положение всех точек, включая линию, можно отредактировать. Для этого выбираем иконку курсора и дважды кликаем на объект. Дальше отобразятся “Bend Tool” и “Paint Bucket”.

Edit object

Каждая фигура поддаётся редактированию, для этого следует нажать соответствующую иконку, а потом передвигать point. Пример на рисунке. Меняем положение точек у Rectangle.

Инструмент Components

Чтобы разобраться, как работать в программе Фигма , вам нужно знать такую важную деталь, как компоненты, которые находятся рядом с edit object. Они способны объединить несколько элементов в один контейнер. Эта функция потребуется в тех случаях, когда на странице присутствуют однотипные блоки, например, карточки товаров. Нарисовав один block, можно сгруппировать его, потом преобразовать в компоненты и скопировать несколько раз, после этого, если потребуется, перетащить или поменять размер картинки внутри блока, изменения вступят в силу для всех копий.

Приведем пример. Создадим карточку. Сначала реализуем шаблон, состоящий из rectangle и текста.

Дальше нужно выполнить группировку. Делается это просто, выделяем объекты и нажимаем Ctrl+G. Воспользуемся иконкой Create Component. Она расположена на верхней панели, чтобы её увидеть, нужно щелкнуть на сгруппированном объекте или другой вариант – через контекстное меню. Правой кнопкой мыши щелкаем по объекту, из которого хотим сделать component, как показано на картинке:

Группа элементов станет контейнером, после этого сделаем несколько копий Ctrl+C (копировать) и CTRL+V (вставить). Разместим карточки так, чтобы они помещались на frame. Полностью пример можно увидеть ниже:

Обратите внимание на вкладку Layers слева, там отобразилось четыре компонента, у каждого из которых есть значки ромбики. Первые три пустые, они означают копии, последняя, четвертая, оригинал. Результатом наших действий станет то, что нам не придется редактировать каждый товар по отдельности. Выбираем оригинал под названием “Group 1”, заходим в его настройки двойным щелчком, при этом сначала один раз выделяем мышкой. Теперь редактируем квадрат, допустим, это картинка товара. Захватываем боковую границу и масштабируем, все остальные элементы будут тоже изменены. В итоге у нас получится следующее:

Размер у серого квадрата был изменен, а также передвинуты позиции, соответственно, наши действия отразились на остальных копиях. Выше показаны два варианта – до и после правок. Удобство заключается в том, что можно сделать целый каталог и менять местоположения и размер. Соответственно, изменения вступят в силу для всех блоков.

Не только объекты внутри контейнера, но и внешние границы также меняются. Делается это с помощью клавиши Ctrl и курсором мышки, а если удерживать клавишу Shift и воспользоваться мышкой, то карточка увеличиться в размере. Стоит учитывать, что данные действия должны происходить только на оригинале, а не на копии.

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

Часть параметров у копий закрыты, например, внутренние элементы невозможно передвинуть. Если попытаться захватить и перетащить, то будет двигаться весь контейнер.

Менять позиции запрещено внутри дубликата контейнера, но возможно изменить цвет, добавить картинку. С помощью плагина Unplash мы добавили image, а также закруглили края у некоторых элементов.

Стоит учитывать, что первый компонент идет как основной, и иногда после изменения копий веб-мастеру может понадобиться вернуть настройки по умолчанию, которые есть в оригинале. Для этих целей предусмотрена специальная кнопка. Выбираем карточку, где требуется применить стандартные настройки, и нажимаем:

Здесь мы предоставили пример каталога с товарами, чтобы люди переходили по нему, нужна ссылка на страницу или кнопка со стрелкой, которая привязана на следующий “page”. Как сделать привязку, используя прототип, мы писали выше.

Сейчас небольшая инструкция добавления линка.

Выберем из панели инструмент “текст”, вставим его в оригинальную карточку и напишем “подробнее”. В итоге слово отобразится везде.

Теперь, чтобы сделать ссылку, нужно щелкнуть по текстовому полю и выбрать вверху экрана “цепь” и написать url-адрес.

Веб-ссылка будет доступна только для одной карточки, с остальными нужно поработать отдельно, и в каждую вставить url-адрес, который будет вести на страницу с полным описанием товара. Чтобы протестировать, нажмите “Present” в правом верхнем углу экрана.

В компонентах также можно создавать несколько разных вариаций и менять их. Допустим, перед веб-мастером поставили задачу сделать несколько размеров фото. Если посмотреть на скриншоте выше, то у нас уже есть image, добавленный через плагин, с ним мы и будем работать.

В первую очередь создадим еще одну страницу, делается это так:

Тоже самое делаем со второй. В итоге должны получиться две обычные группы. Меняем размер квадрата, в первом случае делаем миниатюрку, во втором, наоборот, увеличиваем. Потом оба блока снова преобразуем в компонент.

Почти все готово, тестируем на Page 1. Выбираем блок с картинкой, сбоку в свойствах появится раскрывающийся список “Swap Instance”, по умолчанию стоит главная страница, жмем стрелку и переходим в меню.

Там должно быть название новой страницы, выбираем её, откроются наши вариации, тестируем, и смотрим, что получается.

Инструмент Component является незаменимым средством для создания множества разных объектов.

Объединение группы выбранных элементов

В панели управления есть кнопка, умеющая объединять группу выбранных объектов. Доступ откроется, если выбрать несколько фигур.

При нажатии на иконку появится список, состоящий из нескольких selection. Для проверки можно щелкать по каждой кнопке и смотреть результаты. Доступно пять пунктов: Union, Subtract, Intersect, Exclude и Flatten.

Как работать в программе Фигма – история сохраненной версии

В Фотошопе есть функция просмотр истории, где можно в любой момент вернуться на один или несколько шагов назад. У Фигмы есть похожий инструмент, открывающий сохраненные проекты. Для этого следует перейти в меню, которое расположено слева вверху, выбрать file -> Show version history и справа появится список всех сохраненных копий.

Пригодится, если во время работы была допущена ошибка, и нужно откатить к предыдущей версии.

Когда требуется поставить сохранение вручную, то нажмите плюс в панели истории или горячие клавиши CTRL+ALT+S. Откроется два поля c title и description. Придумываем название, описание и сохраняем.

Плагины

При работе довольно часто бывают ситуации, когда стандартного набора инструментов для реализации своих проектов недостаточно и приходиться обращаться к сторонним плагинам. Один plugin уже упоминали в статье – это Unsplash, он устанавливает случайную картинку на холсте. Существуют и другие плагины, чтобы получить к ним доступ, нужно перейти в меню и выбрать следующее:

Чтобы plugin стал доступным в менеджере, выбираем Install. Процесс инсталляции не займёт много времени. Позже он отобразится в меню. Два способа его запустить: первый – в самом меню плагинов, второй – правой кнопкой мыши, выбрав plagins.

В этой статье были описан интерфейс сервиса Фигма, а также рассказано, как работать в Фигме в виде инструкции . После завершения дизайн-проекта, ваш проект можно перенести в другой сервис, например, в конструктор Tilda, для разработки программной части.

Как сделать в фигме всплывающее окно

Нравится Показать список оценивших

Dmitry, странно, что так получается, конечно, ведь ты в этот момент не растягиваешь окно, а внутри окна взаимодействуешь с чем-то. Неужели ОС не понимает? Но спасибо в любом случае за подробную информацию.

Нравится Показать список оценивших

Vova, привет, покажи скриншот.

Нравится Показать список оценивших

Глеб, С *.fig- вариант, но как это сделать- не ясно. Все настройки, это например все тени у всех объектов, все компоненты и фреймворки. Чтобы это был именно проект, а не выгруженный растр

Интерактивные прототипы в Figma

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

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

Если вы копируете элемент, то копируются и связи для прототипирования. Чтобы удалить их, выделите объект и в контекстном меню выберите Remove Connections.

Триггеры

Триггеры взаимодействия в Figma указывают, каким образом пользователь должен воздействовать на элемент интерфейса (кликнуть, навести курсор и так далее), чтобы произошло событие, связанное с этим элементом, например, переход на другую страницу или демонстрация стилей ховера (hover).

Клик или тап (On Click/On Tap)

Наступает, когда пользователь кликает по элементу курсором мышки или, в случае с сенсорными экранами, нажимает (однократно) пальцем.

Применяется для навигации: переход по ссылкам, ввод данных.

Перетаскивание (On Drag)

Наступает, когда пользователь перетаскивает элемент с помощью зажатой кнопки мыши или пальцем (на сенсорный экранах).

Может применяться для перемещения элементов (например, слайдер), и для более сложных манипуляций, напрмиер, для перетаскивания вниз для обновления.

При наведении (While Hovering)

Используется для изменения состояния при наведении (аналог hover в CSS) и демонстрации подсказок. Если убрать курсор с объекта, элемент будет возвращен в исходное состояние.

Клавиатура или геймпад (Keyboard and Gamepad Shortcuts)

Используется для считывания нажатия клавиатуры, в том числе сочетаний.

Мышь в области (Mouse enter)

Показывает фрейм назначения, если мышь наведена в специальную область

Когда мышь покидает область (Mouse Leave)

Показывает целевой кадр, когда курсор покидает специальную область. Может использоваться, например, для демонстрации подсказок, когда пользователь покинул поле, не заполнив его.

Начало касания (Mouse Down (Touch Down))

Событие, когда мышь только была нажата (начало клика), либо, для сенсорных экранов, когда палец только коснулся элемента.

Конец касания (Mouse Up (Touch Up))

Событие, когда мышь больше не нажата, либо, в случае с сенсорным экраном, палец больше не касается точки на экране.

Задержка (After Delay)

Позволяет запускать событие после паузы. Указывается в миллисекундах.

Анимация прототипа

Мгновенно / без анимации (Instant)

Мгновенно отображает фрейм назначения.

Растворение

Фрейм назначения будет плавно показан поверх исходного (Fade in).

Поддерживается настройка длительности и функции перехода.

Smart animate

Фигма сама ищет подходящие кадры и вставляет плавную анимацию перехода.

Поддерживается настройка длительности и функции перехода.

Перемещение, перекрытие (Move In / Move Out)

Фрейм назначения будет выезжать и перекрывать исходный фрейм.

Поддерживается настройка длительности, направления и функции перехода.

Смахивание (Push)

Фрейм назначения будет выталкивать исходный фрейм.

Поддерживается настройка длительности, направления и функции перехода.

Slide In / Slide Out

Перемещение с растворением

Виды взаимодействий

Вид взаимодействия определяет, что именно произойдет после события, вызванного одним из триггеров.

Навигация (Navigate)

Осуществляет переход от одного фрейма к другому.

Наложить поверх текущего фрейма (Open Overlay)

Открывает целевой фрейм над (поверх) исходного. Может использоваться для отображения всплывающих окон.

Пролистать до (Scroll To)

Пролистывает текущую страницу до вложенного элемента или фрейма. Может использоваться для создания меню с якорными ссылками. (Обновление от 8/12/20)

Замена (Swap With)

Заменяет один фрейм другим. При этом, в отличие от перехода «Навигация», в данном случае пользователь не сможет вернуться на предыдущую страницу с помощью команды «назад».

Закрыть наложения (Close Overlay)

Закрывает окно, наложенное поверх фрейма с помощью Open Overlay.

Переход по ссылке (Open URL)

Открывает страницу по ссылке URL за пределами прототипа.

Создание интерактивного прототипа

Ниже мы рассмотрим пример создания прототипа с различными переходами.

Выпадающее меню, открываемое по нажатию на кнопку

Мы будем использовать: триггер On Click со взаимодействием Open Overlay и триггер On Click со взаимодействием Close Overlay.

Итак, для начала мы сделаем два фрейма: первый экран и меню, которое будет открываться по клику на иконку:

1. Выделяем иконку меню и переходим во вкладку Prototype в правой панели.

2. Для начала нам надо выбрать триггер в разделе Interaction: вместо None ставим On click (переход при нажатии).

4. Когда вид взаимодействия выбран, требуется указать целевой фрейм. Выбираем его из списка:

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

6. Выбираем анимацию в интуитивно понятном интерфейсе

7. У нас также есть кнопка «Закрыть». Выделим ее и добавим событие, закрывающие окно Close Overlay:

Hover с применением анимации Smart animate

Особенностью smart animate является то, что она сама находит все свойства, которые изменялись, для всех элементов фрейма. Таким образом вместо настройки анимации каждого элемента вы можете доверить это Figma, выбрав «умную анимацию».

Замена фрейма по нажатию кнопки клавиатуры

Подробное описание работы с клавиатурой читайте в разделе Работа с клавиатурой в прототипах Figma

Интерактивные прототипы Фигмы позволяют настроить взаимодействие не только с курсором (мышью), но и с клавиатурой.

Для настройки взаимодействия с хардварными кнопками в Figma используется триггер Key/Gamepad.

Стили в Figma

Стили позволяют сохранять наборы свойств объекта для повторного использования.

Если вы измените какое-либо свойство стиля, это значение будет переопределено для всех элементов, использующих этот стиль.

Заливок: заполнение (Fill), обводка (Stroke), Фон (Background color)
Текст: шрифты, размеры, высота строки, интервалы
Эффекты: тень, внутренняя тень, размытие, размытие фона
Сетки: строки, столбцы и отступы

Как добавить стиль к элементу

Чтобы добавить стиль к элементу, нажмите на на иконку с четырьмя точками в панели свойств. Во всплывающем окне вы увидите список стилей, доступных для элемента. Кликнув на один из них, вы установите стиль для выбранного элемента.

Как создать стиль

1) Создайте элемент, задайте его свойства

2) Откройте всплывающее окно стилей, нажав на иконку с четырьмя точками. Обратите внимание, что такие иконки расположены в разных местах панели свойств

3) Нажмите значок плюс (+) в открывшейся панели

4) Введите название стиля

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

Как удалить стиль

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

Чтобы удалить стиль, вызовите окно со списком стилей и вызовите контекстное меню («правая кнопка» мыши), из списка команд выберите Delete Style.

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

Читайте также: