Easier comparing Figma design with its implementation for designers and developers.

Latest Version

Version
0.0.14
Update
July 12, 2022
Size
659KiB
Developer
Category
Users
362
Rating
4.66667 ★
Manifest Version
2
Web Store Status
Languages Support
English
See more
Permissions
*://*/*
Storage
Tabs
See more

Ghost Screen Extension

What's this?

Extension for Google Chrome. Integration with Figma API allows you to compare a design and its implementation in one click and immediately see what needs to be fixed.

Why?

- No export/import: design is taken directly from Figma automatically;
- No need to spend time setting up. Ghost Screen opens your site with required resolution and places the design above it in correct way;
- It is convenient to compare a 1920px design and a site in a required resolution even on a 1020x768 laptop.

How it works?

Install from the official Chrome Store → Sign in with your Figma account → Choose a frame and its implementation to compare. Then Ghost Screen will define how to accurately lay out the design of any size on top of the site.
Read more

Source Manifest.json

{
"update_url": "https://clients2.google.com/service/update2/crx",
"version":"0.0.14",
"manifest_version":2,
"default_locale":"en",
"name":"__MSG_EXTENSION_NAME__",
"description":"__MSG_EXTENSION_DESCRIPTION__",
"permissions":["*://*/*",
"storage",
"tabs"],
"web_accessible_resources":["fonts/inter-400.woff",
"fonts/inter-400.woff2",
"fonts/inter-500.woff",
"fonts/inter-500.woff2",
"styles/fonts.css",
"styles/workspace.css",
"scripts/workspace.js"],
"background":{"page":"background.html",
"persistent":true},
"icons":{"32":"icons/32.png",
"128":"icons/128.png"},
"browser_action":{"default_icon":"icons/32.png"},
"content_security_policy":"script-src 'self' 'unsafe-eval' 'sha256-lc7RqjazxhzUTsmiv3eNlfgdnrxwEUoMKh/DLKpdtD8=' 'sha256-rcB4pkFgiUFBpLn+uBtqGHZ4sT0Iz3JEue2tktsK4KI=' https://www.google-analytics.com; object-src 'self'"}
Read more