30 августа, 2018
Наш дизайнер Андрей уже успел поработать с Framer X и сравнить его с другими редакторами. В этой статье он рассматривает интерфейс и функционал новинки.
Framer X, по обещаниям создателей, должен подружить дизайнерские макеты и код разработчиков. Для этого он обещает соединить в одном инструменте возможность создавать дизайн макеты и React.js.
На первый взгляд присутствует все, что нужно:
Слева располагаются инструменты, справа — настройки отступов, размеров и стилей слоя. Набор вполне стандартный, как и во многих других редакторах.
Не понравилось, что нет разделения на рабочие среды, и разделить проект на несколько подпроектов не получится
На векторных шейпах, текстовых блоках и ссылках для прототипов подробно останавливаться не буду, потому что эти инструменты стандартны. Внимания заслуживают два — Stack и Scroll.
Stack напоминает навороченную версию Repeat Grid из Adobe XD. Внутри компонента Stack могут находится другие элементы дизайна и при перестановке блоков общие отступы между ними сохраняются. Это позволяет избавиться от рутины.
Scroll помогает показать принцип работы скролящихся областей. Для примера перерисовал макет, выделил область, в которой мне нужен скролл, и указал отображаемый контент.
Framer работает с компонентами двух видов:
Последние можно написать самому или добавить из магазина компонентов, встроенного во Framer X.
Так выглядит магазин компонентов во Framer X, но пока там только бесплатные, и не все они сделаны как надо
Компоненты, которые сделаны хорошо, гибко адаптируются под контент, например, меняется вид отображения кнопок, табов, свитчеров.
Компоненты из кода могут вести себя довольно гибко. Например, если в компоненте Logo, из встроенного магазина, поменять название компании, то автоматом изменится логотип
Чтобы создать такие компоненты понадобятся знания React.js.
У Framer нет встроенного редактора кода, для редактирования он перенаправляет пользователя в Visual Studio.
Компоненты from Design бедные по возможностям. Можно только создать master-компонент и на основе его — instant-компонент. Из master в instant подтягивается только размер, начертание и базовый текст. Если в instant-компоненте заменить цвет, то уже сбросить на цвет мастера не получится.
Работа с графическими компонентами уступает символам Sketch или Figma. Сделать компонент с вложенностью из нескольких компонентов при помощи графического редактора не получилось. Максимум в дочерних компонентах можно поменять цвет, текст и форму скругления.
Дочерний компонент нельзя сбросить до состояния мастер-компонента. UPD: Разработчики быстро вносят исправления, на момент публикации статьи возможность сбросить компонент до состояния master, появилась.
Нельзя подменять вложенные компоненты внутри другого компонента, как это реализовано в Sketch.
В графическом редакторе нельзя сделать, как в Sketch, компонент инпута со всеми вложенными состояниями.
Framer X не умеет импортировать файлы Sketch :(
В следующей статье поделюсь впечатлениями от прототипирования и создания компонентов в коде, чтобы разобраться на практике, сможет ли Framer X навязать борьбу Sketch и Figma.
Задать вопрос или похоливарить по поводу Sketch, Figma и Framer X можно на фейсбуке.
