Figma Make 사용법 | 디자인을 AI로 구현하고 웹사이트까지 만들기 - 피그마 강좌 1-6
지금 보고 있는 영상
Figma Make 사용법 | 디자인을 AI로 구현하고 웹사이트까지 만들기 - 피그마 강좌 1-6
조회수 3,710
영상 설명 · 눌러서 펼치기
Figma Make를 활용해 기존 피그마 디자인을 실제 동작하는 화면으로 구현하고, 프롬프트만으로 웹사이트를 만드는 방법을 알아봅니다.
디자인 Context 연결, AI 모델 선택과 반복 수정, 코드 확인, AI Slop을 줄이는 프롬프트 작성법, 랜딩 페이지와 스크롤 인터랙션 제작까지 Figma Make의 핵심 활용법을 살펴봅니다.
#Figma #FigmaMake #피그마강좌
🕐 타임스탬프
00:00 Figma Make로 달라지는 디자인 방식
01:18 기존 디자인을 실제 화면으로 구현하기
02:05 Build 모드와 AI 모델 선택하기
03:52 버전, 코드, Edit 기능 활용하기
06:02 프롬프트로 웹사이트 만들기
07:09 AI Slop을 줄이는 프롬프트 작성법
08:23 랜딩 페이지 생성 결과
09:12 스크롤 인터랙션 고도화하기
10:10 Connector와 MCP 활용
10:37 Figma Make 활용 정리
🔥 디자인베이스 웹사이트 : http://designbase.co.kr/
🔥 인스타그램 : https://www.instagram.com/designbasekorea/
🔥 이메일 문의 : [email protected]
🔥 카카오 오픈채팅방 : https://open.kakao.com/o/gmwngljb (참여코드 : dgoing12)
디자인 Context 연결, AI 모델 선택과 반복 수정, 코드 확인, AI Slop을 줄이는 프롬프트 작성법, 랜딩 페이지와 스크롤 인터랙션 제작까지 Figma Make의 핵심 활용법을 살펴봅니다.
#Figma #FigmaMake #피그마강좌
🕐 타임스탬프
00:00 Figma Make로 달라지는 디자인 방식
01:18 기존 디자인을 실제 화면으로 구현하기
02:05 Build 모드와 AI 모델 선택하기
03:52 버전, 코드, Edit 기능 활용하기
06:02 프롬프트로 웹사이트 만들기
07:09 AI Slop을 줄이는 프롬프트 작성법
08:23 랜딩 페이지 생성 결과
09:12 스크롤 인터랙션 고도화하기
10:10 Connector와 MCP 활용
10:37 Figma Make 활용 정리
🔥 디자인베이스 웹사이트 : http://designbase.co.kr/
🔥 인스타그램 : https://www.instagram.com/designbasekorea/
🔥 이메일 문의 : [email protected]
🔥 카카오 오픈채팅방 : https://open.kakao.com/o/gmwngljb (참여코드 : dgoing12)
디자인베이스 다른 영상
Astra로 3D 모델링부터 Three.js 웹사이트까지 만들어봤습니다 - GPT-6 Astra
조회수 22,984
Claude Design 디자인 시스템 만들고 앱·슬라이드에 같은 스타일 재사용하기 - 클로드 디자인 강좌 03
조회수 2,962
Claude Design 퀄리티 높이는 법 | 디자인 브리프와 레퍼런스 활용하기 - 클로드 디자인 강좌 02
조회수 2,996
상품 상세 UI 개선하기 | UX/UI 디자인 문제를 하나씩 고쳐봅니다 - UXUI 디자인 강좌 05-18
조회수 5,269
Claude Design 사용법 | 프롬프트로 UI 만들고 수정·반응형까지 - 클로드 디자인 강좌 01
조회수 7,848
웹사이트를 Figma로 그대로 가져오기 | Figma Chrome Extension 사용법 - 피그마 강좌 1-9
조회수 4,065
웹디자인 컬러 사용법 | UI 컬러 시스템과 디자인 토큰 이해하기 - 웹디자인 강좌 2-4
조회수 2,964
Figma Buzz 사용법 | 콘텐츠 디자인을 템플릿으로 자동화하기 - 피그마 강좌 1-8
조회수 2,636