11 сентября, 2018

Знакомство с Framer X. Часть 2

В первой части мы знакомились с интерфейсом, пришло время посмотреть, что может Framer X в работе с react-компонентами.

Андрей Телего
Получил ранний доступ к тесту бета-версии Framer X.

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

Для создания компонента при помощи кода Framer X отправляет нас в Visual Studio, где открывается заготовка компонента.

По умолчанию создается классический Hello World. В структуре кода можно выделить основные разделы: стили и разметка.

При создании нового компонента появляется отдельный файл со стилями и разметкой.

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

Меняю содержимое получившегося компонента.

Заменяю строчку кода со словами Hello World на селектор из двух вариантов.

Сохраняю файл в Visual Studio и возвращаюсь к Framer X. Теперь селектор работает в режиме просмотра.

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

Времени на создание таких компонентов уходит столько же, сколько на их реализацию в коде. Получается двойная работа — сначала надо написать код в дизайн-макете, а потом разработчик напишет код в процессе реализации.

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

Идея Framer X заключается не в том, чтобы генерировать код для вас, а в том, чтобы использовать код, который вы (или кто-то другой) написал. Автоматически сгенерированный код почти никогда не завершён в производстве, так что лучше иметь инструмент чтобы использовать уже готовый код. Если у вас уже есть компоненты React, они должны работать в Framer X с минимальными усилиями.

Подключение внешних библиотек компонентов пока не реализовано. В дальнейшем разработчики обещают добавить эту возможность.

Без продвинутой работы с компонентами Framer X превращается в обычный графический редактор, ради которого не стоит отказываться от привычных инструментов. Как инструмент, который будет создавать react-библиотеки, Framer X не стоит рассматривать. Он скорее подойдет для использования уже готовых дизайн-систем и тесного взаимодействия с разработчиками.

Наблюдаем за развитием, но работаем пока в Sketch и Figma.

 

p.s. Ждем, пока разработчики доработают подключение библиотек, чтобы подготовить третью часть материала.

Если уже успели попробовать Framer X в деле, поделитесь своими наблюдения на фейсбуке.

11 сентября 2018
Поделиться