Skip to content

Instantly share code, notes, and snippets.

@entity1991
Last active July 7, 2021 11:43
Show Gist options
  • Save entity1991/cc308b71bd5ff2f4629fa0c04f0806ee to your computer and use it in GitHub Desktop.
Save entity1991/cc308b71bd5ff2f4629fa0c04f0806ee to your computer and use it in GitHub Desktop.
Tampermonkey - toggle sidebars on Figma
// ==UserScript==
// @name Figma / toggle sidebars
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Ability to toggle sidebars on figma for better usability
// @author Ruslan Kuzma
// @match https://www.figma.com/file*
// @icon https://www.google.com/s2/favicons?domain=figma.com
// @grant none
// ==/UserScript==
(function() {
'use strict';
let sidebarsOpen = true
let initialCanvasWidth = 0
let initialCanvasHeight = 0
let initialInsetRightContainer
let initialInsetLeftContainer
function getElementByXpath(path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function toggleSidebars() {
const leftSidebar = getElementByXpath('/html/body/div[2]/div/div/div[1]/div[2]/div[3]')
const rightSidebar = getElementByXpath('/html/body/div[2]/div/div/div[1]/div[2]/div[4]/div/div/div/div/div[1]')
const insetRightContainer = getElementByXpath('/html/body/div[2]/div/div/div[1]/div[2]/div[1]/div/div/div')
const insetLeftContainer = getElementByXpath('/html/body/div[2]/div/div/div[1]/div[2]/div[1]/div/div/div/div[1]')
const canvas = getElementByXpath('/html/body/div[2]/div/div/div[1]/div[2]/div[1]/div/div/div/div[1]/div/div/canvas')
if (sidebarsOpen){
console.log('hide sidebars')
leftSidebar.style.opacity = 0
rightSidebar.style.opacity = 0
initialCanvasWidth = canvas.style.width
initialCanvasHeight = canvas.style.height
canvas.style.width = 'auto'
canvas.style.height = 'auto'
initialInsetRightContainer = insetRightContainer.style.inset
initialInsetLeftContainer = insetLeftContainer.style.inset
insetRightContainer.style.inset = '48px 0px 0px 0px'
insetLeftContainer.style.inset = '0px 0px 0px 0px'
sidebarsOpen = false
} else {
console.log('open sidebars')
leftSidebar.style.opacity = 1
rightSidebar.style.opacity = 1
canvas.style.width = initialCanvasWidth
canvas.style.height = initialCanvasHeight
insetRightContainer.style.inset = initialInsetRightContainer
insetLeftContainer.style.inset = initialInsetLeftContainer
sidebarsOpen = true
}
}
let toolbarLastButton
const intervalId = setTimeout(function() {
toolbarLastButton = getElementByXpath('/html/body/div[2]/div/div/div[1]/div[2]/div[2]/div/div[2]/div[3]')
if (toolbarLastButton) {
const toggler = document.createElement("div");
toggler.innerHTML = "Toggle sidebars";
insertAfter(toggler, toolbarLastButton)
toggler.addEventListener('click', toggleSidebars)
}
}, 10000)
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment