웹사이트를 Figma로 캡처하는 방법

Chrome 웹 스토어에 방문하여 "Chrome에 추가"를 클릭하세요. PixelSync는 캡처를 시작할 때만 페이지를 읽는 가벼운 확장 프로그램입니다.

1. 캡처할 웹 페이지로 이동합니다.
2. 도구 모음의 PixelSync 아이콘을 클릭합니다.
3. "전체 페이지 캡처"를 클릭합니다. PixelSync가 라이브 DOM을 읽어 Figma 호환 레이어로 변환합니다.
4. 결과가 자동으로 클립보드에 복사됩니다.

전체 페이지가 필요 없나요? '요소 선택' 모드를 사용하세요:

1. PixelSync 아이콘을 클릭합니다.
2. '요소 선택'을 클릭합니다. 페이지 위에 마우스를 올리면 파란색 오버레이가 나타납니다.
3. 원하는 요소를 클릭합니다. 해당 섹션만 캡처되어 클립보드에 복사됩니다.

Figma를 열고 ⌘V를 누릅니다 (Windows에서는 Ctrl+V). 편집 가능한 레이어가 나타납니다.

Figma 플러그인 불필요. PixelSync는 Figma 네이티브 형식으로 클립보드에 직접 씁니다.

캡처 전 팝업에서 '스마트 정리'를 켜세요. 보이지 않는 요소, 빈 래퍼 div, 레이아웃 노이즈를 자동으로 제거합니다.

PixelSync는 브라우저에서 볼 수 있는 모든 것을 캡처합니다 — 인증이 필요한 페이지도 포함.

모든 처리가 브라우저에서 이루어지므로, 로그인 자격 증명과 세션 데이터는 기기를 떠나지 않습니다.

PixelSync는 현재 보고 있는 뷰포트를 캡처합니다. 모바일 또는 태블릿 레이아웃을 캡처하려면:

1. Chrome DevTools(F12)를 열어 기기 모드를 전환하거나 브라우저 창 크기를 조정합니다.
2. 원하는 뷰포트 너비를 설정합니다 (예: iPhone용 375px).
3. CSS 미디어 쿼리가 적용되도록 페이지를 새로고침합니다.
4. 평소처럼 PixelSync로 캡처합니다.

PixelSync는 현재 prefers-color-scheme를 그대로 캡처합니다. 두 테마를 모두 캡처하려면:

1. 현재 테마에서 페이지를 캡처합니다.
2. OS 외관을 전환합니다 (macOS: 시스템 환경설정 → 외관, Windows: 설정 → 개인 설정 → 색).
3. 페이지를 새로고침하고 다시 캡처합니다.

• •먼저 페이지를 스크롤하여 모든 지연 로딩 콘텐츠를 로드합니다.
• •복잡한 페이지에는 '요소 선택' 사용 — 더 작은 캡처가 더 빠르고 깔끔합니다.
• •스마트 정리를 활성화하여 Figma 레이어를 정리합니다.
• •커스텀 웹 폰트는 Figma에서 font-family 이름으로 표시됩니다.
• •복잡한 CSS 기능은 변환 중 단순화될 수 있습니다.
• •교차 출처 이미지는 빈 박스로 표시될 수 있습니다.
• •출력은 편집 가능한 시작점이며, 픽셀 퍼펙트 복제가 아닙니다.
• •PixelSync는 보이는 것을 캡처합니다 — 자동 스크롤이나 지연 콘텐츠 자동 트리거는 하지 않습니다.