Как удалить flow в фигма
Перейти к содержимому

Как удалить flow в фигма

  • автор:

Как делать прототипы в Figma: кнопки, прокрутка и поп-апы

Рассказываем, как сделать прототип интерфейса в Figma, чтобы показать его клиенту, разработчику или арт-директору.

Вячеслав Лазарев

Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

Кажется, что без программистов собрать из макета рабочий прототип невозможно. На самом деле это не так — в Figma предусмотрена функция прототипирования, которая поможет вам «завести» приложение и отловить все ошибки в сценариях до передачи макетов в разработку.

Рассказываем, как превратить ваши картинки из Figma в полноценный прототип — с рабочими кнопками, прокруткой и переключателями.

Интерфейс для прототипирования

На панели настроек справа в самом верху есть три вкладки: Design, Prototype и Inspected. Все настройки прототипов находятся в Prototype.

Основные настройки прототипов

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

Background — цвет фона.

Flows — здесь будут ваши прототипы, на одном макете их может быть несколько.

Чтобы открыть настройки конкретного экрана, нужно просто нажать на любой фрейм, который вы хотите превратить в прототип. Об этом мы поэтапно расскажем ниже.

Кнопки и навигация

  • Перейдите во вкладку Prototype.
  • Выделите любой фрейм на макете. На одной из его сторон появится кружок — зажмите его и тяните к другому фрейму.
  • Чтобы сделать кнопку Назад, выберите любой фрейм и на вкладке Prototype нажмите на плюсик напротив слова Interactions. В первом поле укажите Tap, а во втором — Back.
  • Чтобы запустить прототип, нажмите на синюю кнопку .

Прокрутка

  • Перейдите во вкладку Prototype.
  • Выделите фрейм, в котором нужна прокрутка. Чтобы она работала, высота вашего фрейма должна быть больше высоты экрана устройства.
  • На вкладке Prototype в пункте Overflow scrolling выберите нужный формат прокрутки — горизонтальный, вертикальный или общий.
  • Чтобы зафиксировать верхнюю и нижнюю панель приложения, перейдите на вкладку Design и в блоке Constraints нажмите галочку напротив Fix position when scrolling.
  • Чтобы запустить нужный экран прототипа, зажмите кнопку и перетащите её к нужному экрану, а затем нажмите на неё.

Всплывающие окна

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

Как настроить поп-ап

  • Перейдите во вкладку Prototype.
  • Выделите фрейм, по нажатию на который должен появиться поп-ап. На одной из его сторон появится кружок — зажмите его и тяните к другому фрейму, который будет выполнять функцию поп-апа.
  • В появившемся окне Interaction details вместо Navigate to выберите Open overlay.
  • Выберите ваш поп-ап, нажмите на плюсик напротив слова Interaction, затем — на появившийся пункт и в окне Interaction details вместо None выберите Swap overlay.
  • В появившемся поле в том же окне вместо None выберите дополнительный поп-ап.
  • Чтобы проверить прототип, перетащите кнопку на нужный фрейм и нажмите на неё.

Готово. Теперь у вас есть поп-ап, который открывается после нажатия на кнопку. А если нажать на него, он поменяется.

Внутренние ссылки

Часто в навигационной панели может понадобиться ссылаться на внутренние модули, например на блок «О компании». В прототип можно добавить и это по примеру простых кнопок.

Как сделать внутренние ссылки

  • Перейдите во вкладку Prototype.
  • В основном фрейме с экраном приложения выделите другой, по нажатии на который нужно прокрутить страницу. На одной из его сторон появится кружок — зажмите его и тяните к другому фрейму внутри основного.
  • В появившемся окне укажите отступ сверху, чтобы экран не прокручивался «впритык».
  • Чтобы проверить прототип, перетащите кнопку на нужный фрейм и нажмите на неё.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Больше о Figma

  • Умное копирование в Figma: зачем нужно и как пользоваться
  • 5 лайфхаков в Figma, которые помогут работать быстрее
  • 5 полезных плагинов для Figma: проектирование интерфейса
  • Как делать варианты элементов интерфейса
  • Тени в интерфейсах: зачем они нужны и как их рисовать
  • Как создать тёмную тему

Продвинутые советы по анимации и прототипированию в Figma

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

В этой статье я решила сосредоточиться на практических приемах, а не на экспериментальных анимациях (хотя перед некоторыми все-таки не смогла устоять). Не поймите меня неправильно. Меня всегда впечатляли фантастические анимации в Figma (только недавно Double Glitch поразил меня своей лава лампой в Figma). Однако в этой статье сосредоточимся именно на повседневном рабочем процессе.

Видеоверсия этой статьи:

alt + 8 / alt + 9 → переход между дизайном и меню прототипирования (нет, больше не Shift E). И да, как вы уже догадались, alt 0 — проверка (inspect), а alt 1, 2 — слои и ресурсы.

cmd/ctrl+alt+enter → открыть режим презентации, чтобы увидеть свой прототип.

alt + cmd/ctrl + стрелка влево/вправо → переход между открытыми файлами. Это очень полезно, когда у вас открыт файл дизайна и презентация прототипа.

Z → нажмите Z в режиме презентации, чтобы переключаться между различными вариантами презентации (показать 100%, растянуть по размеру экрана и т. д.)

1. Auto layout и smart animated components — идеальное сочетание

Начнем с моего любимого трюка, который наверняка поразит вас. Figma становится действительно мощной, когда вы комбинируете автоматическую компоновку, интерактивные компоненты и умную анимацию. Только подумайте об этом: auto layout автоматически заполняет любое освободившееся пространство. Таким образом, если вы создадите интерактивные компоненты с помощью смарт-анимации, а затем упакуете экземпляры во фрейм с автоматической компоновкой, это позволяет вам играть с разными размерами. Идеальный метод для создания таких вещей, как аккордеоны.

Имитация удаления:

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

��Совет: Figma не позволяет использовать высоту 0, поэтому нам приходится выбирать 1 пиксель. Это тоже смотрется нормально, но если вы установите, к примеру, высоту 0,004, Figma будет вынуждена округлить ее до 0.

2. Фиксация состояния с помощью секций

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

Без секций

Итак, допустим, наши посетители просматривают дизайн. Они уже прошли шаги (фреймы) A и B и заканчивают взаимодействие на шаге C. Со стандартной настройкой в ​​Figma после этого мы всегда возвращаемся на экран A. В реальной жизни это бы очень раздражало, например, при необходимости повторно вводить все личные данные. Кроме того, сам процесс прототипирования становится очень запутанным из-за большого количества связей между фреймами. И мы всегда вынуждены выбирать экран, на который нужно вернуться при закрытии процесса. Но ведь мы наверняка хотели бы вернуться туда, откуда пришли, а это может быть даже другой страницей с той же кнопкой призыва к действию.

С секциями

Инструмент «Секции» можно найти в меню фрейма или просто нажать Shift+S. Мне нравится использовать их для организации работы, потому что секции не отображаются в режиме презентации (в отличие от фреймов). Когда же дело доходит до прототипирования, они позволяют нам создавать проекты с сохранением состояния.

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

��Совет: При работе с секциями обязательно устанавливать для них параметр «navigate to» (открытый оверлей не сработает), но внутри секции можно связать фреймы, как если бы они были оверлеями. Это имеет то преимущество, что теперь вы можете использовать действие «назад» на кнопке закрытия, добавляя возможность вернуться точно в то место, откуда вы вошли в секцию! Это просто любовь!

3. Вложенные прототипы в презентациях

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

4. Scroll to! Горизонтальный, вертикальный и смешанный

«Scroll to» это отличная вещь, часто упускаемая из виду! С помощью «Прокрутки до» вы можете установить якорные точки в разных направлениях.

«Вертикальная прокрутка до» для создания хорошей навигации

Отлично подходит для очень простых анимаций, вроде одностраничного меню. Кстати, если вам интересно, для чего нужны значения хедер (offset values), так это на случай, если у вас есть липкий заголовок (sticky header) или какое-то пространство, которое нужно учитывать при прокрутке.

«Горизонтальная прокрутка до» для создания слайд-шоу

Просто поместите изображения во вложенный фрейм с overflow, а затем установите для этого фрейма горизонтальную прокрутку (в меню PrototypeOverflow scrolling). Теперь вы можете связать миниатюры, которые находятся за пределами фрейма, с изображениями. Круто, не правда ли!

«Горизонтальная и вертикальная прокрутка до» для интерактивных карт

Да-да, мы можем использовать прокрутку в обоих направлениях: и вертикально, и горизонтально. Все, что нам здесь нужно, — это карта, размещенная во вложенном фрейме с обрезанным содержимым (clip content) и горизонтальной и вертикальной прокруткой. Тут важно только, чтобы карта была больше, чем фрейм.

На карту я помещаю метки, некоторые — в обрезанную область. А затем связываю кнопки через «scroll to». Вот и все!

��Совет: чтобы метки располагались посередине карты при прокрутке, я установила смещение, равное половине размера фрейма с картой (то есть +/345, так как моя карта имеет ширину и высоту 690).

5. Комбинируйте умную анимацию (smart animate) и анимацию движения (moving animations) в Figma

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

Допустим, вы добавляете переключение фрейма с помощью pushing in, но хотите, чтобы меню сверху по-прежнему анимировалось. В этом случае просто используйте движущийся переход (moving transition) в качестве основной анимации и обязательно установите флажок «Smart animate matching layers». Теперь Figma будет «смарт-анимировать» слои с одинаковыми именами и настройками иерархии.

��Совет: это приведет к умному анимированию всех слоев с одинаковым именем и иерархией. Если вы хотите, чтобы это касалось только некоторых из них (например, в этом случае навигации, а не изображений), обязательно переименуйте другие слои (или группу, в которой они находятся). Тогда они станут частью движущейся анимации (moving animations).

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

6. Анимация перехода круга в прямоугольник

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

7. Интерактивные компоненты — моя большая любовь!

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

Итак, теперь давайте посмотрим на другие простые примеры такой магии:

8. Добавляйте масштабирование при наведении с помощью интерактивных компонентов

Эффект зума это еще один одна анимация, которой можно добиться с помощью интерактивных компонентов. Просто увеличьте изображение в целевом кадре и настройте смарт-анимацию между ними при наведении. В дизайне используйте экземпляр, а текст и изображения переопределяйте. Готово!

��Совет: рекомендую вам использовать инструмент масштабирования. Просто нажмите K, а затем используйте коэффициент масштабирования. А также запишите его в заметки, чтобы потом добавить коэффициент масштабирования для преобразования CSS в свою документацию.

9. Видео-анимация при наведении

Интерактивные компоненты также отлично работают в сочетании с видео. Давайте настроим видео-анимацию при наведении.

Сначала зададим параметры для карточки с видео (работает только на платном тарифе Figma, извините). Затем сделаем копию этой карточки и заменим видео неподвижным изображением. Простой способ добиться этого — выбрать видео, нажав shift+cmd+C. Так png скопируется в буфер обмена. Теперь просто вставим png как замену видео в стартовом фрейме. Убедитесь, что оба фрейма настроены как варианты в наборе компонентов, и просто подключите смарт-анимацию, срабатывающую при наведении курсора. Свяжите фреймы и нажмите кнопку воспроизведения. Вуаля!

10. Смарт-анимация для меню

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

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

11. Анимация увеличения при наведении

Представьте себе, добавление автоматического макета (auto layout) дает еще больше возможностей. Итак, здесь у меня есть смарт-анимированный интерактивный компонент с изменением размера, а экземпляры объединены во фрейм с auto layout, поэтому при наведении они увеличиваются в размере, отодвигая в сторону все на своем пути.

��Совет: Если вы хотите, чтобы крестик анимировался правильно, то вам нужно, чтобы у элемента (в данном случае креста) в обоих вариантах были одинаковые настройки и название! Я просто установила непрозрачность на 0 в большей версии, чтобы создать эффект затухания.

Предостережение по поводу умной анимации: все это еще нужно превратить в код!

Итак, вот где я начинаю медленно дрейфовать в опасные области смарт-анимации (но не сильно, не переживайте). Опасные, потому что в Figma все это ооочень просто! Буквально по одному щелчку мыши я могу получить плавную и отполированную анимацию. Но этот щелчок в Figma может быть не так просто повторить с помощью анимации CSS/SVG.

Помимо планирования анимации для повышения удобства использования (а вот и отличная статья об этом), когда-то настанет момент и ее воссоздания. Так что все эти сумасшедшие изогнутые карусели и индикаторы загрузки в виде цветных парящих шариков крутые, и я уверена, что кто-то где-то как-то сможет их реализовать. Видит Бог, у них могут быть даже более творческое решение! Но иногда имеет смысл поумерить свой творческий пыл (если только мастера CSS-анимации не окружают вас неограниченным бюджетом, тогда вы должны позвонить мне).

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

Советы по документированию и организации прототипов

Хорошо, давайте взглянем на некоторые советы, которые менее кричащие, но очень полезные, когда дело доходит до организации и документирования вашего прототипа:

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

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

13. Избавляемся от всех связей в прототипе

Не могу поверить, что я так долго не знала об этом. Убедитесь, что вы находитесь на вкладке прототипирования, а затем просто щелкните правой кнопкой мыши по холсту и удалите все соединения. Аххххх!

14. Встраивайте прототипы (как я сделала здесь)

Вы можете вставить ссылку на свой прототип во многие места, такие как Notion, Medium, ZeroHeight и т. д. Это замечательно, потому что позволяет продемонстрировать определенные части прототипа с дополнительной документацией или объяснением. И, конечно же, все автоматически обновляется. Вот, попробуйте:

15. Упакованные «компоненты-воронки»

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

Уловка, которую вы можете использовать, заключается в том, чтобы создать экземпляр, а затем снова упаковать этот экземпляр как компонент. Это немного похоже на то, что мы делали с _base компонентами в старые добрые времена (они вам больше не нужны, но это уже отдельная история). Теперь вы можете установить соединения из этого нового компонента и использовать экземпляры в качестве хедера. Все соединения будут унаследованы, но поскольку мы, по сути, просто используем экземпляр, упакованный в отдельный компонент, он также будет следовать всем изменениям основного компонента. Немного странно вникать в это в первый раз, но на деле все проще, чем кажется:

��Совет: если вы назовете компонент _name или .name, он не будет синхронизирован с вашей библиотекой компонентов. Это имеет смысл, так как вы хотите, чтобы синхронизировался только основной компонент навигации, а не ваша воронка, которая существует только для того, чтобы помочь вам создать прототип.

Спасибо Ридду, который недавно написал в Твиттере об этой технике (скорее всего, он называет ее по-другому). С тех пор я постоянно использую этот способ!

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

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

��Совет: к потокам также можно добавлять описания — они будут отображаться в режиме презентации. Мне нравится использовать это для руководства тестированием.

Просмотр потоков

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

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

17. А вы в курсе, что ссылки запоминают настройки прототипа?

Когда вы делитесь ссылкой из своего прототипа, он запоминает все настройки! Таким образом, вы можете установить размер на 100% или по размеру экрана, выбрать, хотите ли вы видеть потоки или нет, и, конечно же, хотите ли вы задать устройство просмотра. После этого он откроется для всех, кто нажмет на вашу ссылку, именно в том виде, который вы установили.

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

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

Теги

Присоединяйтесь к нашему сообществу!

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

5 плагинов Figma для оптимизации рабочего процесса

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

Сегодня мы посмотрим как раз на одну такую группу — 5 плагинов для оптимизации рабочего процесса в Фигме: автоматически стрелки для user flows, визуализация всех размеров и отступов, два плагина для работы с направляющими и мини-карта.

Arrow Auto

Крутейшая штука! Как известно, у Фигмы есть одна большая проблема при создании прототипов — вы не можете иметь одновременно больше одного сценария в одном документе. Грубо говоря, у вас всегда один прототип и нужно всегда переключать стартовый фрейм прототипа для демонстрации различных сценариев, что может мешать разным разработчикам увидеть последовательность фреймов в разных сценариях. При этом неудобно будет разделять один большой макет на разные документы для создания и прототипирования разных сценариев.

Один клик — и все стрелки в документе будут скрыты!

Как раз в этом и может помочь этот плагин, который позволит вам создать различные user flow в рамках одного документа. Из крутого — в настройках плагина можно разом зафиксировать или скрыть и показать все стрелки. Кроме того — если вы связали два объекта и затем случайно (или нет) изменили положение одного из них, то с помощью кнопки Update вы сможете автоматически перестроить все стрелки, они будут снова привязаны к объектам до изменения их положения.

Redlines

Плагин, который поможет в проработке дизайн-системы и в передаче её разработчикам (или другим дизайнерам внутри команды).

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

Minimap

Если вы когда-то играли в Warcraft, StarCraft (да, почему-то в первом названии все кроме первой буквы строчные) или любую Age of Empires или любую другую стратегию в реальном времени — то для вас описание этого плагина на названии и заканчивается.

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

Guides Inspector

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

Но из самого интересного — возможность создать из направляющих шаблоны и потом переиспользовать их. Внутри плагина уже есть наш с вами любимый Bootstrap в виде шаблонов на 12, 6 или 4 колонки, а так же шаблон сетки с ячейкой 16 на 16 пикселей. Из минусов — при выбора направляющей в списке в плагине нельзя увидеть её наглядно (сообщают, что это баг, и скоро пофиксят), а так же невозможность разом удалить все направляющие (а для этого у нас есть следующий плагин).

Clear Guides

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

Clear Guides поможет в один клик очистить все направляющие как внутри одного или нескольких фреймов, так и сразу во всем документе, что может помочь сэкономить вам много времени.

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

30+ полезных плагинов для Figma необходимых UX дизайнеру

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

Принципы работы

  1. Плагины по работе с графикой
  2. Плагины для генерирования контента
  3. Плагины для анимации
  4. Плагины по наведению порядка в проекте

Плагины по работе с графикой

Blobs и Get Waves

plugin плагин фигма figma svg фон

Blobs позволяет нам делать простые абстрактные фоны в виде клякс. А Get Waves позволяет генерировать разные волны, иногда используем для создания графиков.

Image Tracer

plugin плагин фигма figma svg растр изображение вектор

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

Color Kit

plugin плагин фигма figma цвет color uikit ui kit ui кит

Этот плагин позволяет сгенерировать темные или светлые оттенки нужного цвета с выбором шага. Помогает нам при создании UI кита для проекта.

Webgradients и uiGradients

plugin плагин фигма figma цвет color градиент gradient библиотека library

Плагины с большой библиотекой красивых градиентов.

TinyImage Compressor

plugin плагин фигма figma изображение image сжать экспорт export

Очень полезный плагин, который сжимает размер файлов лучше, чем экспорт по умолчанию из Figma. Мы часто используем его для оптимизации изображений под web сайты. После 15 сжатий файлов через TinyImage вам будет предложено приобрести лицензию.

Image Palette

plugin плагин фигма figma palette палитра color цвет

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

Stark и Contrast

contrast color plugin плагин фигма figma цвет

Эти плагины помогут посмотреть контрастность элементов по отношению друг к другу.

Remove BG

plugin плагин фигма figma фон fon image

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

Isometric

plugin плагин фигма figma isometric изометрия

Плагин позволяет отобразить объект в изометрии вам только требуется настроить угол.

Плагины для генерирования контента

Chart и Charts

plugin плагин фигма figma диаграммы charts

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

Figmoji

plugin плагин фигма figma эмоджи emoji

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

Iconify

plugin плагин фигма figma эмоджи emoji icon пиктограммы иконки

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

Unsplash

plugin плагин фигма figma unsplash фото фотографии photos

Unsplash — это большая библиотека фотографий, с помощью которой можно быстро найти и добавить фотографию прямо в проект.

Mapsicle и Map Maker

plugin плагин фигма figma map карта

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

Table Generator

plugin плагин фигма figma таблицы tables

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

Content Reel

plugin плагин фигма figma контент content avatar аватар

С помощью этого плагина можно быстро заполнить сайт контентом. Например заполнить имя, фамилию, телефон, время и дату, быстро добавить аватар и тд… Один момент весь контент на английском.

Chroma

plugin плагин фигма figma палитра palette цвет color

Теперь можно добавить цвет в цветовую палитру в один клик. Вам просто надо выбрать нужный объект с цветом и запустить плагин. Цвет появится в библиотеке стилей с названием выбранного объекта.

Wire Box

plugin плагин фигма figma ‪вайфрейм warframe

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

Плагины для анимации

GiffyCanvas

plugin плагин фигма figma ‪анимация animation gif

GiffyCanvas позволяет быстро создать gif внутри Figma. Нам просто надо выбрать 2 и более макетов, поставить время интервала и количество циклов.

LottieFiles

plugin плагин фигма figma ‪анимация animation gif

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *