Звучит слишком хорошо, чтобы быть правдой, не так ли? Ну, это не так.
Мы все были там, работая над совершенно новым сайтом, мы слышим, что дизайнер готов с макетами, и следующее, что мы знаем, они присылают нам настоящий макет, это изображение Photoshop.
Конечно, мы можем использовать его, чтобы начать получать различные графические ресурсы и медленно, но верно начать создавать наши компоненты и наш веб-сайт.
Но что, если я скажу вам, что есть более быстрый способ? Что, если я скажу вам, что есть продукт, который превращает эти проекты в реальный код?
Правильно, сегодня мы рассмотрим AnimaApp.
Что такое АнимаАпп?
AnimaApp позволяет разработчикам генерировать код из дизайна одним щелчком мыши.
Звучит волшебно, я знаю, но если учесть, как быстро развивается ИИ в наши дни, это звучит примерно так.
Конечно, есть некоторые ограничения, Anima ограничена «пониманием» дизайна из:
- Фигма
- Эскиз
- AdobeXD
- сборник рассказов
И из них он может писать код для React и Vue, плюс, конечно, HTML и CSS. Вы даже можете экспортировать код и использовать его для начальной загрузки вашего проекта. Бесплатный план позволяет несколько экспортировать, и если вы действительно хотите начать его использовать, вам придется перейти на платный план.
Возможности генерации кода очень интересны, вы можете выбрать фреймворк, и в нем вы также можете выбрать тип синтаксиса (например, компоненты на основе классов или функциональные компоненты для React) и как структурировать свой CSS.
Но подождите, какой код вы собираетесь получить из этого? Будет ли это простой мегакомпонент, в котором будут показаны все изображения? Или вы собираетесь иметь несколько компонентов, основанных на разных элементах дизайна?
Давайте посмотрим.
Какой код пишет для меня Anima?
Вы будете рады узнать, что действительно получаете какой-то причудливый код, а не простую оболочку изображения, которую вы ожидаете.
Посмотрите на этот вывод из примера проекта, бесплатно доступного на платформе:
В крайнем левом углу (слева от вас) вы видите код JSX, посередине — CSS, а в крайнем правом — выбранный компонент. В этом поле вы видите, какие свойства использует компонент.
Вот код со скриншота:
И это результат проверки главного компонента веб-сайта.
Это тот код, который вы бы написали? Может быть, нет, но это чертовски хорошая отправная точка.
Вы даже можете открыть код внутри сеанса CodeSandbox и поработать с ним, прежде чем использовать его в своем собственном проекте.
Разумеется, любые изменения, которые вы вносите в код в песочнице, не будут видны внутри вашего проекта Anima. Так что это было бы скорее игрой, чтобы понять, какие изменения вы должны внести, чтобы, наконец, сделать код своим собственным.
Как это работает?
Для целей этого урока я приведу примеры Figma + React, но не стесняйтесь использовать комбинацию, с которой вам удобнее.
Как только ваш дизайн будет готов в вашей любимой (и совместимой) дизайн-системе, вы сможете:
- Создать новый проект
- На странице нового проекта нажмите кнопку «Импорт»:
3. Введите URL-адрес Figma и позвольте импортеру сделать всю работу.
После того, как вы пройдете процесс импорта, сайт будет готов на вашей панели инструментов.
На приведенном выше снимке экрана вы можете увидеть, как выглядит импортированный проект.
В частности, если вы создаете совершенно новую учетную запись, у вас на экране должен быть тот же проект (это демонстрационный проект).
Откройте его, чтобы изучить сгенерированный код.
Ознакомьтесь с тремя основными разделами:
- В красном разделе вы увидите фактически сгенерированный код. JSX и CSS.
- В верхней части синего цвета вы увидите предварительный просмотр. Там вы сможете нажимать на различные разделы сайта. Компонент, на который вы нажмете, будет отображаться в красном разделе.
- Желтая правая часть — это подробный вид выбранного компонента. Вы увидите, как использовать этот компонент и как он используется в настоящее время (включая свойства).
Когда вы будете готовы, нажмите кнопку «Экспортировать код» и загрузите ZIP-файл со всем дизайном, преобразованным в код.
Вот и все, экспортируйте код в папку, запустите npm install и все готово.
В целом, процесс может занять у вас около 5-10 минут, в зависимости от вашего дизайна. Это значительно меньше времени, чем писать код самостоятельно. Даже если вы не создаете сложное приложение, я бы сказал, что вы не сможете написать весь необходимый HTML/CSS/JS за эти 10 минут.
В этом случае, я думаю, можно с уверенностью сказать, что AnimaApp может помочь вам значительно улучшить процесс разработки, если вы являетесь частью команды, которая работает с любой из уже упомянутых систем дизайна.
Вы уже пробовали AnimaApp? Собираетесь ли вы теперь, когда вы знаете об этом?
Бонус: выведите создание пользовательского интерфейса на новый уровень с помощью повторно используемых компонентов.
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
