这是一些针对 Figma.com 和 FigmaEX 插件的 CSS 样式,能够让你自定义它们的外观
- FigmaEX v1.2.4 以上版本的设置页中 "CSS 皮肤" 功能,无论是浏览器中的 Figma 还是客户端 Figma 都可以使用。
- Chrome 浏览器插件 Stylish,一个通用的网站自定义样式工具。
/* 工具条位置与圆角 */
body .FigmaExApp .ExBar {
border-radius: 2px;
right: 242px;
top: 51px;
}
/* 工具条放到左侧 */
body .FigmaExApp .ExBar {
right: auto;
top: 71px;
left: 261px;
}
感谢 liteyais 提供的配色和非常好玩的交互动画
![im321](https://private-user-images.githubusercontent.com/82380792/356867753-1aaa050c-87f4-4ad0-a8cd-df6e13f384fc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk5MjAyMjksIm5iZiI6MTczOTkxOTkyOSwicGF0aCI6Ii84MjM4MDc5Mi8zNTY4Njc3NTMtMWFhYTA1MGMtODdmNC00YWQwLWE4Y2QtZGY2ZTEzZjM4NGZjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE4VDIzMDUyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWE4MWU1YTJhNGNjY2M1NDM1YTlkNDhiZTJiMmQ3MDM2YTM1YmI5MWVjOGY1NzExNzdkM2JmNTgyZDBiNGZlYjAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.Vwu_uzXNDDs0kWcvSgDEIzqx-tCX4A9soX0TLRY9KAE)
感谢 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);
}
![im321](https://private-user-images.githubusercontent.com/82380792/356868055-e54bd27a-9a1e-472b-9c94-def387598510.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk5MjAyMjksIm5iZiI6MTczOTkxOTkyOSwicGF0aCI6Ii84MjM4MDc5Mi8zNTY4NjgwNTUtZTU0YmQyN2EtOWExZS00NzJiLTljOTQtZGVmMzg3NTk4NTEwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE4VDIzMDUyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNhYWI5ZjlkNjMwMGEzYTI3MGM4YTQ5N2U5NmE0ZmU4NDM1ZGMxZDAzY2FlNWEyODQ2MDk4YWVkN2I2ODY3ZjMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.IzhdfBpJiM3jXIiYci-776nXD8sjcV-36eaNqqAYveo)
解决方案有两个
方案一:Alban-白
方案二:@Ma200line
两个方案的区别可以前往打开 Figma 文件查看具体对比