Export to Figma 제작자: Shoun Eftikharul Alam

웹사이트를 Figma로 변환하세요. 모든 페이지의 실제 UI를 가져와 깔끔하고 구조화된 Figma 레이어로 바꿔 줍니다. 스크린샷도, 처음부터 다시 만드는 작업도 필요 없습니다.

🚀 이런 일을 합니다
• 모든 웹사이트를 Figma 레이어로 변환 (페이지 전체 또는 특정 영역)
• 랜딩 페이지, 대시보드, 경쟁사 디자인을 Figma로 복사
• 타이포그래피, 색상, 여백, 패딩, 마진, CSS를 코드 없이 확인
• 로고, SVG, 이미지, 에셋을 클릭 한 번에 추출
• 색상 팔레트, 폰트 패밀리, WCAG 대비를 검사
• 실제 제품에서 디자인 시스템 레퍼런스 구축
• AI 코딩 에이전트와 개발자에게 전달할 DESIGN.md·SKILL.md 명세 생성
• 내장 스포이트로 페이지의 어떤 색이든 추출 (픽셀 단위 정확한 HEX)
• 아무 페이지나 요소를 우클릭해 바로 Figma로 전송
• 임베드된 iframe, 교차 출처 콘텐츠, localhost, 로컬 HTML 파일까지 캡처

🎯 디자이너와 개발자에게 딱 맞습니다
• 웹사이트를 손으로 다시 만들지 않고 Figma로 복사
• 기존 웹사이트의 리디자인과 현대화
• HTML과 CSS를 Figma로 변환
• 경쟁사 랜딩 페이지를 편집 가능한 레퍼런스로 활용
• 브랜드 색상, 폰트, 에셋을 몇 초 만에 추출
• 스크린샷이 아니라 실제 제품에서 바로 작업
• Cursor, Claude, GitHub Copilot, Windsurf 같은 AI 도구용 디자인 시스템 문서와 토큰 생성
• 실제 UI에서 뽑은 정확한 디자인 명세를 개발·AI 워크플로로 전달

⚡ 사용 방법
1. Firefox 확장 프로그램 설치
2. 아무 웹페이지나 열기
3. "Export to Figma"를 클릭하고 페이지 전체 또는 요소를 캡처
4. Figma에 바로 붙여넣기 (Cmd/Ctrl + V), 별도의 Figma 플러그인 불필요

편집 가능한 텍스트, 폰트, 색상, 이미지와 깔끔한 레이어 구조를 갖춘 진짜 Figma 프레임을 얻습니다. 납작한 이미지가 아닙니다.

✨ 주요 기능
• 페이지 전체 및 요소 단위 캡처
• 편집 가능하고 정리된 레이어 구조
• 레이아웃, 스타일, 폰트, 텍스트를 그대로 유지
• Figma에 바로 붙여넣기, 보조 플러그인 없음
• 여백·패딩·마진 오버레이가 있는 Inspect 모드
• 색상 추출기 (HEX, RGB, HSL, OKLCH, Tailwind)
• 폰트 사용 내역까지 보여주는 타이포그래피 스캐너
• 이미지, SVG, 동영상, GIF, Lottie 파일 다운로드
• WCAG 접근성 대비 검사기
• AI로 만든 웹사이트도 지원 (v0, Lovable, Bolt, Replit, Framer 등)
• 데스크톱, 태블릿, 모바일, 사용자 지정 너비 프리셋
• 픽셀 돋보기가 달린 스포이트 색상 추출 (HEX)
• DESIGN.md + SKILL.md 생성기 — 디자인 토큰, 브랜드, 여백, 접근성, 규칙을 AI가 바로 쓸 수 있는 Markdown으로
• 우클릭 메뉴 캡처
• 교차 출처 및 임베드 iframe 캡처

💡 이런 곳에 씁니다
• 클라이언트 웹사이트 리디자인
• 경쟁사 조사 및 분석
• 기존 웹사이트를 Figma로 이전
• 운영 중인 사이트에서 디자인 시스템 추출
• 빠른 프로토타이핑과 목업
• 실제 웹사이트로 스타일 가이드 만들기
• 운영 중인 UI·UX 패턴 연구
• AI 코딩 에이전트와 디자인 투 코드 워크플로를 위한 DESIGN.md 컨텍스트 생성
• 라이브 사이트에서 디자인 토큰과 브랜드 가이드라인 문서화
• localhost 프로토타입과 AI 생성 웹사이트 캡처