С радостью представляем Auto-Code с принципиально новым подходом к дизайну в коде во Framer. Код - потрясающий инструмент для выражения сложных взаимодействий, но есть лучшие способы творить визуальный дизайн. Теперь Framer предоставляет обе возможности в лучшем виде - мощь кода в сочетании с простотой визуального редактирования. Framer разработан с целью предоставить вам лучший способ выражения собственных идей. Разработанный продукт-дизайнерами, этот инструмент помогает сделать любой концепт максимально реалистичным. Дизайны невероятно сложны. Статических макетов и простых сценариев часто недостаточно. С Framer мы разработали способ визуализировать, как продукт отвечает на действия пользователя, как он ощущается.
Но дизайн эволюционирует. И инструменты, используемые для дизайна, также должны развиваться. Мы предоставляем оптимизированный инструмент для заполнения пробела между визуальным дизайном и дизайном взаимодействий. Это лучший способ разрабатывать продукты. Понимая ваш код, мы можем предложить визуальный интерфейс для простого процесса дизайна. Это позволяет прорабатывать больше идей в более быстрой манере. И вам не придется жертвовать гибкостью Framer.
Дополнительным преимуществом является то, что Framer стал гораздо проще в изучении и работе. Коду нужно учиться, и самое начало этого процесса может быть довольно трудным. Но все же мы твердо верим, что это один из лучших дизайн-инструментов. До сегодня вы выбирали простые дизайн-инструменты, чтобы избежать использования кода. Но теперь все изменилось. Новый Framer делает высочайший уровень дизайна и прототипирования доступным каждому. Давайте детальнее взглянем на все новые возможности.
Код еще никогда не был таким простым
Начнем без написания единой строки кода. Мы добавили новое меню Insert, которое позволяет вам быстро вставить слои (Layers), состояния (States) и события (Events). Framer напишет первые строки кода за вас. Вы можете спокойно сконцентрировать силы на дизайне.
Работу удобно начинать с меню Insert. Новая кнопка + на панели инструментов позволяет быстро вставить слой. Как по волшебству, в просмотрщике появится слой, и слева появятся соответствующие строки кода. Состояния можно вставить тем же способом. И в такой способ вы можете точно реализовать любую дизайн-идею разными методами.
Во Framer появилась новая панель по центру со всеми параметрами для редактирования. Это позволяет визуально настраивать каждый слой вместо редактирования кода. Вы можете выбрать редактирование слоев прямо на канвасе. Чтобы перейти в режим редактирования для любого слоя или состояния, просто кликните на маленькую иконку рядом с кодом. Теперь можно делать любые настройки в панели свойств. Суть в том, что вы можете работать, как вам нравится - напрямую на канвасе, в панели свойств или в коде. Выбирайте наиболее подходящий способ.
Чтобы добавить интерактивности, начните с вставки события (Event) из меню Insert. Событием может быть касание экрана или скроллинг, а также более сложные жесты типа сжимания и растягивания. Все они перечислены в меню Insert. При вставке элемента Framer пропишет соответствующий код. Более подробно по событиям можно прочитать в документации.
Визуальный дизайн взаимодействий
Даже если вы профи кодинга, иногда проще передвинуть слой мышкой, чем вводить координаты. Код не всегда самый удобный инструмент. В зависимости от цели, вы должны владеть разными средствами. И теперь вы это можете себе позволить.
С помощью новых инструментов визуального дизайна, просто выделите слой и подвиньте его на канвасе в нужном направлении. Вы можете изменять размер, поворачивать его, менять позицию, и все эти изменения Framer тут же отразит в коде. Удерживайте Shift для пропорционального ресайза или Option+Shift для ресайза из центра, по аналогии с другими дизайн-приложениями. В качестве ориентиров для выравнивания добавлены гайды. Работайте более интуитивно, не жертвуя гибкостью, которую дает код.
В панели свойств можно легко выбрать цвет, установить радиус границ или добавить падающую тень. Все свойства доступны под рукой, так что вы с легкостью можете настроить любую деталь. Продвинутые фильтры помогают настроить размытость, яркость и контраст. И можно даже вращать в 3D!
По мере оттачивания навыков вы оцените преимущества комбинирования базового программирования и визуальных манипуляций. Loop-редактирование позволяет создавать множество слоев одним действием и одновременно их редактировать. Изменение любого элемента в петле отобразится на всех остальных слоях этой петли. Добавьте 3D-вращение или даже скролл-компонент, код всегда будет синхронизирован с картинкой.
Это только начало! С Auto-Code возможности просто бесконечны. Это только небольшая часть того, что можно делать с дизайном с помощью кода.
Если у вас уже есть лицензия Framer, для вас это обновление будет бесплатным. Все лицензии Framer подразумевают бесплатные обновления в течение года. Для более детальной информации посетите страничку с расценками.
Для команды Framer очень важен фидбек от пользователей, который позволяет совершенствовать продукт. Делитесь мнениями по поводу новых возможностей. Посетите официальную ленту Twitter и Facebook-сообщество Framer.
Найновіші коментарі (0)