Compare your Figma design with real DOM

Latest Version

Version
1.0.5
Update
November 18, 2024
Size
87.36KiB
Developer
Category
Users
18
Rating
0 ★
Manifest Version
3
Web Store Status
Languages Support
한국어
See more
Permissions
ActiveTab
Identity
Storage
Tabs
Scripting
See more

FigDiff Extension

이 앱은 웹 페이지에서 Figma 디자인과 실제 웹 페이지의 디자인을 비교하는 Chrome 확장 프로그램입니다.

앱 개요
이 Chrome 확장 프로그램은 사용자가 Figma 디자인 파일과 실제 웹 페이지 디자인 간의 차이를 시각적으로 비교할 수 있게 해주는 도구입니다. 이를 통해 개발자는 웹 페이지가 디자인 요구사항을 충족하는지 확인할 수 있으며, 디자이너와 개발자 간의 의사소통을 개선하고 디자인 구현의 정확성을 높일 수 있습니다.

주요 기능
Figma 디자인 URL 입력 및 유효성 검사

사용자는 Figma 디자인의 URL을 입력할 수 있는 입력 창을 제공받습니다.
입력된 URL이 유효한 Figma URL인지 자동으로 검사하여 사용자가 잘못된 URL을 입력할 경우 경고 메시지를 표시합니다.

디자인 비교
사용자가 제출 버튼을 클릭하면, 앱은 현재 활성화된 웹 페이지와 입력된 Figma 디자인 간의 차이점을 분석하여 서버와의 통신을 통해 디자인의 차이점을 비교하고, 이 데이터를 클라이언트로 전송하여 결과를 렌더링합니다.

분석된 데이터는 웹 페이지에서 시각적으로 나타나며, Figma 디자인과 웹 페이지 간의 차이점을 강조하는 오버레이가 적용됩니다.

사용자는 웹 페이지와 디자인 간의 차이를 Opacitiy를 통하여 실시간으로 조정할 수 있는 슬라이더를 사용하여 각 디자인 요소의 불투명도를 조절할 수 있습니다.

진행 상태 및 결과 모니터링
비교 작업의 진행 상태를 실시간으로 모니터링할 수 있는 프로그레스 바가 제공됩니다.
분석이 완료되면, 결과 이미지와 함께 진행 상태, 오류 정보 등을 표시하여 사용자가 작업의 결과를 쉽게 확인할 수 있도록 합니다.

Figma 계정 로그인
사용자는 Figma 계정으로 로그인하여 OAuth 인증을 통해 앱과 Figma 계정을 연결할 수 있습니다.
인증 후, 앱은 Figma API를 사용하여 필요한 데이터를 접근하고 디자인 비교를 진행합니다.

결과 저장 및 재시도
비교 결과를 저장하고, 저장 후 사용자가 결과를 웹 서버에 업로드할 수 있는 기능이 제공됩니다.
저장된 데이터를 기반으로 다시 시도하거나 입력 화면으로 돌아갈 수 있는 옵션이 있습니다.

효율적인 개발 및 디자인 작업
디자이너와 개발자 간의 디자인 검토 과정에서 발생할 수 있는 오해를 줄이고, 명확한 시각적 피드백을 제공합니다.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "FigDiff", "version": "1.0.5", "description": "Compare your Figma design with real DOM", "action": { "default_popup": "index.html" }, "permissions": ["activeTab", "identity", "storage", "tabs", "scripting"], "host_permissions": ["https://*/*", "http://*/*"], "icons": { "128": "logo.png" }, "background": { "service_worker": "background.js", "type": "module" }, "content_scripts": [ { "matches": [""], "js": ["renderDifferences.js"] }, { "matches": ["https://figdiff.com/*"], "js": ["checkUserId.js"] }, { "matches": ["http://localhost:5173/*"], "js": ["checkUserId.js"] }, { "matches": [""], "js": ["takeScreenShot.js"] } ], "content_security_policy": { "extension_pages": "script-src 'self'; object-src 'self'" }, "oauth2": { "client_id": "o2aFpMNwOUWkP6eT9h0s6l", "scopes": ["file_read"] }}
Read more

Similar Extensions

icon

UI Inspector - Live Style Editor Extension · Developer Tools 18 2 ★ 90.41KiB

icon

Web to Figma Extension · Productivity 18 12 ★ 945KiB

icon

Pixelay for Figma Extension · Developer Tools 18 4 ★ 391KiB

icon

Tailored Notion Extension · Productivity 18 18 ★ 76.46KiB

icon

Vpn free | Figma Extension · Productivity 18 1 ★ 413KiB

icon

FigmaEX Extension · Productivity 18 5 ★ 751KiB

icon

HTML to Figma - by DemoWay (Pixel-Perfect Web to Figma Design) Extension · Productivity 18 9 ★ 9.59MiB

icon

Crazy Compare For Salesforce Extension · Developer Tools 18 21 ★ 81.89KiB

icon

Codia AI Web2Figma: Import Web to Editable Figma Extension · Developer Tools 18 0 ★ 657KiB

icon

html.to.design Extension · Productivity 18 72 ★ 333KiB

icon

Tiled - Tiling window manager Extension · Productivity 18 4 ★ 30.4KiB

icon

HTML to Figma — Import Webpages to Figma Extension · Productivity 18 1 ★ 99.73KiB

icon

Deezign Extension · Developer Tools 18 4 ★ 10.21KiB

icon

HTML to React & Figma by Magic Patterns Extension · Developer Tools 18 10 ★ 392KiB

icon

Inspecta - validate design implementation Extension · Developer Tools 18 3 ★ 420KiB

icon

BugHerd: Visual Feedback Tool for Websites Extension · Developer Tools 18 34 ★ 3.88MiB

icon

Find elements diff Extension · Developer Tools 18 9 ★ 45.73KiB

icon

Design Copilot Extension · Developer Tools 18 4 ★ 100KiB

icon

Color Contrast Checker Extension · Developer Tools 18 3 ★ 17.37MiB

icon

Balises Hn Check Reviews, Filtering ✅ Extension · Productivity 18 21 ★ 55.81KiB

icon

Pinpasta Extension Extension · Productivity 18 2 ★ 53.12KiB

icon

UMLGenius Extension · Productivity 18 1 ★ 36.2KiB

icon

GummyGrab Extension · Productivity 18 3 ★ 82.12KiB

icon

Drafito Extension · Productivity 18 0 ★ 584KiB