Overview
Figma 디자인을 브라우저 우측 대시보드에 오버레이하는 도구
Figgy는 Figma 디자인과 실제 구현된 웹 페이지를 겹쳐 비교할 수 있는 시각적 오버레이 도구입니다. 프론트엔드 개발자는 종종 “디자인과 얼마나 정확하게 일치했는가?“를 고민하게 됩니다. 특히 여백, 정렬, 폰트 크기 등은 눈으로 대강 비교하기 어렵고, 디자이너의 의도를 정확히 구현했는지 확인하는 데 시간이 오래 걸릴 수 있습니다. Figgy는 이런 고민을 해결하기 위해 만들어졌습니다. 이 확장 프로그램은 사용자가 지정한 Figma 디자인을 PNG 이미지로 불러와 현재 웹 페이지 위에 오버레이 형식으로 띄워줍니다. 그리고 페이지 내에서 실제 DOM 요소를 클릭하면, 해당 요소와 디자인 사이의 픽셀 단위 차이를 자동으로 계산하여 툴팁 형태로 보여줍니다. 이 과정을 통해 사용자(개발자)는 어떤 요소의 위치나 크기에 오차가 있는지 빠르게 식별할 수 있고, 디자이너는 실제 구현 결과를 손쉽게 검수할 수 있습니다. 또한 Figgy는 반응형 디자인을 고려하여, 사용 중인 디바이스 해상도(PC, 태블릿, 모바일)에 따라 자동으로 적절한 PNG 이미지를 적용합니다. 해상도에 따라 다른 디자인 시안이 있는 경우에도 별도로 설정할 필요 없이 알아서 전환되므로, 각 뷰포트에서의 정합성을 효율적으로 점검할 수 있습니다. 디자인 오차를 표시하는 방식은 유저가 원하는 스타일로 커스터마이징할 수 있습니다. 강조 박스의 선 스타일이나 색상, 툴팁의 위치 등도 자유롭게 조절 가능하며, 기본 설정만으로도 직관적인 피드백을 제공받을 수 있도록 설계되어 있습니다. 추가로, 단축키 기반의 오버레이 토글 기능도 지원되어 개발 중에 빠르게 비교 화면을 띄우거나 숨길 수 있습니다. 전체 화면을 가리는 별도 UI 없이도, 평소 작업 흐름을 방해하지 않고 자연스럽게 사용할 수 있다는 점이 큰 장점입니다. Figgy는 디자이너와 개발자가 협업하는 실무 환경에서 실질적인 도움을 줄 수 있는 도구입니다. 디자인 의도를 최대한 정확하게 구현하고자 하는 개발자, 혹은 실제 구현 결과를 빠르게 검토하고 싶은 디자이너라면 Figgy가 그 과정을 훨씬 간결하고 효율적으로 만들어 줄 것입니다.
Details
- Version1.0.0
- UpdatedAugust 4, 2025
- Size139KiB
- Languages한국어
- Developer
Email
euns2eo@naver.com - Non-traderThis developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.
Privacy
Figgy has disclosed the following information regarding the collection and usage of your data. More detailed information can be found in the developer's privacy policy.
Figgy handles the following:
This developer declares that your data is
- Not being sold to third parties, outside of the approved use cases
- Not being used or transferred for purposes that are unrelated to the item's core functionality
- Not being used or transferred to determine creditworthiness or for lending purposes
