├── .DS_Store ├── .gitignore ├── LICENSE ├── icons └── 48x48.png ├── manifest.json ├── readme.md ├── rules └── ruleset_1.json ├── screenshot.webp └── src └── format.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Inclushe/figma-ui3/7ac4ad6c71249fae305c11a7d271e7e5cc3c9fed/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | web-ext-artifacts 2 | _metadata -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Ethan John Walker 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /icons/48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Inclushe/figma-ui3/7ac4ad6c71249fae305c11a7d271e7e5cc3c9fed/icons/48x48.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "name": "Enable UI3 Beta for Figma", 4 | "version": "1.0.2", 5 | "description": "This extension enables UI3 Beta for Figma for all users, without the need to wait on the waitlist.", 6 | "icons": { 7 | "48": "icons/48x48.png" 8 | }, 9 | "permissions": [ 10 | "declarativeNetRequest", 11 | "declarativeNetRequestWithHostAccess" 12 | ], 13 | "declarative_net_request": { 14 | "rule_resources": [{ 15 | "id": "ruleset_1", 16 | "enabled": true, 17 | "path": "rules/ruleset_1.json" 18 | }] 19 | }, 20 | "host_permissions": [ 21 | "https://www.figma.com/*" 22 | ], 23 | "web_accessible_resources": [{ 24 | "resources": ["src/format.js"], 25 | "matches": [""] 26 | }], 27 | "browser_specific_settings": { 28 | "gecko": { 29 | "id": "ui3betatime@inclushe.com", 30 | "strict_min_version": "113.0" 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Enable UI3 Beta for Figma 2 | 3 | > [!NOTE] 4 | > [As of October 10, 2024, all users should have access to UI3 without needing to install an extension.](https://help.figma.com/hc/en-us/articles/24919293730327-How-do-I-get-access-to-UI3-and-AI-features) 5 | 6 | **Install: [Chrome](https://chrome.google.com/webstore/detail/enable-ui3-beta-for-figma/gdjldebhilhckhblmhklofdebemiahhi) | [Firefox](https://addons.mozilla.org/en-US/firefox/addon/enable-ui3-beta-for-figma/) | [Manually](#manual-installation)** 7 | 8 | ![Screenshot of Figma UI3 Beta](screenshot.webp) 9 | 10 | This extension enables UI3 Beta for Figma for all users. 11 | 12 | > [!NOTE] 13 | > This extension only works in web browsers and does not enable AI features. 14 | 15 | ## Manual Installation 16 | 17 | ### Chromium (Chrome, Edge, Opera, Brave, Etc.) 18 | 19 | 1. At the top of this page, click **Code** and select **Download ZIP** 20 | 2. Unzip the archive 21 | 3. Go to the extensions page (`chrome://extensions`) 22 | 4. Enable developer mode 23 | 5. Press "Load unpacked" button 24 | 6. Select folder with unzipped archive 25 | 7. Refresh any open Figma tabs 26 | 27 | ### Firefox 28 | 29 | 1. At the top of this page, click **Code** and select **Download ZIP** 30 | 2. Unzip the archive 31 | 3. Go to `about:debugging#/runtime/this-firefox` 32 | 4. Press "Load Temporary Add-on" and select zip file you downloaded 33 | 5. Installing this way on Firefox will remove it after closing browser 34 | -------------------------------------------------------------------------------- /rules/ruleset_1.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "id" : 1, 3 | "priority": 1, 4 | "action": { "type": "redirect", "redirect": { "extensionPath": "/src/format.js" } }, 5 | "condition": { "regexFilter": "\\/figma_app-.*\\.min\\.js\\.br$", "resourceTypes": ["script"] } 6 | }] -------------------------------------------------------------------------------- /screenshot.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Inclushe/figma-ui3/7ac4ad6c71249fae305c11a7d271e7e5cc3c9fed/screenshot.webp -------------------------------------------------------------------------------- /src/format.js: -------------------------------------------------------------------------------- 1 | console.log("redirecting"); 2 | const scripts = document.getElementsByTagName("script"); 3 | const figmaAppScript = Array.from(document.getElementsByTagName("script")).find( 4 | (script) => 5 | script.src.includes("figma_app-") && 6 | script.src.includes(".min.js.br") && 7 | !script.src.includes("runtime~figma_app"), 8 | ); 9 | const figmaAppScriptSrc = String(figmaAppScript.src); 10 | figmaAppScript.remove(); 11 | fetch(figmaAppScriptSrc + "?v") 12 | .then((res) => res.text()) 13 | .then((text) => { 14 | // Find and replace instances of these strings: 15 | text = text.replace(/e\?"ui3":"ui2"/, '"ui3"'); 16 | text = text.replace(/c\(e\)?"ui3":"ui2"/, '"ui3"'); 17 | text = text.replace(/version:"ui2",/, 'version:"ui3",'); 18 | text = text.replace( 19 | /initialVersion:a="ui2"}\)/, 20 | 'initialVersion:a="ui3"})', 21 | ); 22 | text = text.replace(/"ui2"===o.version/, "false"); 23 | const blob = new Blob([text], { type: "text/javascript" }); 24 | const newScript = document.createElement("script"); 25 | newScript.src = URL.createObjectURL(blob); 26 | newScript.type = "text/javascript"; 27 | newScript.defer = true; 28 | document.body.appendChild(newScript); 29 | }); 30 | console.log(figmaAppScriptSrc); 31 | --------------------------------------------------------------------------------