웹사이트를 Figma로 그대로 가져오기 | Figma Chrome Extension 사용법 - 피그마 강좌 1-9
지금 보고 있는 영상
웹사이트를 Figma로 그대로 가져오기 | Figma Chrome Extension 사용법 - 피그마 강좌 1-9
조회수 4,031
영상 설명 · 눌러서 펼치기
Figma Chrome Extension을 활용해 기존 웹사이트를 Figma로 가져와 레이아웃, 타이포그래피, 컬러와 UI 구조를 분석하는 방법을 알아봅니다.
전체 페이지를 가져오는 Capture Page와 원하는 영역만 선택하는 Select Element의 차이, 데스크탑·모바일 화면 캡처, 가져온 디자인의 한계까지 빠르게 살펴봅니다.
로컬 사이트 캡쳐에 사용된 코드 예제는 멤버십 회원 대상으로 제공됩니다.
🕐 타임스탬프
00:00 웹사이트를 Figma로 가져오는 이유
00:24 Figma Chrome Extension 설치하기
00:58 웹사이트 캡처 시작하기
01:14 Capture Page와 Select Element
01:29 가져온 디자인의 한계
02:00 원하는 요소만 선택해서 가져오기
02:36 AI로 만든 웹사이트도 Figma로 가져오기
03:16 데스크탑·모바일 결과 확인
🚀 멤버십 가입 : https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join
🚀 예제 다운로드는 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.
🔥 디자인베이스 웹사이트 : https://designbase.co.kr/
🔥 인스타그램 : https://www.instagram.com/designbasekorea/
🔥 이메일 문의 : [[email protected]](mailto:[email protected])
🔥 카카오 오픈채팅방 : https://open.kakao.com/o/gmwngljb (참여코드 : dgoing12)
#Figma #FigmaExtension #피그마강좌
전체 페이지를 가져오는 Capture Page와 원하는 영역만 선택하는 Select Element의 차이, 데스크탑·모바일 화면 캡처, 가져온 디자인의 한계까지 빠르게 살펴봅니다.
로컬 사이트 캡쳐에 사용된 코드 예제는 멤버십 회원 대상으로 제공됩니다.
🕐 타임스탬프
00:00 웹사이트를 Figma로 가져오는 이유
00:24 Figma Chrome Extension 설치하기
00:58 웹사이트 캡처 시작하기
01:14 Capture Page와 Select Element
01:29 가져온 디자인의 한계
02:00 원하는 요소만 선택해서 가져오기
02:36 AI로 만든 웹사이트도 Figma로 가져오기
03:16 데스크탑·모바일 결과 확인
🚀 멤버십 가입 : https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join
🚀 예제 다운로드는 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.
🔥 디자인베이스 웹사이트 : https://designbase.co.kr/
🔥 인스타그램 : https://www.instagram.com/designbasekorea/
🔥 이메일 문의 : [[email protected]](mailto:[email protected])
🔥 카카오 오픈채팅방 : https://open.kakao.com/o/gmwngljb (참여코드 : dgoing12)
#Figma #FigmaExtension #피그마강좌
디자인베이스 다른 영상
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
웹디자인 컬러 사용법 | UI 컬러 시스템과 디자인 토큰 이해하기 - 웹디자인 강좌 2-4
조회수 2,914
Figma Buzz 사용법 | 콘텐츠 디자인을 템플릿으로 자동화하기 - 피그마 강좌 1-8
조회수 2,569
Figma Sites 사용법 | 피그마에서 반응형 웹사이트 만들고 배포하기 - 피그마 강좌 1-7
조회수 4,515