Figgy

Figma 디자인을 브라우저 우측 대시보드에 오버레이하는 도구

Figgy는 Figma 디자인과 실제 구현된 웹 페이지를 겹쳐 비교할 수 있는 시각적 오버레이 도구입니다. 프론트엔드 개발자는 종종 “디자인과 얼마나 정확하게 일치했는가?“를 고민하게 됩니다. 특히 여백, 정렬, 폰트 크기 등은 눈으로 대강 비교하기 어렵고, 디자이너의 의도를 정확히 구현했는지 확인하는 데 시간이 오래 걸릴 수 있습니다. Figgy는 이런 고민을 해결하기 위해 만들어졌습니다. 이 확장 프로그램은 사용자가 지정한 Figma 디자인을 PNG 이미지로 불러와 현재 웹 페이지 위에 오버레이 형식으로 띄워줍니다. 그리고 페이지 내에서 실제 DOM 요소를 클릭하면, 해당 요소와 디자인 사이의 픽셀 단위 차이를 자동으로 계산하여 툴팁 형태로 보여줍니다. 이 과정을 통해 사용자(개발자)는 어떤 요소의 위치나 크기에 오차가 있는지 빠르게 식별할 수 있고, 디자이너는 실제 구현 결과를 손쉽게 검수할 수 있습니다. 또한 Figgy는 반응형 디자인을 고려하여, 사용 중인 디바이스 해상도(PC, 태블릿, 모바일)에 따라 자동으로 적절한 PNG 이미지를 적용합니다. 해상도에 따라 다른 디자인 시안이 있는 경우에도 별도로 설정할 필요 없이 알아서 전환되므로, 각 뷰포트에서의 정합성을 효율적으로 점검할 수 있습니다. 디자인 오차를 표시하는 방식은 유저가 원하는 스타일로 커스터마이징할 수 있습니다. 강조 박스의 선 스타일이나 색상, 툴팁의 위치 등도 자유롭게 조절 가능하며, 기본 설정만으로도 직관적인 피드백을 제공받을 수 있도록 설계되어 있습니다. 추가로, 단축키 기반의 오버레이 토글 기능도 지원되어 개발 중에 빠르게 비교 화면을 띄우거나 숨길 수 있습니다. 전체 화면을 가리는 별도 UI 없이도, 평소 작업 흐름을 방해하지 않고 자연스럽게 사용할 수 있다는 점이 큰 장점입니다. Figgy는 디자이너와 개발자가 협업하는 실무 환경에서 실질적인 도움을 줄 수 있는 도구입니다. 디자인 의도를 최대한 정확하게 구현하고자 하는 개발자, 혹은 실제 구현 결과를 빠르게 검토하고 싶은 디자이너라면 Figgy가 그 과정을 훨씬 간결하고 효율적으로 만들어 줄 것입니다.