{"id":14271,"url":"\/distributions\/14271\/click?bit=1&hash=51917511656265921c5b13ff3eb9d4e048e0aaeb67fc3977400bb43652cdbd32","title":"\u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043d\u0430\u0442\u0438\u0432\u043e\u043a \u0438 \u0441\u043f\u0435\u0446\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0432 vc.ru \u2014 \u043d\u0430\u0439\u0434\u0438\u0441\u044c!","buttonText":"","imageUuid":""}

Framer - One punch man ✊

Framer - это инструмент для проектирования интерфейсов и создания прототипов веб-сайтов и приложений. Компания Framer была основана в 2014 году Коеном Бандершем и Йорном ван дер Вейденом в Амстердаме, Нидерланды.

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

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

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

В нашу тройку лидеров вошли Framer, Webflow и Readymag.

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

Так как нам была важна скорость разработки, мы выбрали именно этот вариант.

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

Все и правда стало на свои места, осталось только нажать опубликовать, но … после нажатия на заветную кнопку Framer сообщает нам, что у нас слишком большое кол-во контента, которое мы хотим отобразить…

Стоит сказать немного о том, что из себя представлял лендинг, десктоп версия была суммарно равна 22000px по высоте, с большим колличеством SVG изображений и блоков с информацией, важно упомянуть, что в прототипе не были настроены компоненты и каждый блок существовал сам по себе, но в целом, в самой странице не было ничего необычного.

Так как самим контентом мы пожертвовать не могли, то встал очевидный вопрос, а как собственно решить тогда эту проблему? После прочтения документации, которую предоставляет Framer, мы поняли, что необходимо искать какие-то новые пути.

Иииии….

Конечно же компоненты!

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

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

Но все же основной вопрос оставался открытым, поможет ли это вообще?

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

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

Увидели уведомление об успешной загрузке сайта!

Выдохнули…Работает!

Верстка

Стоит немного рассказать о верстке элементов. Она также учитывается. Если в фигме вы использовали layout-блоки, то внутри Framer-a вы получите relative-блоки с соответствующим позиционированием.

Breakpoints - Framer предлагает использовать отдельные блоки для медиа-запросов (так же как вы обычно реализуете верстки для различных устройств внутри figma)

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

Анимации

Сильная сторона Framer - это то, что под капотом он использует легковесную библиотеку “motion.js”, которая позвояет создавать всевозможные и оптимизированные анимации.

Интерфейс Framer позволяет достаточно просто реализовать задуманное. Вы просто выделяете нужный блок и на вкладке эффектов выбираете подходящий тип анимации.

  • Appear
  • Hover
  • Press
  • Loop
  • Drag
  • Scroll Animation
  • Scroll Speed
  • Scroll Variant

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

Кастомные фишки или почему разработчик все еще необходим?

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

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

Позволю добавить сразу совет, что если у вас есть возможность, страйтесь реализовать связанную логику в одном кодовом компоненте, так как возможность передачи пропсов как таковых во Framer-e отсутствует. В замен этого конструктор предлагает использовать useEffect() для отслеживания по #id необходимых элементов и дальнейших операций с ними.

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

Выводы

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

В нашем же случае, мы решили поставленную задачу и остались довольны результатом. Чего желаем и вам!

Команда Solves

0
2 комментария
Ваня Собянин

Сайт на который ссылка под Solves, я так понял, на Framer и был сделан?

Ответить
Развернуть ветку
Mike Amir
Автор

сайт, который реализован на фреймер, загрузим позже, после выхода продукта в продакшн

Ответить
Развернуть ветку
-1 комментариев
Раскрывать всегда