Framer Design Pages. Что это такое?

В нашем выпуске дизайн-новостей мы упоминали это обновление no-code инструмента Framer. Довольно смелый шаг в сторону дизайна Framer совершили, но давайте обо всем по порядку.

Что такое Framer?

Framer — это ноу-код инструмент для создания сайтов. По сути это один из конструкторов, наравне с Webflow и Wix. Мы уже как-то работали во фреймер в одном из наших видео. И на курсе Карьера дизайнера мы рассматриваем Framer, как один из инструментов для создания своего портфолио.

Интерфейс рабочей среды Framer

Framer позволяет собрать ваш дизайн, без использования кода и опубликовать его в интернеты. Хорош Framer тем, что в нем интуитивно понятный интерфейс. Сравнивая его с тем же Webflow, на мой взгляд, он удобнее и проще в освоении, т.к. Отдаленно напоминает интерфейс Figma с которым дизайнеры привыкли работать. И вот тут самое интересное.

Что такое Design pages во Framer?

Коротким ответом на этот вопрос будет — это Figma внутри Framer. Только с интерфейсом и функциями Framer. 

Интерфейс Design pages во Framer

И да, это действительно так. Что можно делать в Design Pages во Framer, загибайте пальцы:

• Создавать фреймы, шейпы и свободно их перемещать
• Создавать Auto layout и формировать сложную вложенность (хоть и с немного другими настройками нежели чем в Figma)
• Создавать компоненты и их варианты

А что ещё для счастья хорошего интерфейса надо? 🙃

Киллер фичей Framer Design Pages является перенос страницы в редактор кода. Т.е. Мы создали дизайн, как в Figma, и одним щелчком можем его перенести в основной редактор Framer, где готовятся страницы для публикации. 

Функция переноса фреймов из Design pages в основной редактор

Если у нас хорошо и правильно настроены все Auto layout, нам останется только создать брейкпоинты и подстроить немного макеты. И можно публиковать наш сайт. А я надеюсь вы умеете в Auto layout, если нет, то залетайте на бесплатный курс Figmaster, там мы обучаем Figma с полного нуля.

Design pages конкурент Figma?

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

Тем более что у Figma есть Figma Make, и получается, что Figma идет в no-code, а Framer из no-code делает шаг в сторону дизайна. И у нас с вами получается 2 хороших продукта. Framer, который более гибкий в верстке и Figma, которая более гибкая в дизайне.

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

Design pages ещё один повод для того, чтобы начать учить верстку и работу с конструкторами. Чем больше инструментов вы будете знать, тем ценнее вы будете как специалист. 

Развивайтесь и делайте этот мир лучше при помощи дизайна вместе с нами!