웹페이지를 Figma로 내보내기

로컬 워크플로 작동 방식

CloneWebsite는 웹페이지를 변환 서버로 보내지 않습니다. Chrome 확장 프로그램이 활성 탭에서 렌더링된 페이지를 읽고, 메모리에 버전이 지정된 .cdesign 아카이브를 생성하여 다운로드하거나 로컬에 저장합니다. CloneWebsite Figma 플러그인이 해당 파일을 열어 현재 Figma 문서에 레이어를 만듭니다.

렌더링된 웹페이지 → Chrome 확장 프로그램 → 로컬 .cdesign 파일 → Figma 플러그인 → 편집 가능한 레이어

.cdesign 파일은 개방형 ZIP 기반 컨테이너입니다. 매니페스트, 캡처된 상태별 JSON 장면 파일 하나, 콘텐츠 주소 지정 이미지 에셋을 포함합니다.

페이지 또는 컴포넌트 캡처

1. 웹페이지를 열고 콘텐츠와 웹 글꼴이 렌더링을 완료할 때까지 기다립니다.
2. CloneWebsite 도구 모음을 열고 출력을 웹사이트에서 Figma로 변경합니다.
3. 페이지 클론 또는 컴포넌트 클론을 선택합니다.
4. Figma 캡처 옵션을 열고 뷰포트와 테마 조합을 선택합니다. 초기 설정은 현재 뷰포트와 현재 테마를 캡처합니다. 1440, 768, 390 픽셀 뷰포트와 밝거나 어두운 테마를 최대 6개 조합까지 추가할 수 있습니다.
5. 반응형 뷰포트, 컴포넌트 상호작용 상태, iframe/필터 래스터 폴백 또는 더 정확한 브라우저 지오메트리가 필요할 때 향상된 캡처를 활성화된 상태로 유지합니다.
6. 시작을 선택합니다. 컴포넌트 모드에서는 페이지의 컴포넌트를 클릭하고 선택을 확인합니다.
7. 결과 .cdesign 파일을 다운로드하거나 확장 프로그램의 로컬 프로젝트 목록에 저장하여 나중에 다운로드합니다.

Chrome 디버거 권한

Chrome은 debugger 권한을 선택적으로 선언하는 것을 지원하지 않으므로 확장 프로그램이 설치될 때 부여됩니다. CloneWebsite는 향상된 캡처를 활성화하고 Figma 캡처를 시작할 때만 디버거를 연결합니다. 뷰포트/테마 조합 에뮬레이션, 지원되는 컴포넌트 의사 상태 강제 적용, 지원되지 않는 시각적 하위 트리에 대한 로컬 스크린샷 생성을 위해 일시적으로 사용됩니다. 캡처가 완료되거나 실패하면 확장 프로그램이 탭에서 분리됩니다.

향상된 캡처가 꺼져 있을 때 확장 프로그램은 디버거를 연결하지 않습니다. 기본 모드는 현재 뷰포트, 현재 테마 및 Default 컴포넌트 상태를 캡처합니다. 캡처 보고서는 건너뛴 향상된 장면 또는 폴백을 설명합니다.

Chrome DevTools와 다른 디버거 클라이언트는 동일한 탭을 동시에 제어할 수 없습니다. 향상된 캡처가 연결 오류를 보고하면 해당 탭의 DevTools를 닫으세요.

Figma로 가져오기

내부 릴리스 단계 동안:

1. figma_plugin/에서 pnpm install && pnpm build로 플러그인을 빌드합니다.
2. Figma Desktop에서 **Plugins → Development → Import plugin from manifest…**를 선택합니다.
3. figma_plugin/manifest.json을 선택합니다.
4. CloneWebsite Design Importer를 실행합니다.
5. .cdesign 파일을 끌어다 놓고, 가져올 장면을 선택하고 가져오기를 시작합니다.

플러그인에는 네트워크 권한이 없습니다. 아카이브 구문 분석, 이미지 생성, 글꼴 일치 및 레이어 생성은 기기의 Figma 내에서 이루어집니다.

편집 가능한 상태로 유지되는 항목

• 프레임, 채우기, 테두리, 모서리 반경, 그림자 및 기본 혼합 모드
• 텍스트 콘텐츠, 글꼴 크기, 줄 높이, 정렬, 장식 및 색상
• 이미지 및 SVG 레이어
• 고신뢰도 Flexbox 레이아웃은 Figma Auto Layout으로
• 선택한 컴포넌트는 Figma 컴포넌트로
• 향상된 캡처가 선택한 컴포넌트를 매핑할 수 있는 경우 Default, Hover, Focus, Active, Disabled 컴포넌트 상태는 변형으로

그리드 및 자유 형식 페이지 영역은 지오메트리를 보존하기 위해 절대 위치를 사용합니다. 복잡한 필터, 마스크, iframe, 비디오 표면 및 지원되지 않는 브라우저 효과는 로컬 래스터 폴백 레이어가 될 수 있습니다.

글꼴 및 가져오기 보고서

Figma 플러그인은 페이지의 원격 웹 글꼴을 편집기에 설치할 수 없습니다. 가져오기 도구는 먼저 Figma에서 사용 가능한 글꼴 중에서 요청된 패밀리와 스타일을 찾습니다. 정확히 일치하는 항목을 로드할 수 없는 경우 편집 가능한 로컬 폴백을 사용하고 가져오기 보고서에 대체 항목을 나열합니다.

보고서는 또한 누락된 에셋, 래스터 폴백, 건너뛴 안전하지 않은 SVG 마크업, 노드 제한 및 캡처 경고도 나열합니다. 가져온 파일을 프로덕션 디자인 소스로 취급하기 전에 검토하세요.

개인정보 보호 및 책임감 있는 사용

페이지 콘텐츠는 CloneWebsite에 업로드되지 않습니다. 캡처 중 네트워크 요청은 페이지에서 이미 참조된 리소스 다운로드와, 해당 기능을 별도로 구성한 경우 선택적 BYOK AI 엔드포인트로 제한됩니다. 확장 프로그램 개인정보 처리방침을 참조하세요.

액세스 권한이 있는 페이지만 캡처하세요. 원본 사이트의 저작권, 상표, 개인정보 및 디자인 권리는 소유자에게 남아 있습니다.