Создание и повторное использование дизайн-системы
Преобразуйте материалы бренда в повторно используемые правила для цветов, типографики и компонентов, а затем выберите эту систему для проекта.
Соберите материалы, определяющие ваш бренд
Откройте Design systems («Дизайн-системы») на боковой панели Home («Главная»), затем выберите Create («Создать»). Перед генерацией добавьте исходные материалы: ссылку на сайт или GitHub, визуальный образец бренда, файлы либо текстовое описание. На экране создания можно добавлять файлы размером до 12 МБ каждый. Используйте только те материалы, которые вам разрешено передавать выбранному сервису.
Вставьте DESIGN.md, если у вас уже есть описанные правила дизайна. В качестве отправной точки также можно скопировать существующую дизайн-систему. Укажите, что должно остаться без изменений, например фирменные цвета, типографика, отступы вокруг логотипа или поведение компонентов.
Используйте код или Figma в качестве источника
Разверните Advanced («Дополнительно»), чтобы добавить репозиторий GitHub, локальный код, файл .fig или URL-адрес файла Figma. Выберите подходящий источник, а не загружайте папку с несвязанным проектом. Храните ресурсы вместе с файлами, объясняющими устройство компонентов.
URL-адрес Figma служит ссылкой на источник, но не гарантирует возможность чтения каждого закрытого файла. Если получить доступ не удаётся, предоставьте локальную копию .fig, на использование которой у вас есть разрешение, или чёткие снимки экрана. Импорт материалов из Figma не позволяет напрямую экспортировать результат обратно в нативный файл Figma.
Сгенерируйте, проверьте и доработайте систему
- Проверьте предоставленные материалы и выберите Generate («Сгенерировать»). Прежде чем считать систему готовой, дождитесь завершения извлечения данных или генерации.
- Проверьте сгенерированные предварительные просмотры и DESIGN.md. Сравните цвета, размеры шрифтов, интервалы и компоненты с исходными материалами; исправьте пропуски и противоречивые правила.
- Сохраните отредактированный DESIGN.md. Если вы попросите агента пересмотреть систему, снова проверьте результат перед публикацией.
Формулируйте требования так, чтобы им можно было следовать в другом проекте: где должен использоваться каждый цвет, какой шрифт применять для заголовков и основного текста, а также как должны вести себя кнопки, формы и состояния. Одной лишь коллекции привлекательных снимков экрана недостаточно для определения этих правил.
Опубликуйте систему и выберите её для проекта
- После проверки системы воспользуйтесь её элементом управления Published («Опубликовано»). Черновик останется доступен для проверки, но прежде чем систему смогут использовать другие проекты, её необходимо опубликовать.
- Вернитесь в Home («Главная») или откройте средство выбора дизайн-системы в проекте. Выберите нужную систему и проверьте её предварительный просмотр.
- Опишите, что нужно создать и какие правила важны. Сверьте сгенерированный результат с системой, а затем устраните различия с помощью точечных правок.
Сохранение правил, публикация системы и её применение к проекту — отдельные действия. Изменение дизайн-системы не означает, что существующие результаты были сгенерированы заново. Снова откройте соответствующий проект и проверьте результат.
Чтобы продолжить работу над интерфейсом, перейдите к прототипам. Небольшие изменения существующего HTML-артефакта описаны в разделе редактирование на холсте.
Если система отсутствует или доступна только для чтения
Проверьте активное рабочее пространство и статус публикации системы. Ресурсы команды и личные ресурсы могут различаться. Синхронизированная копия системы другого участника команды может быть доступна только для чтения; чтобы изменить её источник или статус публикации, воспользуйтесь учётной записью владельца либо учётной записью с необходимыми разрешениями в рабочем пространстве.
Если извлечь данные не удаётся, проверьте URL-адрес источника, размер файла и права доступа. Удалите недоступный источник или замените его разрешённым локальным материалом, а затем повторите попытку. Если сохранить изменения не удаётся, перед выходом с экрана оставьте у себя копию отредактированных правил. Публикация в OpenDesign не отправляет изменения обратно в GitHub.