{"id":18248335,"url":"https://github.com/moonvy/figma-css-skins","last_synced_at":"2025-04-04T15:32:23.187Z","repository":{"id":133916279,"uuid":"388305682","full_name":"Moonvy/Figma-CSS-Skins","owner":"Moonvy","description":"👗 这是一些针对 Figma.com 和 FigmaEX 插件的 CSS 样式，能够让你自定义它们的外观","archived":false,"fork":false,"pushed_at":"2024-09-25T03:10:33.000Z","size":391,"stargazers_count":24,"open_issues_count":1,"forks_count":23,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-20T15:01:36.411Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Moonvy.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-22T02:37:15.000Z","updated_at":"2024-09-25T03:10:36.000Z","dependencies_parsed_at":"2024-11-05T09:38:47.477Z","dependency_job_id":"760b84c2-09a4-4b61-8ebe-0f31e6e8ee46","html_url":"https://github.com/Moonvy/Figma-CSS-Skins","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Moonvy%2FFigma-CSS-Skins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Moonvy%2FFigma-CSS-Skins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Moonvy%2FFigma-CSS-Skins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Moonvy%2FFigma-CSS-Skins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Moonvy","download_url":"https://codeload.github.com/Moonvy/Figma-CSS-Skins/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247203068,"owners_count":20900907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T09:36:41.144Z","updated_at":"2025-04-04T15:32:18.177Z","avatar_url":"https://github.com/Moonvy.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Figma-CSS-Skins\n\n\n\n这是一些针对 Figma.com 和 FigmaEX 插件的 CSS 样式，能够让你自定义它们的外观\n\n## 使用\n - [FigmaEX](https://moonvy.com/figmaEX/) v1.2.4 以上版本的设置页中 \"CSS 皮肤\" 功能，无论是浏览器中的 Figma 还是客户端 Figma 都可以使用。\n   \u003cimg width=\"400px\" src=\"https://user-images.githubusercontent.com/82231420/126589576-db664b22-7770-4f2b-992a-f686cda2dc32.png\"\u003e\n - Chrome 浏览器插件 [Stylish]( https://userstyles.org/)，一个通用的网站自定义样式工具。\n\n\n## 支持定制的范围\n- [插件工具条的外观](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)\n- [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)\n- [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)\n\n## 插件工具条的外观定制\n\n### 工具条位置\n \n#### 工具条位置与圆角\n\u003cimg width=\"300px\" src=\"https://user-images.githubusercontent.com/82231420/126590040-e4e22fd5-22fe-453b-ab81-36959ec50623.png\"\u003e\n \n```css\n/* 工具条位置与圆角 */\nbody .FigmaExApp .ExBar {\n    border-radius: 2px;\n    right: 242px;\n    top: 51px;\n}\n```\n \n#### 工具条放到左侧\n\u003cimg width=\"300px\" src=\"https://user-images.githubusercontent.com/82231420/126589326-27e21bc5-5220-45cd-858d-3babe43d4119.png\"\u003e\n\n```css\n/* 工具条放到左侧 */\nbody .FigmaExApp .ExBar {\n    right: auto;\n    top: 71px;\n    left: 261px;\n}\n```\n\n ## 其他工具条的配色主题\n \n #### 茶茶头像卡通风格\n\u003cimg width=\"300px\" src=\"https://user-images.githubusercontent.com/82380792/223678797-45e77d42-1a79-4b04-b2d3-b4e3542af31f.gif\"\u003e\n\n感谢 [**liteyais**](https://github.com/liteyais) 提供的配色和非常好玩的交互动画\n \n- [**复制风格**](https://github.com/liteyais/FigmaEX-CSS-Skin)\n\n\n#### 粉萌萌模式\n\n \u003cimg width=\"300px\" src=\"https://user-images.githubusercontent.com/82380792/126638949-2c83310c-b89e-42f2-b65d-1817373cfcfb.png\"\u003e\n\n[**Pink CSS**](https://github.com/Moonvy/Figma-CSS-Skins/blob/master/figmex-skins/%E7%B2%89%E8%90%8C%E8%90%8C.css)\n\n---  \n\n## Figma UI3 选中图层上下文面板的外观\n\n#### 白色外观\n\u003cimg width=\"500\" alt=\"im321\" src=\"https://github.com/user-attachments/assets/1aaa050c-87f4-4ad0-a8cd-df6e13f384fc\"\u003e\n\n \n \n感谢 [**Alban-白**](https://github.com/shangrenxi) 提供的配色和非常详细的代码注释\n\n```css\n.positioned_design_toolbelt--root--INYO4 {\n/*    top: 12px !important;*/\n    left: -16%;\n}\n\n/*EX上下文增强工具*/\n.ExContextPad {\n    background: var(--color-bg);\n    left: calc(42% + 220px);\n    bottom: 12px;\n    height: 40px;\n    border: none;\n    border-radius: var(--radius-large);\n}\n\n\n/*选项菜单浮层*/\n.AbMenuRoot .oMenuList.shadow {\n    background:var(--color-bg);\n    color: var(--color-text, #333);\n    border-radius: var(--radius-medium);\n    box-shadow: var(--elevation-200-canvas);\n}\n\n\n/*上下文图标*/\n.ExContextPad button img {\n    filter: invert(1);\n}\n\n[data-preferred-theme=dark] {\n  .ExContextPad button img {\n      filter: unset;\n  }\n}\n\n/*图标hover*/\n.ExContextPad button img:hover {\n    background: rgb(255 255 255 / 4%);\n    border-radius: var(--radius-medium);\n}\n\n/*图标间距*/\n.ExContextPad hr {\n/*    display: none;*/\n    background: var(--color-border);\n}\n```\n\n## Figam UI3 左右面板的圆角和间距外观（梦回UI2）\n #### 去掉左右面板的圆角以及边距,让中间的操作区域更大  \n\u003cimg width=\"912\" alt=\"im321\" src=\"https://github.com/user-attachments/assets/e54bd27a-9a1e-472b-9c94-def387598510\"\u003e\n\n\n  \n解决方案有两个  \n方案一：[**Alban-白**](https://gist.githubusercontent.com/shangrenxi/1f4ec563435cba83a00bfcfdb444f551/raw/figmaEX-Enhance.css)  \n方案二：[**@Ma200line**](https://gist.githubusercontent.com/tr0j4ndev/9d6f1f7ac541910b861665944899e3b9/raw/figmaui3\u0026figmaex.txt)  \n[两个方案的区别可以前往打开 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\u0026t=rgrOuotWK54hFw98-1)  \n\n       \n \n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoonvy%2Ffigma-css-skins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoonvy%2Ffigma-css-skins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoonvy%2Ffigma-css-skins/lists"}