피그마 x AI를 활용한 워크플로우 효율화 클래스

SALE

피그마 x AI를 활용한 워크플로우 효율화를 위해 전체 과정을 실습으로 진행하는 클래스입니다.

Cursor(2시간)

1. Cursor 인터페이스 기초 

   1. Cursor 기능 학습 

   2. Cursor로 개발자와 협업할 때 꼭 알아야 하는 것들 

   3. Figma Make > Cursor로 옮겨보기(연습문제)

   4. Cursor에서 Claude 코드 연동하기 

2. Cursor에서 Supabase 활용 방법 

3. MCP 정의와 비개발자가 알아두면 좋은 MCP

• Cursor에서 MCP 활용하는 방법 (추가하는 방법 등) 

• Figma dev  MCP vs Talk to figma mcp 차이 이해하기

• Figma mcp 쉽게 연결하는 팁

• 수정 작업에 Figma MCP 활용해보기 

• 그 외 Figma+Cursor로 활용할 수 있는 기타 MCP 

4. Cursor로 우리 업무에 필요한 플러그인 만들어보기 

• 플러그인 제작할 때 반드시 알아야 할 것들 

• 우리 서비스에 최적화된 더미 콘텐츠 플러그인 만들어보기 

Figma MCP로 우리 디자인 시스템 구현하고 서비스 랜딩페이지 만들어보기 (3시간)

1. Figma MCP로 우리 디자인 시스템 구현하기(인터페이스 및 기능 익히기) 

   1. Figma mcp로 우리 디자인 시스템 구현하기 

      1. Figma mcp 연결하고, 우리 디자인 시스템 컴포넌트, 토큰 구현하기 

      2. 바이브 코딩으로 협업 시 유의할 점 

   2. Git허브 연동하고, 커밋+ PR올리기 

      1. 작업된 디자인 시스템 커밋하고 PR올리기

      2. 이미 작업된 파일 불러와서 작업에 활용하기 

   3. 구성된 디자인 시스템 기반으로 랜딩페이지 프론트 화면 구현해보기
      
      
      

2. 백엔드와 API를 연동하는 방법
   
   

   1. API를 불러와서 웹 서비스에 연결하는 방법(지도 즐겨찾기 기능 등 구현해보기, 변경될 수 있음)

   2. Supabase활용 방법 

   3. 데이터 테이블 그리고 연동하는 방법
      
      

3. 추가 실전 팁: 피그마 디자인 to Code 현업에서 활용할 때 꼭 알아야 할 부분들 

커리큘럼은 아래 내용을 반영하였습니다. 

• 앞단의 MCP를 연결하고 활용하는 부분 분량 조절 

• Figma make내용 제외 

• 디자인 시스템 코드 제작+ 디자인 시스템 랜딩페이지 제작하는 과정 추가