What is Framer?

Framer is an interactive design tool for websites and prototyping. It excels at building entire marketing sites, landing pages, online campaigns and much more. It supports every part of the design process, from visual mockups to interactive prototypes, but its unique strength is publishing directly from the canvas.

Advantages

You should use Framer if these are important to you:

• Speed. Framer is the fastest tool to build sites with, because you can ship your design immediately, instead of having to rebuild your design in code or a second tool.

• Empowerment. Framer is an end to end tool that lets everyone design and ship web sites. You don’t need a frontend team or web programming course. Just basic canvas skills.

• Quality. Framer web sites typically have nice scroll effects, responsive breakpoints, videos, working forms and everything that you can expect from the best web sites.

• Scalability. Framer can support your entire marketing stack, integrate with all the services you might need for tracking and conversion and comes with world class hosting.

• Complete. Framer has no constraints. Express anything on the freeform canvas or in the content editor. Collaborate in realtime. Mix in code if you need something custom.

We believe Framer makes making web sites a lot of fun and helps your company be much more effective on the web.

Examples

Don’t take our word for it. Just take a look at all the amazing things built with Framer in our gallery. We hope to add your creation soon.

History

Framer has been around since 2016:

• Framer started as a technical prototyping tool for designers who could code.

• The second generation of Framer added a visual canvas so everyone could use it and became a collaborative web application.

• The current generation of Framer enables you to ship your designs directly from the canvas to production.

Framer — One punch man ✊

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

296 показов
333 открытия

Технология 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, но все же знайте, что там они тоже есть.

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

Дизайн и анимации на основе кода: создаём прототипы во Framer Статьи редакции

Руководство по эффективному применению инструмента.

5.6K открытий

Конспект переводчика Николая Геллара.

Framer — это программа для прототипирования и дизайна, основанная на коде. В статье мы рассмотрим основные концепции удобного прототипирования для дизайнеров и разработчиков. И попробуем воспроизвести один из переходов, найденных в приложении Design+Code.

Скачайте файлы проекта, чтобы следовать этому руководству. Для начала работы нужно открыть файл DesignCode-Chapter-New.framer , либо смотрите уже готовое решение.

Интерфейс Framer

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

Вкладка «Дизайн»

Может быть разбита на четыре основные части.

1.Боковая панель

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

2. Панель слоёв

Как и большинство других инструментов проектирования, Framer имеет панель слоёв. Однако есть некоторые ключевые отличия. Рассмотрим их более подробно позже, чтобы понять, как работают слои во Framer.

3. Рабочая область

Рабочую область можно использовать для создания артбордов для разных телефонов, планшетов, часов, рабочих столов и даже телевизоров.

4. Панель свойств

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

Вкладка «Код»

Может быть разделена на пять частей.

1. Боковая панель

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

2. Панель слоёв

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

3. Редактора кода

С помощью Framer легко начать кодить. Он имеет привлекательную и полезную подсветку синтаксиса, нижняя часть области редактора зарезервирована для отображения ошибок, которые есть в коде. Ещё есть полезная функция — Smart Autocomplete (понимает код и даёт подсказки с учётом контекста).

4. Окно предварительного просмотра

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

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

5. Панель свойств

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

Во Framer есть функция Auto-code, которая сохраняет код с визуальными изменениями. Если изменить слой из окна предварительного просмотра, появятся изменения ещё в двух местах: на панели свойств и в области редактора кода.

Основы дизайна

Основные сведения о Framer.

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

Технически во Framer нет групп. Вместо этого слои «вложены», как div в веб-странице. Взгляните на артборд Page2. Он имеет несколько дочерних слоёв. iOSGuide находится в верхней части этого дерева и сам содержит несколько дочерних слоёв. iOSGuideImage содержит заголовок и основной текст.

Эти текстовые слои вложены, и хотя они отображаются на панели слоёв ниже iOSGuideImage, они находятся над изображением и всё ещё видны на холсте.

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

Адаптивный макет

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

Предварительный просмотр ресайза

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

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

Основы кода

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

Слои во Framer не похожи на слои в Sketch. При создании их можно стилизировать и добавлять изображения, тексты и видео. Один слой может разделяться на несколько слоёв, есть функция анимации. Это строительные блоки Framer.

2. Анимация

Анимация — это то, что оживляет слои. Можно анимировать свойства слоя: цвет фона, высоту, ширину, размер, непрозрачность, радиус рамки и так далее.

3. Состояния

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

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

Реализация

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

Первая часть кода будет сосредоточена на настройке различных элементов на артборде, но в частях «Переход 1» (открытие события) и «Переход 2» (закрытие события) мы будем работать над сворачиванием и разворачиванием анимаций соответственно.

Перед переходом к весёлой части зададим настройки для урока.

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

И, наконец, мы зададим состояния по умолчанию для кнопок «Play» и «Close».

Вынесем за пределы холста кнопку «Close», затем уменьшим кнопку «Play» до .5 и зададим непрозрачность 0.

Выделим весь этот код, щёлкнем правой кнопкой мыши и выберем «Fold». Вот где функция Framer «Code Fold» действительно проявляет себя. Это создаст новый раздел для этого кода.

Хорошо держать его в стороне от основного кода, чтобы он был чистым.

Компонент страницы (PageComponent)

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

Сделаем его дочерним слоем PageView, который является слоем из артборда Chapters. Затем устанавливаем положение Y. Поскольку у PageComponent теперь есть PageView как родительский слой, любые значения позиции, которые он задаёт, относятся к его родительскому объекту.

Когда мы устанавливаем Y-позицию на 60, то на самом деле мы делаем отступ 60px вниз от верхней части слоя PageView. Чтобы компенсировать это позиционирование, мы установили высоту PageComponent с простым вычислением. Это быстрый способ установить значение свойства слоя, если вы не хотите устанавливать его вручную.

Поскольку этот PageComponent должен прокручиваться только по горизонтали, мы установили scrollVertical в значение «false». Установка contentInset дает страницам некоторый запас слева и справа. Не стесняйтесь играть с некоторыми из этих значений, чтобы увидеть, как они меняют макет.

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

Код внутри скобок — это слой или артборд, который мы хотим установить в качестве содержимого этой страницы.

При подготовке материала использовались источники:
https://www.framer.com/learn/what-is-framer/
https://vc.ru/services/642776-framer-one-punch-man
https://vc.ru/design/34499-dizayn-i-animacii-na-osnove-koda-sozdaem-prototipy-vo-framer