[Figma A to Z 시리즈]Figma make 1편

Figma를 처음부터 배워보는 A to Z 시리즈, 첫 시작은 Figma make입니다. 분량이 너무 길어져서 나눠서 진행해보려고 합니다. 아래 자료 받아서 아웃풋을 따라만들어 보세요. https://www.figma.com/community/file/... 📝 영상 핵심 요약 이 영상은 피그마의 새로운 프로토타이핑/MVP 제작 툴인 '피그마 메이크(Figma Make)'를 활용해 내가 원하는 디자인 스타일의 결과물을 정확하고 효율적으로 뽑아내는 팁을 다룹니다. 프롬프트 빌더를 활용한 구조화된 프롬프트 작성법, 디자인 화면을 단계적으로 나누어 요청하는 방법, 그리고 CSS 코드를 직접 추출해 글로벌 스타일로 등록하는 심화 팁을 배울 수 있습니다. 또한, HTML to Figma 플러그인 등 외부 도구를 활용해 기존 웹사이트의 코드를 메이크 환경으로 불러와 레이아웃과 토큰 사용량을 최적화하는 실무적인 노하우를 제공합니다. ⏱️ 타임스탬프 00:00 | 인트로 및 피그마 메이크(Figma Make) 기초 시리즈 소개 01:47 | 피그마 메이크에서 원하는 아웃풋을 빠르게 뽑는 3가지 핵심 팁 02:22 | 팁 1: 커서 프롬프트 빌더(Cursor Prompt Builder) 등 AI를 활용한 구조화된 프롬프트 작성 03:19 | 팁 2 & 3: 화면을 단계적으로 나누어 구현하고, 피그마 디자인을 잘 정리(오토레이아웃 등)하여 넘기기 04:05 | 수정 시 토큰을 아끼는 방법 (커서 편집 기능 활용 및 마크다운 문서 첨부) 05:04 | 복잡한 CSS 애니메이션은 오픈소스(리액트 비트 등) 코드를 복사해 활용하기 06:09 | HTML to Design 등 외부 플러그인을 활용해 메이크 작업물을 피그마 원본으로 가져오기 09:09 | [실습] 내 디자인 스타일과 똑같은 아웃풋을 뽑아내는 3가지 방법 소개 12:25 | 마누스(Manus) AI를 활용해 타겟 사이트의 디자인 시스템(JSON) 추출하기 14:52 | 추출한 제이슨(JSON) 파일을 피그마 메이크의 글로벌 CSS 코드로 등록하기 16:50 | 피그마 디자인을 메이크에 붙여넣고 글로벌 CSS 기반으로 랜딩 페이지 구현 요청하기 18:35 | 구현된 디자인 수정 팁 (커서 편집을 활용한 텍스트 및 레이아웃 직관적 수정) 21:24 | 피그마 디자인 라이브러리를 메이크용으로 발행하고 첨부하는 방법 24:03 | 시작 세팅에서 가이드라인(PRD 등) 및 기본 스타일 코드를 미리 첨부하는 방법 25:18 | HTML to Figma 플러그인 업데이트 기능 (웹사이트 코드를 바로 메이크 파일로 다운로드) 26:45 | 영상 마무리 및 다음 회차(API 연동 및 로그인 구현) 예고