https://github.com/moonvy/figma-css-skins
👗 这是一些针对 Figma.com 和 FigmaEX 插件的 CSS 样式，能够让你自定义它们的外观
https://github.com/moonvy/figma-css-skins
Last synced: about 1 year ago
JSON representation
👗 这是一些针对 Figma.com 和 FigmaEX 插件的 CSS 样式，能够让你自定义它们的外观
- Host: GitHub
- URL: https://github.com/moonvy/figma-css-skins
- Owner: Moonvy
- Created: 2021-07-22T02:37:15.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-25T03:10:33.000Z (over 1 year ago)
- Last Synced: 2025-03-20T15:01:36.411Z (about 1 year ago)
- Language: CSS
- Homepage:
- Size: 382 KB
- Stars: 24
- Watchers: 2
- Forks: 23
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Figma-CSS-Skins
这是一些针对 Figma.com 和 FigmaEX 插件的 CSS 样式，能够让你自定义它们的外观
## 使用
- [FigmaEX](https://moonvy.com/figmaEX/) v1.2.4 以上版本的设置页中 "CSS 皮肤" 功能，无论是浏览器中的 Figma 还是客户端 Figma 都可以使用。
- Chrome 浏览器插件 [Stylish]( https://userstyles.org/)，一个通用的网站自定义样式工具。
## 支持定制的范围
- [插件工具条的外观](https://github.com/Moonvy/Figma-CSS-Skins/blob/master/readme.md#%E6%8F%92%E4%BB%B6%E5%B7%A5%E5%85%B7%E6%9D%A1%E7%9A%84%E5%A4%96%E8%A7%82%E5%AE%9A%E5%88%B6)
- [Figma UI3 选中图层上下文面板的外观](https://github.com/Moonvy/Figma-CSS-Skins/blob/master/readme.md#figma-ui3-%E9%80%89%E4%B8%AD%E5%9B%BE%E5%B1%82%E4%B8%8A%E4%B8%8B%E6%96%87%E9%9D%A2%E6%9D%BF%E7%9A%84%E5%A4%96%E8%A7%82)
- [Figam UI3 左右面板的圆角和间距外观（梦回UI2）](https://github.com/Moonvy/Figma-CSS-Skins/blob/master/readme.md#figam-ui3-%E5%B7%A6%E5%8F%B3%E9%9D%A2%E6%9D%BF%E7%9A%84%E5%9C%86%E8%A7%92%E5%92%8C%E9%97%B4%E8%B7%9D%E5%A4%96%E8%A7%82%E6%A2%A6%E5%9B%9Eui2)
## 插件工具条的外观定制
### 工具条位置
#### 工具条位置与圆角
```css
/* 工具条位置与圆角 */
body .FigmaExApp .ExBar {
border-radius: 2px;
right: 242px;
top: 51px;
}
```
#### 工具条放到左侧
```css
/* 工具条放到左侧 */
body .FigmaExApp .ExBar {
right: auto;
top: 71px;
left: 261px;
}
```
## 其他工具条的配色主题
#### 茶茶头像卡通风格
感谢 [**liteyais**](https://github.com/liteyais) 提供的配色和非常好玩的交互动画
- [**复制风格**](https://github.com/liteyais/FigmaEX-CSS-Skin)
#### 粉萌萌模式
[**Pink CSS**](https://github.com/Moonvy/Figma-CSS-Skins/blob/master/figmex-skins/%E7%B2%89%E8%90%8C%E8%90%8C.css)
---
## Figma UI3 选中图层上下文面板的外观
#### 白色外观
感谢 [**Alban-白**](https://github.com/shangrenxi) 提供的配色和非常详细的代码注释
```css
.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-白**](https://gist.githubusercontent.com/shangrenxi/1f4ec563435cba83a00bfcfdb444f551/raw/figmaEX-Enhance.css)
方案二：[**@Ma200line**](https://gist.githubusercontent.com/tr0j4ndev/9d6f1f7ac541910b861665944899e3b9/raw/figmaui3&figmaex.txt)
[两个方案的区别可以前往打开 Figma 文件查看具体对比](https://www.figma.com/design/zR01HW7LaUE43OrSu3jhdY/Figma-%E6%9C%80%E8%BF%91%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98?node-id=8155-12&t=rgrOuotWK54hFw98-1)