├── README.md ├── img ├── icon.png ├── preview.gif ├── screenshot.png ├── thumbnail.png └── thumbnail_big.png └── src ├── icons ├── icon-ext-128.png ├── icon-ext-16.png ├── icon-ext-48.png ├── icon-off-128.png ├── icon-off-16.png ├── icon-off-32.png ├── icon-off-48.png ├── icon-on-128.png ├── icon-on-16.png ├── icon-on-32.png └── icon-on-48.png ├── js ├── background.js └── request.js └── manifest.json /README.md: -------------------------------------------------------------------------------- 1 | Open in Figma - Chrome Extension 2 | ====================== 3 | 4 | This Chrome extension intercepts Figma shared links and redirects them to the [Figma desktop app](https://www.figma.com/downloads/). 5 | Platform: Windows, Mac OS. 6 | 7 | * [Official Website](https://www.fabriziorinaldi.io/openinfigma/) 8 | * [Chrome Web Store](https://chrome.google.com/webstore/detail/open-in-figma/ebalaiojkmmkimgpakabcblclljnoloh) 9 | * [Say Hi on Twitter](https://www.twitter.com/linuz90) 10 | 11 | ## Preview 12 | 13 | ![](img/preview.gif) 14 | 15 | 16 | ### Usage 17 | 1. Download [Figma desktop app](https://www.figma.com/downloads/). 18 | 2. [Install Extension](https://chrome.google.com/webstore/detail/open-in-figma/ebalaiojkmmkimgpakabcblclljnoloh). 19 | 20 | **Notice**: If you have uninstalled the Figma desktop app, disable the extension, otherwise it will close the tabs with Figma shared links. 21 | 22 | 23 | 24 | ### To install it manually: 25 | 26 | 1. Launch Chrome 27 | 2. Go to Extensions (`chrome://extensions/`) 28 | 3. Toggle `Developer mode` 29 | 4. Click `Load unpacked extension` 30 | 5. Select `src` folder from this repository 31 | 32 | ### Release notes 33 | 34 | | Version | Notes | Authors | 35 | | --- | --- | --- | 36 | | v.0.3 | Now you can turn ON / OFF the extension by clicking on the icon | [Sergey Osokin](https://github.com/creold) | 37 | | v.0.2 | After opening shared link in Figma desktop app, the extension closes the used tab in Chrome. | [Sergey Osokin](https://github.com/creold) | 38 | | v.0.1 | Initial Version. | [Fabrizio Rinaldi](https://www.fabriziorinaldi.io/) | 39 | 40 | ### Contribute 41 | 42 | Found a bug? Please submit a new issues on GitHub. -------------------------------------------------------------------------------- /img/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/img/icon.png -------------------------------------------------------------------------------- /img/preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/img/preview.gif -------------------------------------------------------------------------------- /img/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/img/screenshot.png -------------------------------------------------------------------------------- /img/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/img/thumbnail.png -------------------------------------------------------------------------------- /img/thumbnail_big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/img/thumbnail_big.png -------------------------------------------------------------------------------- /src/icons/icon-ext-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/src/icons/icon-ext-128.png -------------------------------------------------------------------------------- /src/icons/icon-ext-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/src/icons/icon-ext-16.png -------------------------------------------------------------------------------- /src/icons/icon-ext-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/src/icons/icon-ext-48.png -------------------------------------------------------------------------------- /src/icons/icon-off-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/src/icons/icon-off-128.png -------------------------------------------------------------------------------- /src/icons/icon-off-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/src/icons/icon-off-16.png -------------------------------------------------------------------------------- /src/icons/icon-off-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/src/icons/icon-off-32.png -------------------------------------------------------------------------------- /src/icons/icon-off-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/src/icons/icon-off-48.png -------------------------------------------------------------------------------- /src/icons/icon-on-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/src/icons/icon-on-128.png -------------------------------------------------------------------------------- /src/icons/icon-on-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/src/icons/icon-on-16.png -------------------------------------------------------------------------------- /src/icons/icon-on-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/src/icons/icon-on-32.png -------------------------------------------------------------------------------- /src/icons/icon-on-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linuz90/open-in-figma/ebc9f83460d71c7d58b79e920309e41aad9ab1d0/src/icons/icon-on-48.png -------------------------------------------------------------------------------- /src/js/background.js: -------------------------------------------------------------------------------- 1 | var storage = chrome.storage.local; 2 | var action = chrome.browserAction; 3 | var toggle = false; 4 | 5 | // Get Extension status from Chrome local storage 6 | storage.get("OpenInFigmaStat", function(data) { 7 | if (data.OpenInFigmaStat || data.OpenInFigmaStat == undefined) { 8 | toggle = true; 9 | } 10 | setAppearance(toggle); 11 | }); 12 | 13 | // On/Off Extension 14 | action.onClicked.addListener(function() { 15 | toggle = !toggle; 16 | setAppearance(toggle); 17 | storage.set({ OpenInFigmaStat: toggle }); 18 | }); 19 | 20 | // Get response from content_scripts 21 | chrome.runtime.onMessage.addListener(function(request, sender) { 22 | if (request === "closeTab") { 23 | chrome.tabs.remove(sender.tab.id); 24 | } 25 | }); 26 | 27 | function setAppearance(argument) { 28 | if (argument) { 29 | action.setIcon({ 30 | path: { 31 | "16": "./icons/icon-on-16.png", 32 | "32": "./icons/icon-on-32.png", 33 | "48": "./icons/icon-on-48.png", 34 | "128": "./icons/icon-on-128.png" 35 | } 36 | }); 37 | action.setBadgeText({ text: "" }); 38 | } else { 39 | action.setIcon({ 40 | path: { 41 | "16": "./icons/icon-off-16.png", 42 | "32": "./icons/icon-off-32.png", 43 | "48": "./icons/icon-off-48.png", 44 | "128": "./icons/icon-off-128.png" 45 | } 46 | }); 47 | action.setBadgeText({ text: "OFF" }); 48 | action.setBadgeBackgroundColor({ color: "#F24E1E" }); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/js/request.js: -------------------------------------------------------------------------------- 1 | var storage = chrome.storage.local; 2 | var figmaRegex = /(https:\/\/www\.figma\.com\/(file))\/.+/; 3 | var figmaAppURI = 'figma://'; 4 | var loc = document.location; 5 | var tabUrl = loc.href; 6 | var match = figmaRegex.exec(tabUrl); 7 | 8 | // Get Extension status from Chrome local storage 9 | storage.get('OpenInFigmaStat', function(data) { 10 | if (data.OpenInFigmaStat || data.OpenInFigmaStat == undefined) { 11 | if (match != null) { 12 | loc.replace(tabUrl.replace(match[1], figmaAppURI + match[2])); 13 | setTimeout(function() { 14 | closeTab(); 15 | }, 500); 16 | } 17 | } 18 | }); 19 | 20 | // Send a message to the background script to close the Figma tab 21 | function closeTab() { 22 | chrome.runtime.sendMessage('closeTab'); 23 | } 24 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "Open in Figma", 4 | "version": "0.3", 5 | "description": "Open Figma links in the desktop client.", 6 | "homepage_url": "https://fabriziorinaldi.io/openinfigma/", 7 | "icons": { 8 | "16": "icons/icon-ext-16.png", 9 | "48": "icons/icon-ext-48.png", 10 | "128": "icons/icon-ext-128.png" 11 | }, 12 | "author": "Fabrizio Rinaldi @linuz90, Sergey Osokin @creold", 13 | "browser_action": { 14 | "default_icon": { 15 | "16": "icons/icon-on-16.png", 16 | "32": "icons/icon-on-32.png", 17 | "48": "icons/icon-on-48.png", 18 | "128": "icons/icon-on-128.png" 19 | }, 20 | "default_title": "Open in Figma" 21 | }, 22 | "background": { 23 | "scripts": [ 24 | "js/background.js" 25 | ] 26 | }, 27 | "content_scripts": [ 28 | { 29 | "matches": ["*://*.figma.com/*"], 30 | "js": ["js/request.js"], 31 | "run_at": "document_start" 32 | } 33 | ], 34 | "permissions": [ 35 | "storage", 36 | "tabs", 37 | "*://*.figma.com/*" 38 | ] 39 | } 40 | --------------------------------------------------------------------------------