Лента  •  30 августа 2018👀 686

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

Наш дизайнер Андрей уже успел поработать с Framer X и сравнить его с другими редакторами. В этой статье он рассматривает интерфейс и функционал новинки.

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

Framer X, по обещаниям создателей, должен подружить дизайнерские макеты и код разработчиков. Для этого он обещает соединить в одном инструменте возможность создавать дизайн макеты и React.js.

На первый взгляд присутствует все, что нужно:

  • работа с вектором,
  • стили,
  • умные инструменты выравнивания,
  • богатый встроенный магазин компонентов,
  • задатки прототипирования и анимации.

Интерфейс Framer X

Слева располагаются инструменты, справа — настройки отступов, размеров и стилей слоя. Набор вполне стандартный, как и во многих других редакторах.

Не понравилось, что нет разделения на рабочие среды, и разделить проект на несколько подпроектов не получится

На векторных шейпах, текстовых блоках и ссылках для прототипов подробно останавливаться не буду, потому что эти инструменты стандартны. Внимания заслуживают два — Stack и Scroll.

Инструмент Stack

Stack напоминает навороченную версию Repeat Grid из Adobe XD. Внутри компонента Stack могут находится другие элементы дизайна и при перестановке блоков общие отступы между ними сохраняются. Это позволяет избавиться от рутины.

Инструмент Scroll

Scroll помогает показать принцип работы скролящихся областей. Для примера перерисовал макет, выделил область, в которой мне нужен скролл, и указал отображаемый контент.

Компоненты

Framer работает с компонентами двух видов:

  • графические, в терминологии Framer X — from Design
  • описанные кодом React компоненты — from Code.

Последние можно написать самому или добавить из магазина компонентов, встроенного во 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 можно на фейсбуке.

Right

+375 29 550−58−27 ПЧТ ФБ ИГ ТЛГ О компании