Atoms & Tokens
Кольори, ефекти, типографіка, іконографія, spacing. Експорт у JSON для Tailwind, CSS та iOS/Android.
Єдина дизайн-бібліотека Science Portal
Figma Design Library
Синхронізована бібліотека компонентів, стилів, токенів та макетів для вебу, мобільних платформ і VR-досвіду Science Portal. Підключення до Tailwind та Storybook забезпечує консистентність.
🧱 280+ компонентів
🎯 Design tokens
🌐 RTL & LTR
🔄 Git sync
Components
Buttons, cards, navigation, dashboard widgets, VR controls. Вони мають responsive варіанти та Auto Layout.
Patterns
Onboarding, checkout, simulation setup, analytics dashboards, education flows. Документація з прикладами.
Процес синхронізації
Audit
Ревізія існуючих Figma-файлів, Tailwind токенів, Storybook компонентів. Виявлення дублів і несумісностей.
Normalize
Об’єднання стилів, створення глобальних токенів, узгодження неймінгу, документація naming conventions.
Automate
Figma Tokens plugin, GitHub Actions для синку JSON, автоматичне оновлення Tailwind config.
Govern
Design Ops. Управління релізами, review процеси, контроль доступів, регулярні design crit sessions.
Ролі та відповідальності
- Design Ops Lead: управляє бібліотекою, релізами, QA.
- Product Designers: сабмітять нові компоненти, проводять тестування.
- Frontend Chapter: перевіряє відповідність коду Tailwind і React-компонентам.
- Localization Squad: валідує багатомовні сценарії, RTL макети.
- Accessibility Expert: перевіряє контрастність, фокус-стани, ARIA-атрибути.
Метрики Design System
- Adoption Rate: частка макетів, що використовують бібліотеку (ціль ≥ 95%).
- Release Cadence: нові релізи бібліотеки щомісяця.
- Token Consistency: відсоток компонентів із актуальними токенами (ціль ≥ 98%).
- Design Debt: кількість компонентів поза бібліотекою (ціль ≤ 5).
- Feedback Score: оцінка задоволеності команди (ціль ≥ 4.5/5).
Часті запитання
Як отримати доступ до бібліотеки?➕
Подайте заявку через Figma Organization Access Forms. Доступ надається за роллю (viewer/editor).
Як синхронізуємо з кодуванням?➕
Використовуємо Figma Tokens + GitHub Actions. JSON токени автоматично оновлюють Tailwind config і style dictionary.
Який процес додавання нового компонента?➕
Дизайнер створює компонент у playground, проходить review з Design Ops, після схвалення компонент додається до майстер-файлу.
Як контролюємо версіонність?➕
Використовуємо релізні теги, changelog у Notion, automatic release notes у Slack.
Чи доступні мобільні компоненти?➕
Так, окремі паки для iOS, Android, PWA. Вони синхронізовані через Variants і Auto Layout.
Як адаптуємо компоненти до VR/AR?➕
Є VR/UI бібліотека з 3D контролями, інтеграцією з WebXR та тестами на реальних девайсах.
Чи підтримуються темні/світлі теми?➕
Так, система має динамічні теми з чіткою структурою семантичних токенів та примірників.
Як відбувається навчання команди?➕
Onboarding-сесії щомісяця, відео-уроки, живі воркшопи, документація в `docs/design-system`.
Як відслідковується зворотній зв’язок?➕
Зворотний зв’язок збирається через Figma comments і Notion форму. Design Ops обробляє двічі на тиждень.
Чи інтегрується з Jira/Asana?➕
Так, створені шаблони задач для впровадження компонентів і відстеження прогресу у спринтах.
Почніть працювати з бібліотекою
Підключіть Figma-бібліотеку до вашого проєкту, оновіть токени та використовуйте узгоджені компоненти для швидкого дизайну і розробки.