Figma는 웹페이지를 편집 가능한 Figma 레이어로 가져오는 Chrome Extension을 공개했습니다. 어떤 웹페이지나 페이지 내의 요소를 캡처하여 Figma에 디자인 레이어로 가져올 수 있습니다. 물론 이런 기능을 가진 기존의 서드파티 플러그인(html.to.design)이 있죠. 이 플러그인의 런칭이 중요한 이유는 Figma 공식 크롬 익스텐션이며, 무려! “무료” 라는 것입니다.
확장 프로그램 설치하기
-
‘Chrome에 추가’ 버튼을 클릭한 다음, 안내 창에서 ‘확장 프로그램 추가’ 버튼을 선택하여 확인합니다.
-
편리하게 접근할 수 있도록 툴바에 Figma 아이콘을 고정(Pin)합니다.
-
Figma 아이콘을 클릭하고 Figma에서 사용하는 것과 동일한 계정으로 로그인합니다.
페이지 또는 요소 캡처하기
-
1단계: 툴바 열기 캡처하려는 웹페이지로 이동한 다음, Chrome 툴바에서 Figma 아이콘을 클릭합니다. 페이지에 캡처 툴바가 나타납니다.
-
2단계: 캡처할 대상 선택하기 두 가지 옵션이 있습니다:
-
특정 요소를 캡처:
Select element(요소 선택)를 클릭한 후 마우스를 올려 원하는 영역(카드, 히어로 섹션, 버튼 등)을 강조 표시(Highlight)한 다음 클릭하여 캡처합니다. -
전체 페이지를 캡처:
Capture page(페이지 캡처)를 클릭합니다. 캡처에는 스크롤되어 화면 밖에 가려진 페이지 부분까지 모두 포함됩니다.
캡처한 각 항목은 툴바의 트레이(Tray)에 추가되며 자동으로 클립보드에 복사됩니다.
-
-
3단계: Figma에 붙여넣기 Figma Design 파일이나 FigJam 보드를 열고 macOS는
⌘V, Windows / Linux는Ctrl+V를 눌러 붙여넣습니다. 캡처본이 프레임, 텍스트, 이미지, 도형 등 Figma 고유의 레이어로 캔버스에 배치되며, 다른 일반 콘텐츠와 마찬가지로 이동, 편집, 스타일 재지정이 가능합니다.
앞으로 디자인 워크플로우는 더 빨라질 것입니다
디자인 툴은 점점 제작 도구를 넘어 협업 플랫폼으로 진화하고 있습니다.
이번 Chrome Extension 역시 단순한 편의 기능이 아니라 디자인와 개발, 그리고 AI를 연결하는 새로운 워크플로우의 시작이라고 볼 수 있습니다.
특히 AI가 빠르게 UI를 생성하는 시대에는 결과물을 얼마나 빠르게 수정하고 발전시키는지가 경쟁력이 됩니다.
웹을 디자인으로 가져오는 과정이 쉬워질수록 디자이너는 반복 작업보다 더 중요한 문제 해결과 사용자 경험에 집중할 수 있습니다.
앞으로 Figma를 사용하는 디자이너라면 한 번쯤 직접 사용해 볼 만한 기능입니다.
-
실무 활용 방법: 마음에 드는 레이아웃이나 자사 프로덕션 페이지를 캡처해 Figma에 붙여넣은 뒤, 마우스 우클릭 후
Send to Figma Make(Figma Make로 전송)를 선택합니다. 이를 통해 가져온 정적 레이어를 기반으로 생성형 AI 기능을 활용해 작동하는 프로토타입을 순식간에 만들 수 있습니다. -
UX 관점: 기획 및 초기 와이어프레임 단계에서 완벽한 에셋이 갖춰지지 않았더라도, 검증된 프로덕션 UI를 재가공하여 사용자 테스트(UT)용 가상 시나리오를 신속하게 설계할 수 있습니다.
-
생산성 향상 포인트: 디자인 에셋을 추출하고 프로토타이핑 툴로 연동하는 과정이 단 몇 번의 클릭으로 단축됩니다. 특히 Figma의 AI 기능(Figma Make)과 결합하여 화면 간의 전환 흐름이나 인터랙션을 수작업 없이 자동 생성할 수 있어 인터랙션 설계 공수가 획기적으로 줄어듭니다.
-
기존 방식과의 차이: 예전에는 웹 화면을 캡처한 뒤, 프로토타입을 만들기 위해 각 요소를 일일이 다시 그리고(Re-drawing) 인터랙션 와이어를 하나하나 연결해야 했습니다. 이제는 라이브 웹(HTML) → Figma 레이어 → AI 프로토타입(Figma Make)으로 이어지는 자동화 파이프라인이 구축되었습니다.
-
앞으로의 전망: 디자인의 역할이 ‘화면을 정교하게 그리는 것’에서 ‘요소들을 조합하고 AI를 통해 사용자 경험을 조율하는 것’으로 이동하고 있음을 보여줍니다. Figma 생태계 내에서 AI 도구와의 연동이 강화되면서 디자이너의 생산성은 폭발적으로 증가할 것입니다.
