Repolode
Предложить
DouyinFE

DouyinFE/semi-design

Библиотека React-компонентов и дизайн-система с более чем 80 компонентами, поддержкой преобразования макетов Figma в код и 3000+ токенами дизайна.

Открыть на GitHubСайт
Звёзды
10,469
Форки
853
Открытые issues
626
Последний коммит
вчера

Что это?

Semi UI — библиотека компонентов React, объединённая с дизайн-системой для команд, которым важно связать дизайн и разработку. В ней более 80 компонентов с поддержкой клавиатурного управления, управления фокусом и ARIA, а также интернационализации, часовых поясов, RTL и SSR.

В проекте есть процесс преобразования дизайна в код с помощью плагина для Figma: он генерирует JSX со SCSS, Emotion или Tailwind либо DSL на основе JSON Schema. В обратном направлении, от кода к дизайну, создаётся UI Kit для Figma, использующий те же темы, что и код. Semi DSM — часть проекта для управления дизайн-системой — предоставляет более 3000 токенов дизайна, на основе которых команды могут задать собственную визуальную систему.

Библиотека написана на TypeScript, использует архитектуру Foundation/Adapter и может собираться в web-компоненты для сценариев, где нужна изоляция DOM. Пакет устанавливается из npm под именем @douyinfe/semi-ui.

Ключевые возможности

  • 01Более 80 компонентов React с поддержкой клавиатурного управления и ARIA
  • 02Плагин для Figma, преобразующий макеты в JSX со SCSS, Emotion или Tailwind
  • 03Генерация UI Kit для Figma по коду с темами, соответствующими темам в коде
  • 04Более 3000 токенов дизайна для настройки дизайн-системы
  • 05Типы TypeScript, совместимость с SSR, поддержка RTL и интернационализации

Сценарии использования

  • Создание административных панелей и внутренних приложений на React с готовым набором компонентов
  • Быстрое преобразование макетов Figma в код React с помощью официального плагина
  • Поддержка общей системы токенов дизайна, синхронизированной между макетами и кодом
  • Создание расширений для браузера или виджетов SDK, которым нужна изоляция DOM с помощью web-компонентов

Быстрый старт

  1. 1

    Установите пакет с помощью npm

    npm install @douyinfe/semi-ui
  2. 2

    Импортируйте компоненты из пакета и отобразите их в приложении React, как показано в примере README

Что важно знать

  • Это библиотека React, поэтому она подходит только для проектов на React.
  • В README указана поддержка только двух последних версий основных современных браузеров.

Темы

#react#ui-library#design-system#design-tokens#figma#typescript#dark-mode#design-to-code#ai-friendly#code2design

Частые вопросы

Что такое semi-design?
Библиотека React-компонентов и дизайн-система с более чем 80 компонентами, поддержкой преобразования макетов Figma в код и 3000+ токенами дизайна. Semi UI — библиотека компонентов React, объединённая с дизайн-системой для команд, которым важно связать дизайн и разработку. В ней более 80 компонентов с поддержкой клавиатурного управления, управления фокусом и ARIA, а также интернационализации, часовых поясов, RTL и SSR.
semi-design можно использовать бесплатно? Какая у него лицензия?
semi-design распространяется с открытым исходным кодом под лицензией Other. Перед использованием в коммерческих продуктах проверьте условия лицензии.
semi-design всё ещё поддерживается?
Активно поддерживается. Последний коммит в semi-design — 5 нояб. 2026 г..
Для чего можно использовать semi-design?
Создание административных панелей и внутренних приложений на React с готовым набором компонентов Быстрое преобразование макетов Figma в код React с помощью официального плагина Поддержка общей системы токенов дизайна, синхронизированной между макетами и кодом Создание расширений для браузера или виджетов SDK, которым нужна изоляция DOM с помощью web-компонентов
Как установить semi-design?
Установите пакет с помощью npm: npm install @douyinfe/semi-ui Импортируйте компоненты из пакета и отобразите их в приложении React, как показано в примере README
Где скачать semi-design?
Исходный код и инструкции по установке — на GitHub: https://github.com/DouyinFE/semi-design

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

southleft / figma-console-mcp

MCP-сервер подключает AI-ассистентов к Figma: извлекает токены дизайна, создаёт и редактирует макеты, проверяет соответствие дизайна коду и доступность.

ИИ и машинное обучение#figma#mcp#design-system
3,1 тыс.+160 за неделю286TypeScriptMITАктивно поддерживаетсяОбновлён 8 дней назад

VoltAgent / awesome-design-md

Подборка файлов DESIGN.md с сайтов брендов, которые помогают AI-агентам для программирования создавать интерфейсы в соответствии с их дизайн-системами.

Обучающие материалы#design-system#design-tokens#ai-coding
125,8 тыс.+1,3 тыс. за неделю13,9 тыс.MITОбновлён 9 дней назад