Framer X позволяет вам выразить многие сложные взаимодействия прямо с холста, такие как прокрутка и подкачка страниц. Но что, если вы хотите пойти дальше? Часто вам захочется создавать взаимодействия, которые не может выразить ни один визуальный инструмент, — взаимодействия, использующие физику, реальные данные и логику, или что-либо еще, что вы можете себе представить.
Сегодня мы рады запустить Playground что позволяет писать собственные компоненты в коде без ограничений. Это наш самый большой выпуск 2019 года на сегодняшний день, полностью ориентированный на работу с кодом прямо из Framer X. Ключевыми частями этой интегрированной среды являются:
- Новый встроенный редактор кода
- Полная библиотека прототипов
- Лучшая в своем классе документация
Стоит отметить, что Playground не является вашим обычным редактором кода. Мы понимаем, что как дизайнер вы требуете другого рабочего процесса для кодирования, и Playground было создано с учетом этого. Большинству дизайнеров нужна прямая обратная связь, способ свободно исследовать и играть, проверяя идеи, общий аспект творчества. Игровая площадка позволяет сразу начать работу, не блокируясь сложной конфигурацией или настройками. Все работает "из коробки", с достаточным руководством и поддержкой, чтобы дать вам возможность делать то, что вы делаете лучше всего — создавать. Продолжайте читать, чтобы узнать больше обо всем, что включено в выпуск Playground.
С сегодняшнего дня вы увидите новую панель в Framer: Code . Это то место, где будут жить все ваши компоненты кода и переопределения, что позволит вам определять взаимодействия с высокой точностью, даже не покидая Framer X.
Начните с нуля или импортируйте дизайны из Canvas. Импорт компонентов дизайна позволяет добавлять интерактивность к существующим проектам с помощью кода, сохраняя исходные компоненты в редактируемой форме на холсте.
На вкладке «Код» отображается содержимое ваша папка code и позволяет вам также создавать новые компоненты кода. Даже ваша папка иерархия отображается и поддерживается. Нажмите Новый чтобы создать новый компонент, затем нажмите CMD + P чтобы запустить предварительный просмотр. Или установите примеры по умолчанию, доступные на новой панели «Код», чтобы изучить основные концепции.
Библиотека Framer — это то, что приводит все в действие. Думайте об этом как о наборе помощников (построенных на React) для разработки основанной на физике анимации, сенсорных жестов и общих компонентов для прокрутки, разбиения по страницам и потоков интерфейса. Это разработано, чтобы позволить новичкам исследовать уникальные взаимодействия с меньшими границами и большей поддержкой. Мы перестроили Библиотеку с нуля, предоставляя больше функциональных возможностей, чем когда-либо прежде. Вы можете установить библиотеку и использовать ее бесплатно в любом проекте, где угодно. Прелесть использования его в Framer X заключается в том, что он поставляется в комплекте с каждым новым проектом по умолчанию, что позволяет вам начать исследовать интерактивные идеи с нулевыми настройками.
Библиотека охватывает все основы, которые вы ожидаете, например Макет, Цвет, Анимация, Варианты, Жесты, Преобразования и многое другое. Но помимо этого, он позволяет создавать бесконечное сочетание уникальных компонентов, анимаций и взаимодействий, от пользовательских эффектов страниц и последовательных анимаций до 3D-перетаскивания.
Начните с просмотра этого вводного обучающего видео на Framer Playground. Вы узнаете, как создавать новые компоненты кода, связь между холстом и кодом, как просматривать свою работу и многое другое.
Мы также создали совершенно новую документацию по API, которая описывает, как именно использовать библиотеку Framer. Документация разделена на три части: «Начало работы», «Библиотека» и «Framer X». В первом разделе приведены примеры и руководства. Вторая часть охватывает все свойства библиотеки, методы и компоненты, в то время как последний раздел охватывает все связанные с библиотекой темы, связанные с Framer X, такие как элементы управления свойствами. Начните обучение сегодня или внесите свой вклад в эту документацию с открытым исходным кодом.
Ниже вы найдете несколько полезных ссылок, чтобы узнать больше. Не стесняйтесь обращаться в Twitter или присоединиться к нашему сообществу Facebook, если у вас есть какие-либо вопросы. Мы невероятно рады, что вы можете взять все это в свои руки, и мы не можем дождаться, чтобы увидеть, что вы создаете.
Загрузка...
