11 сентября, 2018
В первой части мы знакомились с интерфейсом, пришло время посмотреть, что может Framer X в работе с react-компонентами.
После анонсов я ждал, что 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 в деле, поделитесь своими наблюдения на фейсбуке.
