Figgy

Figgy는 Figma 디자인과 실제 구현된 웹 페이지를 겹쳐 비교할 수 있는 시각적 오버레이 도구입니다.

프론트엔드 개발자는 종종 “디자인과 얼마나 정확하게 일치했는가?“를 고민하게 됩니다. 특히 여백, 정렬, 폰트 크기 등은 눈으로 대강 비교하기 어렵고, 디자이너의 의도를 정확히 구현했는지 확인하는 데 시간이 오래 걸릴 수 있습니다. Figgy는 이런 고민을 해결하기 위해 만들어졌습니다.

이 확장 프로그램은 사용자가 지정한 Figma 디자인을 PNG 이미지로 불러와 현재 웹 페이지 위에 오버레이 형식으로 띄워줍니다. 그리고 페이지 내에서 실제 DOM 요소를 클릭하면, 해당 요소와 디자인 사이의 픽셀 단위 차이를 자동으로 계산하여 툴팁 형태로 보여줍니다.

이 과정을 통해 사용자(개발자)는 어떤 요소의 위치나 크기에 오차가 있는지 빠르게 식별할 수 있고, 디자이너는 실제 구현 결과를 손쉽게 검수할 수 있습니다.

또한 Figgy는 반응형 디자인을 고려하여, 사용 중인 디바이스 해상도(PC, 태블릿, 모바일)에 따라 자동으로 적절한 PNG 이미지를 적용합니다. 해상도에 따라 다른 디자인 시안이 있는 경우에도 별도로 설정할 필요 없이 알아서 전환되므로, 각 뷰포트에서의 정합성을 효율적으로 점검할 수 있습니다.

디자인 오차를 표시하는 방식은 유저가 원하는 스타일로 커스터마이징할 수 있습니다. 강조 박스의 선 스타일이나 색상, 툴팁의 위치 등도 자유롭게 조절 가능하며, 기본 설정만으로도 직관적인 피드백을 제공받을 수 있도록 설계되어 있습니다.