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

Создание дизайна Figma — это огромная задача. Именно там я узнал о Dualite, который с помощью искусственного интеллекта переводит проекты Figma в реальный код, помогая таким разработчикам, как я, минимизировать усилия по фактическому кодированию. Давайте посмотрим, как я использовал Dualite для преобразования моей целевой страницы в реальный код
 

Что такое Дуалит?

Dualite — это инновационный плагин Figma на базе искусственного интеллекта, призванный устранить разрыв между дизайном и разработкой. Основное внимание уделяется преобразованию проектов Figma в высококачественный код многократного использования с поддержкой таких популярных технологий, как Reactjs, TailwindCSS и других.

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

• Режимы: Dualite предлагает два режима: режим компонента и режим страницы, которые идеально подходят разработчикам и дизайнерам для преобразования своего дизайна в сгенерированный код. Эти режимы гарантируют, что макет, интерактивность, анимация и многое другое точно передаются из дизайна в код.
  • Режим компонентов: фокусируется на отдельных элементах дизайна, позволяя создавать компоненты многократного использования.
  • Режим страницы: преобразует целые страницы, сохраняя общий макет и структуру.
  • Подробнее о режимах можно узнать в этом блоге.
• Расширенные функции:
  • Dualite предлагает расширенные настройки, позволяющие пользователям предоставить дополнительную техническую информацию о своем дизайне. Это гарантирует, что сгенерированный код будет отзывчивым и точным.
  • Эти расширенные настройки предоставляют дизайнерам и разработчикам больше возможностей, позволяя им настраивать выходные данные в соответствии с конкретными требованиями проекта. Эта функция особенно полезна для сложных проектов, требующих точного контроля над конечным кодом, таких как адаптивные макеты или сложная анимация. Чтобы быстро начать работу с Dualite, вы можете воспользоваться их документацией

Фигма Дизайн

Давайте начнем с фигма-дизайна целевой страницы, см. ниже:

Итак, в Dualite есть функция режима, с помощью которой вы можете переключаться между режимом страницы и режимом компонента

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

Мы будем использовать компонентный режим для генерации кода для всех компонентов, присутствующих в проекте, а затем интегрируем их в один проект

Давайте начнем с разделения целевой страницы на компоненты, см. ниже:

Первоначальная настройка проекта

Я буду использовать Reactjs и Tailwind в Dualite для генерации кода, поэтому давайте сначала настроим проект:

• Приложение Reactjs: создайте приложение React с помощью Vite или любого другого инструмента. Vite — популярный выбор для создания приложений Javascript
• Настройка Tailwind: следуйте документации Tailwind, чтобы настроить попутный ветер в приложении Reactjs без каких-либо ненужных ошибок. Обязательно добавьте также зависимости, такие как PostCSS и автопрефиксер, для более плавной настройки Tailwind.
• Файлы конфигурации: создайте Tailwind.config.js и postcss.config.css в корне проекта. Tailwind.config.js может присутствовать, если вы выполнили все шаги из документации Tailwind. Если он уже есть, обновите его соответствующим образом
• Используйте Javascript: на данный момент Dualite не поддерживает Typescript, поэтому обязательно создайте приложение Reactjs только с Javascript

Начните конвертировать компоненты в Dualite

Начальная настройка:

• Режим: мы будем использовать компонентный режим. Используйте кнопку переключения в правом верхнем углу для переключения между режимом страницы и режимом компонента
• Фреймворки: когда вы выбираете дизайн для преобразования в код, вы увидите несколько вариантов языка и фреймворков. Для генерации кода я буду использовать Reactjs и Tailwind.
• Чтобы быстро начать использовать Dualite, прочитайте это

Теперь давайте начнем с преобразования дизайна в компонент:

1. Компонент панели объявлений: проверьте сгенерированный код здесь
    

2. Компонент панели навигации: проверьте сгенерированный код здесь
    

3. Компонент фильтра категории: проверьте сгенерированный код здесь
    

4. Компонент карты: проверьте сгенерированный код здесь
    

5. Компонент нумерации страниц: проверьте сгенерированный код здесь
    

6. Компонент нижнего колонтитула: проверьте сгенерированный код здесь
    

Настройки

1. Копировать компоненты:
   • Теперь скопируйте папку Components из всего сгенерированного выше кода и вставьте ее в проект в папку компонентов
   • Вы могли заметить, что имена всех компонентов — только «Компонент», поэтому давайте назовем все компоненты соответственно. Пример: Компонент панели объявлений будет называться «AnnouncementBar». Посмотрите, как я это сделал здесь
2. Рендеринг всех компонентов:
   • Теперь импортируйте все компоненты в соответствии с дизайном внутри файла App.jsx
   • Запустите проект, и вы увидите результат. Проверьте файл App.jsx здесь.
   • Вы могли заметить, что некоторые компоненты необходимо исправить. Начнем с настроек
3. Исправление стилей компонентов:
   • Шрифты:
     • Как видно по дизайну, у нас есть собственные шрифты. Добавляю их в папки ресурсов, чтобы я мог использовать шрифт в проекте где угодно.
     • Также необходимо создать @font-face для всех шрифтов, которые мы используем в файле index.css, где присутствуют директивы Tailwind
   • Компонент панели навигации:
     • Макет неточен, необходимо исправить стиль.
   • Компонент карты:
     • Значок звездочки: добавлен значок звездочки в папку с графикой
     • Text.js: обновлен файл Text.js для исправления надписи кнопки и другого текста компонента
     • Стили: обновлены стили для добавления толщины шрифта к определенному текстовому элементу и метке кнопки
   • Логика компонентов карты:
     • Компонент карты отображает только один компонент, поскольку это только один компонент.
     • Чтобы отобразить несколько компонентов карты, мне нужно добавить некоторые демонстрационные данные, чтобы сопоставить их и отобразить несколько карточек

Примечание: все изменения и код можно увидеть на CodeSandBox здесь

Выход

Как только я внес все эти настройки и изменения в проект, я увидел лучшую версию своего дизайна, проверил код и вывел результаты здесь

Был ли Dualite полезен?

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

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

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

Да, Dualite очень помог и быстро сгенерировал код для моих компонентов.

Заключение

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