Figma-CSS-Skins

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

使用

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

支持定制的范围

• 插件工具条的外观
• Figma UI3 选中图层上下文面板的外观
• Figam UI3 左右面板的圆角和间距外观（梦回UI2）

插件工具条的外观定制

工具条位置

工具条位置与圆角

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

工具条放到左侧

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

其他工具条的配色主题

茶茶头像卡通风格

感谢 liteyais 提供的配色和非常好玩的交互动画

• 复制风格

粉萌萌模式

Pink CSS

---

Figma UI3 选中图层上下文面板的外观

白色外观

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

.positioned_design_toolbelt--root--INYO4 {
/*    top: 12px !important;*/
    left: -16%;
}

/*EX上下文增强工具*/
.ExContextPad {
    background: var(--color-bg);
    left: calc(42% + 220px);
    bottom: 12px;
    height: 40px;
    border: none;
    border-radius: var(--radius-large);
}


/*选项菜单浮层*/
.AbMenuRoot .oMenuList.shadow {
    background:var(--color-bg);
    color: var(--color-text, #333);
    border-radius: var(--radius-medium);
    box-shadow: var(--elevation-200-canvas);
}


/*上下文图标*/
.ExContextPad button img {
    filter: invert(1);
}

[data-preferred-theme=dark] {
  .ExContextPad button img {
      filter: unset;
  }
}

/*图标hover*/
.ExContextPad button img:hover {
    background: rgb(255 255 255 / 4%);
    border-radius: var(--radius-medium);
}

/*图标间距*/
.ExContextPad hr {
/*    display: none;*/
    background: var(--color-border);
}

Figam UI3 左右面板的圆角和间距外观（梦回UI2）

去掉左右面板的圆角以及边距,让中间的操作区域更大

解决方案有两个
方案一：Alban-白
方案二：@Ma200line
两个方案的区别可以前往打开 Figma 文件查看具体对比