Почему не нужно делать крупный сайт на конструкторе?

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

Прототипирование в Figma работает очень просто, но не всё в нём сделано удобно. Например, вам не дадут примеры хорошей анимации, а адаптация макета под игровой геймпад — мучительно долгая. В этом вам помогут плагины, которые расширяют функционал графического редактора.

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

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

Eezin

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

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

Как пользоваться

1. Скачайте плагин по ссылке.
2. Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Eezin.
3. В появившемся окне выберите нужную анимацию. У каждой есть окно с превью, поэтому перебирать их вслепую вам не придётся.
4. Над превью нажмите на иконку.
5. Выберите объект прототипа, который должен быть анимирован. В настройках Animation вместо Instant должно быть Desolve или Smart animate.
6. Вместо Linear или Ease укажите Custom. В появившемся окне под графиком нажмите Ctrl (⌘) + C.
7. Запустите прототип и проверьте результат.