소개
오늘 Figma 모각이 있어, 강의를 듣고 랭딩 페이지를 만들어 봤습니다.
Figma가 디자인 장점이 있어 lovable이나 Bolt에서 진행 했던, 프로트 타이핑은 Figma에서 해봤습니다.
진행 방법
Step 1. Figma 에서 디자인 프로토 타입 생성.
Step 2. windsurf로 소스 복사 후 개발 진행
figma에서 받은 파일들 windsurf 과제 디렉토리로 복사후 소스분석 프롬프트 실행
PRD.md, TRD.md, TODO.md파일 생성후 TODO.md 에 따라 개발 진행
TODO.md 에 따라 순서대로 개발을 하고 결과 저장 프롬프트
결과와 배운 점
Figma의 디자인 장점을 이용해 웹싸이트 개발 가능
Figma에서 생성되는 GUI와 windsurf에서 구현 된 GUI는 약간 차이가 있으나, 다른 자동화 툴(v0, lovable, bolt 등) 보다는 휼륭한 UI가 만들어짐
Figma 소스는 figma내부에서 생성하는 이미지를 Refence하고 있을수 있어서 이부분에 대한 고려도 필요 함.
도움 받은 글 (옵션)
모각 자료
