☰

Figma: Increase Layers Panel Width Tool

This script has been reworked to include a button inside the toolbar to toggle the width of the left layers panel to 1500px.

As of 2024-04-18. See the latest version.

// ==UserScript==
// @name         Figma: Increase Layers Panel Width Tool
// @namespace    me.kalus.figmamorespace
// @version      1.1
// @description  This script has been reworked to include a button inside the toolbar to toggle the width of the left layers panel to 1500px.
// @author       Michael Kalus
// @match        https://www.figma.com/file/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=figma.com
// @grant        none
// @license      MIT
// ==/UserScript==



(function() {


    // set left toolbar
    const toolbar = document.querySelector('[class*="toolbar_view--buttonGroup--"][class*="toolbar_view--leftButtonGroup--"]');

    if (toolbar) {
        // create new button, set inner HTML and append
        const newButton = document.createElement('div');
        newButton.innerHTML = '<span role="button" aria-label="Increase Left Panel Size" class="svg-container toolbar_view--iconButton--1MUm6 toolbar_styles--enabledButton--fEwmC" data-tooltip-type="lookup" data-tooltip="set-tool-increasewidth" tabindex="0" aria-pressed="false" data-fullscreen-intercept="true"><svg class="svg" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="#fff" fill-opacity="1" fill-rule="evenodd" stroke="none" d="M18.6.2H1.1c-.3,0-.5.2-.5.5v18.6c0,.3.2.5.5.5h17.5c.3,0,.5-.2.5-.5V.7c0-.3-.2-.5-.5-.5ZM1.6,1.2h11.1v17.6H1.6V1.2ZM18.1,18.7h-4.4V1.2h4.4v17.6Z"></path></svg></span>';
        toolbar.appendChild(newButton);

        // set new resizeButton
        const resizeButton = newButton.querySelector('.toolbar_view--iconButton--1MUm6');
        let isButtonClicked = false;

        // Add click event listener to the span button
        resizeButton.addEventListener('click', function() {
            // Toggle background color, run width adjustments and start mutations observer
            if (!isButtonClicked) {
                resizeButton.style.backgroundColor = 'var(--color-bg-toolbar-selected, var(--bg-toolbar-active))';
                setWidths();
                observeMutations();
            } else {
                // reset background color, reset width adjustment and destroy mutations observer
                resizeButton.style.backgroundColor = '';
                revertWidths();
                disconnectObserver();
            }

            isButtonClicked = !isButtonClicked;
        });
    } else {
        console.error('Target div not found');
    }

    let observer;

    // width adjustments
    function setWidths() {
        document.getElementById('left-panel-container').style.maxWidth = '1500px';

        const elements = document.querySelectorAll('[class*=left_panel_container--panel--]');
            elements.forEach((el) => {
            el.style.width = '1500px';
        });

        const leftPanelContent = document.querySelectorAll('[class^="left_panel--content"]');
        leftPanelContent.forEach(content => {
            content.style.width = '1500px';
        });

        const objectRows = document.querySelectorAll('[class^="object_row--row--"]');
        objectRows.forEach(row => {
            row.style.width = '1500px';
        });

        const objectRowsInstanceChilds = document.querySelectorAll('[class^="object_row--instanceChild"]');
        objectRowsInstanceChilds.forEach(row => {
            row.style.width = '1500px';
        });
        

        const topLevelRows = document.querySelectorAll('[class^="object_row--topLevel--"]');
        topLevelRows.forEach(row => {
            row.style.width = '1500px';
        });

        const scrollContainers = document.querySelectorAll('[class^="objects_panel--scrollContainer"], [class^="pages_panel--scrollContainer"]');
        scrollContainers.forEach(container => {
            container.style.width = '1500px';
        });
    }

    function observeMutations() {
        // Observe changes in the DOM subtree of the left sidebar and run width adjustments
        observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.type === 'childList') {
                    setWidths();
                }
            });
        });

        const config = { attributes: true, childList: true, subtree: true};

        const motionContainers = document.querySelectorAll('#react-page');
        motionContainers.forEach(container => {
            observer.observe(container, config);
        });
    }

    // function to revert width adjustment
    function revertWidths() {
        document.getElementById('left-panel-container').style.maxWidth = '500px';

        const elements = document.querySelectorAll('[class*=left_panel_container--panel--]');
        elements.forEach((el) => {
            el.style.width = '500px';
        });

        const leftPanelContent = document.querySelectorAll('[class^="left_panel--content"]');
        leftPanelContent.forEach(content => {
            content.style.width = '500px';
        });


        const objectRowsInstanceChilds = document.querySelectorAll('[class^="object_row--instanceChild"]');
        objectRowsInstanceChilds.forEach(row => {
            row.style.width = '500px';
        });

        const objectRows = document.querySelectorAll('[class^="object_row--row--"]');
        objectRows.forEach(row => {
            row.style.width = '500px';
        });

        const topLevelRows = document.querySelectorAll('[class^="object_row--topLevel--"]');
        topLevelRows.forEach(row => {
            row.style.width = '500px';
        });

        const scrollContainers = document.querySelectorAll('[class^="objects_panel--scrollContainer"], [class^="pages_panel--scrollContainer"]');
        scrollContainers.forEach(container => {
            container.style.width = '500px';
        });
    }

    function disconnectObserver() {
        if (observer) {
            observer.disconnect();
        }
    }


})();