От дизайна до удобного для разработчиков кода React за считанные минуты с Anima

Это дружеская спонсируемая статья, написанная при любезной поддержке наших дорогих друзей из Anima, которые помогают вам создавать полностью интерактивные высококачественные прототипы с помощью Sketch, Figma или Adobe XD. Спасибо!

Обещание бесшовного дизайна для перевода кода восходит к ранним конструкторам страниц WYSIWYG. Несмотря на замечательную цель, их самым большим недостатком (среди многих) был ужасный код, который они генерировали. Скептицизм сохраняется и по сей день, и всякий раз, когда эта идея появляется снова, самые большие опасения всегда связаны с качеством и ремонтопригодностью кода.

Это вот-вот изменится, поскольку новые продукты сделали большой скачок в правильном направлении. Их конечная цель — автоматизировать процесс перехода от проектирования к коду, но не за счет качества кода. Один из этих продуктов, Anima, пытается, наконец, преодолеть разрыв, предоставляя полноценный дизайн для платформы разработки.

Что такое Анима?

Anima — это инструмент от дизайна до разработки. Он направлен на то, чтобы превратить процесс передачи дизайна в непрерывное сотрудничество. Дизайнеры могут использовать Anima для создания полностью адаптивных прототипов, которые выглядят и работают точно так же, как готовый продукт (кодирование не требуется). Разработчики , в свою очередь, могут взять эти проекты и экспортировать их в удобный для разработчиков код React/HTML. Вместо того, чтобы кодировать пользовательский интерфейс с нуля, они могут сосредоточиться на логике и архитектуре.

Он делает это с помощью плагина, который напрямую подключается к вашему инструменту дизайна и позволяет настраивать проекты и синхронизировать их с веб-платформой Anima. Именно здесь остальная часть команды может получить доступ к прототипу, обсудить его и выбрать полезные спецификации или активы. Помимо функций совместной работы, он дает разработчикам преимущество благодаря сгенерированному коду.

Это может иметь большое значение в традиционном танце между дизайнерами и разработчиками. Он хранит все в одном месте, синхронизирует и позволяет обеим сторонам вносить изменения с помощью кода или инструментов дизайна.

Установка плагина и настройка проекта

Начать работу с Anima просто. Сначала вам нужно создать учетную запись, а затем установить плагин. Хотя я буду использовать Figma для этого пошагового руководства, Anima поддерживает все основные инструменты дизайна: Sketch, Figma и Adobe XD.

• Анима для скетча
• Анима для Фигмы
• Анима для Adobe XD

Как только это будет сделано, убедитесь, что вы создали проект на платформе Anima — там наши дизайны появятся, когда мы их синхронизируем.

Сам плагин разделен на три основных раздела, каждый со списком параметров. Большая часть того, что мы будем делать, — это просто выбрать один из этих вариантов, а затем применить определенный слой или кадр в Figma .

Создание адаптивного прототипа

Для целей статьи мы разработали процесс онбординга, который будет преобразован в интерактивный прототип. На данный момент мы подготовили экраны для трех наиболее распространенных точек останова и связали их вместе, используя функции прототипирования Figma.

Одна из интересных вещей, которых мы можем достичь с помощью Anima, — это создание прототипов, которые подходят для всех размеров экрана. Традиционные прототипы, сделанные из кликабельных изображений, статичны и часто не работают при разных размерах экрана.

Для этого нажмите «Точки останова», и Anima запросит у вас кадры, которые вы хотите соединить. Выберите все кадры, чтобы добавить их в качестве точек останова. Затем подтвердите свой выбор, нажав «Готово».

Когда вы будете готовы, нажмите «Предварительный просмотр в браузере», чтобы увидеть результат. Именно тогда Anima преобразует ваши проекты в код.

Первое, что вы заметите, это то, что прототип теперь преобразован в HTML и CSS. Весь контент доступен для выбора и перекомпоновывается при изменении размера экрана. Это наиболее заметно, когда вы выбираете «Отзывчивый» режим в средстве предварительного просмотра прототипа и играете с разными размерами экрана.

Чтобы добиться более плавных переходов, важно использовать функции ограничений Figma при разработке компонентов. Не забудьте также установить флажок «Использовать ограничения Figma» в разделе «Макет» плагина.

Воплотите свои проекты в жизнь с помощью интеллектуальных слоев

Мы можем пойти немного дальше. Так как Anima преобразует дизайн в код, возможности для того, чтобы сделать наш прототип более реалистичным, безграничны.

Анимация и эффекты наведения были бы отличным способом сделать прототип более живым и произвести впечатление на заинтересованных лиц. Anima предлагает множество параметров, которые можно применить к любому слою или компоненту. В нашем случае мы выберем слой с заголовком, затем выберем «анимацию входа» и «исчезновение». В поле задержки мы добавим 0.5 .

Для каждого поля мы добавим эффект свечения при наведении. Выберите слой поля, затем «Эффект наведения» и выберите «Свечение». Повторите то же самое для кнопки.

Теперь, когда мы применили все изменения, мы видим, что прототип начинает ощущаться как настоящий продукт.

Одной из уникальных функций, которые предлагает Anima, является возможность добавлять живые поля и формы к прототипам. Поскольку мы разрабатываем опыт онбординга, это будет действительно полезно для нас. Ввод данных — одна из самых больших проблем в работе с любым продуктом, и очень сложно проверить идеи, не принимая во внимание это.

Подобно тому, как мы добавили предыдущие эффекты, теперь мы выбираем компонент поля и выбираем «Текстовое поле». Оттуда нам нужно будет выбрать тип поля, которое нам нужно. Например, если мы выберем поле пароля, ввод будет скрыт, и Anima добавит в поле функцию отображения/скрытия.

Как видите, поля теперь работают как положено. Также возможно собрать все данные, собранные из этих полей, в электронную таблицу. Нажмите кнопку «Продолжить», а затем нажмите кнопку «Отправить» в Anima. Это откроет дополнительный диалог, где нам нужно установить флажок «Добавить в электронную таблицу» и выбрать места назначения перенаправления в случае успеха или неудачи.

Затем мы добавим анимацию Лотти для нашего экрана успеха, так как это будет отличный способ сделать процесс немного более увлекательным. Для этого нам нужно добавить слой-заполнитель вместо анимации, затем выделить его и выбрать опцию «Видео / GIF / Лотти» в плагине.

Затем мы вставим URL-адрес нашей анимации Lottie и отметим флажки «Автовоспроизведение» и «Без элементов управления». В нашем случае мы не хотим иметь какие-либо элементы управления видеоплеером, так как это успешная анимация.

Примените изменения и откройте режим предварительного просмотра, чтобы увидеть результаты. Как видите, когда мы заполняем поля и отправляем форму, нас перенаправляют на нашу страницу успеха с зацикленной анимацией.

Поделитесь дизайном с остальной частью команды

До этого момента мы работали над черновиком, который был виден только нам. Теперь пришло время поделиться им с остальной командой . Сделать это в приложении можно, нажав «Предварительный просмотр в браузере», проверьте, как это выглядит, и, если вас все устраивает, продолжите «Синхронизировать».

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

Разработчики могут получить многоразовый код React

Как упоминалось ранее, как разработчики, мы обычно скептически относимся к инструментам, которые генерируют код, в основном потому, что написать что-то с нуля всегда быстрее, чем рефакторинг плохо написанного. Чтобы избежать этого, Anima приняла некоторые передовые методы, чтобы сделать код чистым, пригодным для повторного использования и кратким.

Когда мы переключаемся в режим «Код», мы можем наводить курсор и проверять элементы нашего дизайна. Всякий раз, когда мы выбираем элемент, мы видим внизу сгенерированный код. Представление по умолчанию — React , но мы также можем переключиться на HTML и CSS. Мы также можем настроить предпочтения в синтаксисе и соглашениях об именах.

Классы повторно используют имена слоев в вашем инструменте дизайна, но и дизайнеры, и разработчики также могут переименовывать слои. Тем не менее, важно договориться об унифицированных соглашениях об именах, которые были бы понятны и понятны как дизайнерам, так и разработчикам.

Даже если мы оставили некоторые слои безымянными, разработчики могут переопределить их и внести изменения при необходимости. Этот опыт напоминает мне функцию проверки элементов Chrome, и все изменения сохраняются и синхронизируются с проектом.

Если вы используете Vue или Angular, ожидается, что Anima также начнет поддерживать эти фреймворки в ближайшем будущем.

С нетерпением жду

Как мы видим, разрыв между дизайном и кодом продолжает сокращаться. Для тех, кто пишет код, использование такого инструмента очень практично, поскольку позволяет сократить объем повторяющейся работы во внешнем интерфейсе. Для тех, кто занимается дизайном, он позволяет создавать прототипы, сотрудничать и синхронизировать, чего было бы трудно достичь при пересылке статических изображений туда и обратно.

Что уже точно, так это то, что Anima устраняет множество расточительных действий в процессе передачи и позволяет дизайнерам и разработчикам сосредоточиться на том, что действительно важно: на создании более качественных продуктов. Я с нетерпением жду возможности увидеть, что будет дальше в Anima!