Code Connect и Storybook
Как связать компонент Figma с файлами реализации: настройки репозитория, полная форма привязки на вкладке Code Connect, быстрая привязка из редактора Vue, блок Storybook Integration, файл реестра для команды и что видит разработчик в Dev Mode.
Code Connect связывает компонент в Figma с файлами, в которых он реализован. После привязки разработчик видит в Dev Mode ссылки на документацию и код, в панели Code Figma появляются вкладки с импортом и примером использования, а Storybook получает описание компонента.
Что где настраивается
| Что | Где | Когда |
|---|---|---|
| Адреса репозитория и документации | Кнопка Repository connection внизу вкладки Code Connect | Один раз для файла |
| Полная привязка компонента | Вкладка Code Connect в режиме Design, форма для выделенного компонента | Для каждого компонента |
Быстрая привязка файла .vue | Вкладка Code Connect в Dev Mode, кнопка Connect над редактором | Когда файл уже открыт в редакторе |
Repository connection
| Поле | Что указать |
|---|---|
| Figma file URL or key (recommended) | Ссылка на этот файл Figma или его ключ. Нужен, когда плагин не может определить ключ файла сам |
| Repository URL | Адрес репозитория, например https://github.com/org/project или https://gitlab.com/org/project. Из него строятся ссылки на файлы |
| Storybook / docs (optional) | Базовый адрес Storybook или документации |
Эти настройки хранятся вместе с привязками и одинаковы для всей команды.
Полная форма привязки
Выделите компонент или набор вариантов в режиме Design и откройте вкладку Code Connect.
Вкладка Code Connect в Design: форма привязки выделенного компонента с полями Display name, Import path и Snippet template, кнопка Add file и блок Storybook Integration ниже.
| Поле | Назначение |
|---|---|
| Display name | Имя компонента в коде |
| Import path | Путь импорта, например @myorg/ui/WButton |
| Snippet template | Шаблон примера использования |
| Files | Список файлов реализации, кнопка Add file |
Для каждого файла:
| Поле | Назначение |
|---|---|
| Framework | React, Angular, Vue 3, HTML, SwiftUI, Kotlin, Compose |
| File path | Путь в репозитории или ссылка на файл в GitHub или GitLab |
| Docs URL | Адрес страницы документации для этого файла |
| Component name, Import path | Переопределения для файла |
| Custom snippet | Свой пример использования |
| AI instructions | Подсказки для агента, например «Always use size prop» |
Сохраните форму. Привязка попадает в реестр и, если Figma разрешает запись, на сам слой.
Быстрая привязка из редактора
Вкладка Code Connect в Dev Mode: слева дерево файлов из папки кода, справа редактор. Пока папка кода не задана, дерево подсказывает настроить её в Git-подключении.
- В Dev Mode откройте вкладку Code Connect.
- В дереве слева выберите файл
.vue. Дерево читает папку, указанную в поле Code folder Git-подключения для Dev Mode. - Выделите компонент на холсте и нажмите Connect.
Создаётся привязка файла как Vue 3. Кнопка недоступна, если не выделен компонент или не задан Repository URL.
Storybook Integration
Блок в той же форме привязки. Настройки хранятся вместе с привязкой, отдельно экспортировать ничего не нужно.
| Переключатель | Что даёт в Storybook |
|---|---|
| Design Embed | Встроенный макет Figma |
| Composition JSON | Описание композиции из выбранного файла токенов типа composition |
| Metadata | Свойства компонента |
| Description | Текстовое описание |
| Tokens | Отметка, готовы ли токены |
| Status | Complete, Ready for Dev, In Progress, Backlog |
Storybook читает эти данные через Storybook addon.
Файл реестра
Все привязки файла Figma хранятся в реестре diff-code-connect.<ключ файла>.json в репозитории токенов. Его коммитят вместе с токенами, поэтому команда и Storybook видят одинаковые привязки. Если Figma не позволяет записать данные на слой в Dev Mode, реестр всё равно обновляется, а плагин напоминает открыть файл в Design, чтобы закрепить привязку на слое.
Что видит разработчик
- Вкладка Inspect в Dev Mode: ссылки Docs и Code.
- Дерево файлов во вкладке Code Connect: связанные
.vueотмечены галочкой. - Панель Code Figma: вкладки с импортом и примером использования, если компонент связан.
Если что-то не работает
| Что случилось | Что делать |
|---|---|
| В форме Connected, но привязка не видна в ресурсах слоя Figma | Ограничение записи Dev Mode. Откройте файл в Design и сохраните привязку ещё раз |
| В панели Code нет вкладок Code Connect | Проверьте, что выделен связанный компонент и заданы настройки репозитория |
| В дереве нет отметок связанных файлов | Обновите дерево и убедитесь, что файл реестра есть в активном Git-источнике. Отмечаются только привязки Vue 3 |
| Кнопка Connect неактивна | Выделите компонент и заполните Repository URL |