Framer Design Pages. Что это такое?
Framer составляют конкуренцию Figma или просто улучшают свой продукт? Новый функционал внутри Framer, в этой статье разбираемся для чего и как их использовать?
В нашем выпуске дизайн-новостей мы упоминали это обновление 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 ещё один повод для того, чтобы начать учить верстку и работу с конструкторами. Чем больше инструментов вы будете знать, тем ценнее вы будете как специалист.
Развивайтесь и делайте этот мир лучше при помощи дизайна вместе с нами!
