Figma Sites 사용법 | 피그마에서 반응형 웹사이트 만들고 배포하기 - 피그마 강좌 1-7
지금 보고 있는 영상
Figma Sites 사용법 | 피그마에서 반응형 웹사이트 만들고 배포하기 - 피그마 강좌 1-7
조회수 4,515
영상 설명 · 눌러서 펼치기
Figma Sites를 활용해 피그마에서 디자인한 화면을 실제 반응형 웹사이트로 만들고 배포하는 방법을 알아봅니다.
페이지와 브레이크 포인트 설정, Embed와 CMS, Auto Layout을 활용한 반응형 구성, 시맨틱 태그와 Publish까지 Figma Sites의 핵심 기능을 살펴봅니다.
🕐 타임스탬프
00:00 Figma Sites로 실제 웹사이트 만들기
00:27 사이트 템플릿 살펴보기
02:04 페이지와 반응형 브레이크 포인트
03:37 Webpages와 반응형 레이어 관리
05:29 Insert와 Embed 기능 활용하기
07:54 Variables와 Make 기능
08:29 웹 레이아웃의 Position 이해하기
11:34 시맨틱 태그와 웹 접근성
12:12 CMS로 반복 콘텐츠 관리하기
16:38 기존 Figma 디자인을 Sites로 가져오기
17:46 Auto Layout으로 반응형 만들기
18:31 브레이크 포인트별 타이포그래피 설정
22:02 Publish와 사이트 설정
23:25 Figma Sites 활용 정리
🔥 디자인베이스 웹사이트 : https://designbase.co.kr/
🔥 인스타그램 : https://www.instagram.com/designbasekorea/
🔥 이메일 문의 : [email protected]
🔥 카카오 오픈채팅방 : https://open.kakao.com/o/gmwngljb (참여코드 : dgoing12)
#Figma #FigmaSites #피그마강좌
페이지와 브레이크 포인트 설정, Embed와 CMS, Auto Layout을 활용한 반응형 구성, 시맨틱 태그와 Publish까지 Figma Sites의 핵심 기능을 살펴봅니다.
🕐 타임스탬프
00:00 Figma Sites로 실제 웹사이트 만들기
00:27 사이트 템플릿 살펴보기
02:04 페이지와 반응형 브레이크 포인트
03:37 Webpages와 반응형 레이어 관리
05:29 Insert와 Embed 기능 활용하기
07:54 Variables와 Make 기능
08:29 웹 레이아웃의 Position 이해하기
11:34 시맨틱 태그와 웹 접근성
12:12 CMS로 반복 콘텐츠 관리하기
16:38 기존 Figma 디자인을 Sites로 가져오기
17:46 Auto Layout으로 반응형 만들기
18:31 브레이크 포인트별 타이포그래피 설정
22:02 Publish와 사이트 설정
23:25 Figma Sites 활용 정리
🔥 디자인베이스 웹사이트 : https://designbase.co.kr/
🔥 인스타그램 : https://www.instagram.com/designbasekorea/
🔥 이메일 문의 : [email protected]
🔥 카카오 오픈채팅방 : https://open.kakao.com/o/gmwngljb (참여코드 : dgoing12)
#Figma #FigmaSites #피그마강좌
디자인베이스 다른 영상
Astra로 3D 모델링부터 Three.js 웹사이트까지 만들어봤습니다 - GPT-6 Astra
조회수 12,708
Claude Design 디자인 시스템 만들고 앱·슬라이드에 같은 스타일 재사용하기 - 클로드 디자인 강좌 03
조회수 2,575
Claude Design 퀄리티 높이는 법 | 디자인 브리프와 레퍼런스 활용하기 - 클로드 디자인 강좌 02
조회수 2,861
상품 상세 UI 개선하기 | UX/UI 디자인 문제를 하나씩 고쳐봅니다 - UXUI 디자인 강좌 05-18
조회수 5,045
Claude Design 사용법 | 프롬프트로 UI 만들고 수정·반응형까지 - 클로드 디자인 강좌 01
조회수 6,818
웹사이트를 Figma로 그대로 가져오기 | Figma Chrome Extension 사용법 - 피그마 강좌 1-9
조회수 4,031
웹디자인 컬러 사용법 | UI 컬러 시스템과 디자인 토큰 이해하기 - 웹디자인 강좌 2-4
조회수 2,914
Figma Buzz 사용법 | 콘텐츠 디자인을 템플릿으로 자동화하기 - 피그마 강좌 1-8
조회수 2,569