Vivid — назовите свои проекты из кода это инструмент для проектирования кода, который синхронизирует проекты Figma с вашей кодовой базой, генерируя и обновляя код пользовательского интерфейса для вас. Он позволяет генерировать прямой код из изменений дизайна, сохраняя правки разработчиков и стили структурирования для поддерживающей разработки пользовательского интерфейса.
Как работает Vivid
- Создавайте код из дизайнов. Создавайте или обновляйте код пользовательского интерфейса непосредственно из ваших проектов Figma. Каждый компонент может иметь код, сгенерированный как PR для обзора.
- Редактировать сгенерированный код. Добавьте функциональность, настройте стили или измените divs по мере необходимости для реализации функций.
- Синхронизация изменений. Регенерируйте код, когда ваши проекты меняются; ваши существующие правки сохраняются.
Как это помогает разработчикам
- Изолируйте стили дизайна, чтобы разработчики могли сосредоточиться на функциональности.
- Стили организованы по элементу, с контролем Figma и стилями, которые реагируют на реквизит.
- Автоматическое обновление кода всегда отслеживает Figma, обеспечивая синхронизацию вашего дизайна и кода.
- Анатомия: стилизованные элементы генерируются из файла дизайна, сохраняя четкую связь между дизайном и реализацией.
- Контролируемый разработчиком: перезаписывайте стили и добавляйте функциональность без загромождения кода только с проблемами дизайна.
Основные концепции
- Figma-driven: дизайн контролирует структуру и стили, в то время как код управляет поведением.
- Разнообразный стиль: стили адаптируются на основе компонентов реквизита.
- Обновления кода на основе PR: сгенерированный код подходит для просмотра и совместной работы.
- Дополнительные правки: правки к генерируемому коду сохраняются при регенерации.
Безопасность и соображения
- Обеспечить согласование изменений в дизайне с проектными конвенциями и руководящими принципами доступности.
- Просмотрите сгенерированный код перед слиянием, чтобы обеспечить производительность и безопасность.
Совместимость и масштаб
- Интегрируется с Figma и кодовыми базами для оптимизации рабочих процессов разработки пользовательского интерфейса.
- Основное внимание уделяется генерации кода пользовательского интерфейса и синхронизации между дизайном и реализацией.
Основные характеристики
- Генерация кода на основе Figma для компонентов UI
- Автоматическая синхронизация изменений дизайна от Figma к кодовой базе
- Сохранение правок разработчиков при регенерации
- Пер-элементный стиль с вариантно-знающими реквизитами
- Структурно-ориентированный выход, чтобы минимизировать беспорядок стиля
- PR-готовый код для легкого просмотра и совместной работы
- Управление разработчиком для перезаписи стилей и добавления функциональности
