피그마가 웹페이지를 편집 가능한 디자인 레이어로 가져오는 기능을 추가했어요. ‘HTML to Figma’ 기능은 라이브 웹페이지를 스크린샷이나 이미지가 아닌 피그마의 네이티브 레이어로 변환해주는 것이 특징입니다. 가져온 콘텐츠는 텍스트, 이미지, 도형, 프레임 등으로 구성되며, 사용자는 일반적인 피그마 요소처럼 자유롭게 수정하거나 재구성할 수 있어요.
실제 웹페이지를 피그마 파일로 변환하는 건 ‹div›RIOTS의 html.to.design 플러그인을 통해 이미 구현되는 기능이었는데요, 이제는 피그마의 공식 플러그인 기능으로 탑재되었다는 것이 주목해야 할 지점입니다. 아래에서 구체적인 사용 방법과 특징 등을 함께 알아볼게요.
HTML to Figma 사용 방법
- 크롬 웹스토어에서 피그마 크롬 확장 프로그램을 설치한 뒤 피그마 계정으로 로그인합니다.
- 원하는 웹페이지를 연 뒤 확장 프로그램을 실행해 주세요.
- 특정 요소만 가져오려면 'Select element', 전체 페이지를 가져오려면 'Capture page'를 선택합니다.
- 캡처가 완료되면 콘텐츠가 클립보드에 자동으로 복사돼요.
- 피그마 디자인 파일이나 피그잼 보드에 붙여넣으면 편집 가능한 레이어 형태로 배치됩니다.
기존 확장 프로그램을 사용하고 있는 이용자라면 별도의 추가 설치 없이 유료 플랜 계정으로 로그인했을 때 기능이 자동으로 활성화됩니다.
유료 플랜 대상 베타 기능
피그마 크롬 확장 프로그램 자체는 무료로 설치할 수 있으며, 구글 캘린더 연동 등 기존 기능은 모든 요금제에서 계속 사용할 수 있습니다. 다만 웹페이지를 디자인 레이어로 변환하는 이 HTML to Figma 기능은 현재 베타 단계로 운영되고 있으며 유료 플랜 이용자에게만 제공돼요. 또한 이 기능은 AI 크레딧을 사용하지 않는다고 합니다.
현재 베타 단계인 만큼 일부 제한 사항도 존재합니다. 캡처한 요소는 일반 레이어 형태로 생성되고 디자인 시스템의 컴포넌트나 변수와 자동으로 연결되지는 않습니다. 관련 기능은 향후 베타 기간 중 추가될 예정이라고 해요.
자바스크립트 애니메이션이 많거나 캔버스 기반 렌더링, 복잡한 스크롤 효과가 적용된 웹사이트는 원본과 완전히 동일하게 변환되지 않을 수 있습니다. 피그마는 이런 경우 페이지 전체를 가져오기보다 필요한 영역만 선택해 캡처하는 방식을 권장하고 있어요.
HTML to Figma 기능이 탑재된 피그마 플러그인 다운로드 및 자세한 정보는 아래의 공식 웹페이지를 참고해 주세요.
