Figma 디자인을 실시간 React 코드로 변환하는 디자인 시스템 대시보드 만들기
중급45분2026-04-20
Figma 디자인 시스템과 Linear의 업무 데이터를 Next.js 환경에서 실시간으로 연동합니다. 디자인 변경사항이 즉시 반영되고 프로젝트 진행 상황을 한눈에 확인할 수 있는 인터랙티브 웹 대시보드를 만듭니다.
이 실습은 터미널에서 진행됩니다
오른쪽 패널에서 설치 명령어를 복사하세요이런 걸 배워요
- Figma 디자인을 React 컴포넌트 코드로 자동 변환할 수 있습니다.
- 디자인 토큰의 개념을 이해하고 실무에 적용할 수 있습니다.
- Next.js 환경에서 외부 API(Linear)를 연동하고 데이터를 시각화할 수 있습니다.
- 환경 변수를 사용하여 API 키 등 민감 정보를 안전하게 관리할 수 있습니다.
어떻게 진행해요
1. Next.js 프로젝트 생성하기
2. Figma 연동 준비하기 (수동)
3. Figma 연동 UI 라이브러리 설치
4. Figma 디자인으로 기본 UI 생성하기
5. Linear API 연동 및 환경변수 설정
6. Linear 데이터 API 연동 및 화면 표시
7. 대시보드에 동적 필터 기능 추가하기
AI 튜터가 각 단계를 하나씩 안내해줄 거예요