Figma-CSS-Skins

这是一些针对 Figma.com 和 FigmaEX 插件的 CSS 样式，能够让你自定义它们的外观

使用

• FigmaEX v1.2.4 以上版本的设置页中 "CSS 皮肤" 功能，无论是浏览器中的 Figma 还是客户端 Figma 都可以使用。
• Chrome 浏览器插件 Stylish，一个通用的网站自定义样式工具。

FigmaEX 的定制

工具条位置

工具条位置与圆角

/* 工具条位置与圆角 */
body .FigmaExApp .ExBar {
    border-radius: 2px;
    right: 242px;
    top: 51px;
}

工具条放到左侧

/* 工具条放到左侧 */
body .FigmaExApp .ExBar {
    right: auto;
    top: 71px;
    left: 261px;
}

黑色外观

/* 黑色外观 */
body .FigmaExApp .ActionItem {
    background: #2c2c2c;
}

body .FigmaExApp .ExBar .header {
    background: #2c2c2c;
}

body .FigmaExApp .ExBar .header .logo-but {
    opacity: 0;
}

body .FigmaExApp .ExBar .header .logo-but.color {
    opacity: 0.8;
}

body .FigmaExApp .ExBar .header .setting-but,
.FigmaExApp .ExBar .header .clear-but {
    filter: invert(1);
}

body .FigmaExApp .ExBar .reseize-hand {
    background: #2c2c2c;
}

body .FigmaExApp .ExBar {
    background: #252525;
}

body .figmaex-localfont-but {
    filter: invert(1);
}
body .FigmaExApp .ActionItem .action-info {
    color: #cbd0d5;
}

body .FigmaExApp .ExBar .action-list::-webkit-scrollbar-thumb {
    border: 2px solid #252525;
}

body .FigmaExApp .ActionItem .action-info .note-name {
    color: #6e7380;
}

body .FigmaExApp .ActionItem:hover {
    background: #1d1d1d;
}

Figma 的定制

除了可以改 FigmaEX 的外观，也可以改 Figma 的外观，只是 Figma 的 class 不是很适合覆盖

黑暗模式

Dark CSS

黑暗模式的标尺

如果你在黑暗模式下使用标尺，可以用这个把标尺变成黑的

#fullscreen-root .view.gpu-view-content::before {
   content: "";
   width: 21px;
   height: 100%;
   position: absolute;
   left: 0;
   z-index: 1;
   background: #00000082;
   backdrop-filter: invert(1) hue-rotate(212deg) brightness(2.5);
}

#fullscreen-root .view.gpu-view-content::after {
   content: "";
   width: 100%;
   height: 21px;
   position: absolute;
   left: 21px;
   top: 0;
   z-index: 1;
   background: #00000082;
   backdrop-filter: invert(1) hue-rotate(212deg) brightness(2.5);
}

其他 FigmaEX 配色主题

粉萌萌模式

Pink CSS

DeepDark

感谢 Alban-白 提供的配色和非常详细的代码注释 DeepDark CSS

星空蓝模式

感谢 Wish 提供的配色和代码注释 SkyBlue CSS