Repolode
제출하기
DouyinFE

DouyinFE/semi-design

80개 이상의 컴포넌트, Figma 디자인-코드 변환 기능, 3000개 이상의 디자인 토큰을 갖춘 React UI 컴포넌트 라이브러리이자 디자인 시스템입니다.

GitHub에서 보기웹사이트
스타
10,473
포크
854
열린 이슈
626
마지막 커밋
3일 전

어떤 프로젝트인가요?

Semi UI는 디자인과 개발을 연결하려는 팀을 위한 디자인 시스템을 갖춘 React 컴포넌트 라이브러리입니다. 80개가 넘는 컴포넌트를 제공하며, 각 컴포넌트에 키보드 상호작용, 포커스 관리, ARIA 지원을 제공하고 다국어 처리, 시간대 및 RTL 지원, SSR 호환성도 갖췄습니다.

Figma 플러그인을 통한 디자인-코드 변환 워크플로를 제공하며, SCSS, Emotion 또는 Tailwind를 사용하는 JSX나 JSON Schema DSL을 출력할 수 있습니다. 반대 방향인 코드-디자인 변환 기능은 코드와 동일한 테마를 따르는 Figma UI Kit을 생성합니다. 디자인 시스템 관리 기능인 Semi DSM은 3000개가 넘는 디자인 토큰을 제공해 팀이 Semi UI를 기반으로 자체 시각 시스템을 정의할 수 있도록 합니다.

이 라이브러리는 TypeScript로 작성됐으며 Foundation/Adapter 아키텍처를 사용합니다. DOM 격리가 필요한 시나리오에서는 웹 컴포넌트로 패키징할 수 있습니다. npm에서 @douyinfe/semi-ui로 설치할 수 있습니다.

핵심 기능

  • 01키보드 상호작용 및 ARIA를 지원하는 80개 이상의 React 컴포넌트
  • 02디자인을 SCSS, Emotion 또는 Tailwind를 사용하는 JSX로 변환하는 Figma 플러그인
  • 03코드 테마와 일치하는 Figma UI Kit을 생성하는 코드-디자인 변환 기능
  • 04디자인 시스템을 맞춤 설정할 수 있는 3000개 이상의 디자인 토큰
  • 05TypeScript 타입 정의, SSR 호환성, RTL 및 다국어 지원

활용 사례

  • 완성된 컴포넌트 세트로 관리자 대시보드나 백오피스 React 앱 구축
  • 공식 플러그인으로 Figma 디자인을 빠르게 React 코드로 변환
  • 디자인과 코드 간 동기화를 유지하는 공용 디자인 토큰 시스템 관리
  • 웹 컴포넌트를 통해 DOM 격리가 필요한 브라우저 확장 프로그램이나 SDK 위젯 제작

빠른 시작

  1. 1

    npm으로 패키지를 설치합니다

    npm install @douyinfe/semi-ui
  2. 2

    README 예시와 같이 패키지에서 컴포넌트를 가져와 React 앱에서 렌더링합니다

사용 전 알아둘 점

  • React 라이브러리이므로 React 기반 프로젝트에서만 사용할 수 있습니다.
  • README에는 주요 최신 브라우저의 최신 2개 버전만 지원한다고 나와 있습니다.

토픽

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

자주 묻는 질문

semi-design은(는) 무엇인가요?
80개 이상의 컴포넌트, Figma 디자인-코드 변환 기능, 3000개 이상의 디자인 토큰을 갖춘 React UI 컴포넌트 라이브러리이자 디자인 시스템입니다. Semi UI는 디자인과 개발을 연결하려는 팀을 위한 디자인 시스템을 갖춘 React 컴포넌트 라이브러리입니다. 80개가 넘는 컴포넌트를 제공하며, 각 컴포넌트에 키보드 상호작용, 포커스 관리, ARIA 지원을 제공하고 다국어 처리, 시간대 및 RTL 지원, SSR 호환성도 갖췄습니다.
semi-design은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
semi-design은(는) Other 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
semi-design은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. semi-design의 마지막 커밋은 2026년 11월 5일입니다.
semi-design은(는) 어디에 사용할 수 있나요?
완성된 컴포넌트 세트로 관리자 대시보드나 백오피스 React 앱 구축 공식 플러그인으로 Figma 디자인을 빠르게 React 코드로 변환 디자인과 코드 간 동기화를 유지하는 공용 디자인 토큰 시스템 관리 웹 컴포넌트를 통해 DOM 격리가 필요한 브라우저 확장 프로그램이나 SDK 위젯 제작
semi-design는 어떻게 설치하나요?
npm으로 패키지를 설치합니다: npm install @douyinfe/semi-ui README 예시와 같이 패키지에서 컴포넌트를 가져와 React 앱에서 렌더링합니다
semi-design은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/DouyinFE/semi-design

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트