Figma 개발 실험 4

상세 내용은 첨부파일과 함께 4주차 스터디에서 공유드리겠습니다.

공유내용

• Media - 동영상이 재생되는 랜딩페이지 만들기

• Supabase - Figma Make로 만든 게임에 Supabase 연동하기

• Figma MCP - Claude에서 Figma Design 프로젝트에 MCP 연동하기

• Webapp - Figma Make로 배포(실패)해본 모각 커뮤니티 웹앱

1. Media

• Figma Site 템플릿 이미지를 영상으로 전환한 랜딩페이지를 만들어보았습니다.

• Tool : Flow AI, Figma Design/Make, Youtube

ALT

많은 다른 이미지가있는 검은 색과 파란색 웹 사이트

2. Supabase

• Figma Make로 만든 게임과 Supabase를 연동하여 아이템 히스토리 관리

• OpenAI API / 카카오맵 API 연동

ALT

두 캐릭터가있는 픽셀 게임의 스크린 샷

ALT

픽셀 게임 화면의 스크린 샷

ALT

게임을 보여주는 컴퓨터 화면의 스크린 샷

ALT

여러 옵션을 보여주는 컴퓨터 화면의 스크린 샷

ALT

게임 화면의 스크린 샷

3. Figma MCP 연동

• Claude에서 Figma MCP 연동하고 활용하기 (셋팅은 첨부파일 참고)

ALT

한국어와 한국어를 가진 한국 웹 사이트

4. 모각 웹앱

ALT

한국 모바일 앱 디자인 UI 디자인 한국 모바일 앱 디자인 한국 모바일 앱 디자인 한국 모바일