За последние 2 года мы превратили Framer в обширный продукт, который поддерживает, цитируем себя, “дизайн без границ”. Но с таким функциональным набором инструментов возникает некоторая степень беспорядка. В апреле мы выпустили редизайн интерфейса Framer, который направлен на продвижение симбиоза между кодом и рабочей областью. Вместо того, чтобы добавлять что-то к уже переполненной панели инструментов, мы удостоверились в том, что эта модернизация проста и понятна. Генеральная уборка никогда не выглядела так хорошо.
Строительные блоки
Для любого новичка Framer лучше всего понимается как группа строительных блоков. Вы начинаете с рисования слоя (layer), затем добавляете состояние (state) или анимацию (animation), за которым следует событие (event) – обычно нажатие или клик. Эти четыре основных понятия просты и понятны всем, и они были разработаны, чтобы помочь ускорить ваш рабочий процесс. Эти базовые блоки всегда были доступны с помощью простых функций Auto-Code. Однако из-за того, что мы вложили их в меню вставки на перегруженной панели инструментов, пользователи не могли интуитивно найти этот простой инструмент. Чтобы способствовать лучшей навигации, мы переместили эти основные структурные блоки Framer наверх слева, в выпадающее меню чистой боковой панели для удобства ввода. Теперь все самые важные функции интегрированы непосредственно в редактор. Пункты Импорт из Sketch, Docs и Error Inspecting также перемещены в левую нижнюю часть боковой панели инструментов. Хотя они и ключевые элементы вашего процесса прототипирования, они не понадобятся вам так же часто, как ваши основные строительные блоки. Инспектирование теперь удобно расположено рядом с отображением сообщений об ошибках, что позволяет легко отладить ваш прототип.
Рабочая область и код объединены
Возможно это самое главное, мы покончили с классическим разделенным экраном Framer. Конечно, выделение равного пространства для кода и холста, работало в течение длительного времени. Но в конце концов, члены нашего сообщества сообщали о нескольких вопиющих проблемах: ограниченная гибкость в просмотре, невозможность увидеть прототипы разных разрешений, заблокированное соотношение устройств, ограниченное использование рабочих процессов с двумя экранами и т.д. Поэтому мы решили, что пришло время навсегда разделить их и передать вам контроль над вашим рабочим пространством. Результат – функционально настраиваемый и одновременно радующий глаз интерфейс. Если вы предпочитаете сохранять компактность среды дизайна, вы все равно можете перетащить холст обратно в Framer chrome. Он щелкнет в правом нижнем углу вашего редактора, удобно расположившись между вашим кодом и панелью слоев. По умолчанию используется режим холста, но мы сделали переключение устройств простым – перескакивание между устройствами непосредственно на холсте или выбор из иконки меню. Нажмите, чтобы повернуть, увеличить, перезагрузить, выбрать указатель или устройство. Нужно передать проект на рассмотрение? Доступна стандартная зеленая кнопка максимального увеличения, которая автоматически открывает в полноэкранный режим просмотра в выбранном вами устройстве.
Все на своих местах
Когда придет время проверить проект и поделиться им, вы увидите, что предварительный просмотр Cloud и Mirror был перемещен в верхний правый угол. Это подходит для функций, которые необходимы только в конце общего рабочего процесса проектирования. В этом обновлении мы также освежили наше окно приветствия, обеспечив легкий доступ к нашим лучшим ресурсам. Также в рамках наших усилий по снижению кривой обучения мы предоставили вам четыре готовых примера. Вместе с простыми встроенными в приложение инструкциями для новичков, каждый пример выступает в качестве самостоятельного набора для начинающих, чтобы помочь им понять простой код, лежащий в основе популярных шаблонов взаимодействия. 
Перевод статьи Framer Team
Топ коментарі (0)