从 Figma 设计稿提取所用到的库颜色
// ==UserScript==
// @name Design Tokens
// @namespace http://tampermonkey.net/
// @description 从 Figma 设计稿提取所用到的库颜色
// @version 2024-11-15
// @author You
// @match https://*.figma.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=figma.com
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// 将 Figma 的颜色格式转换为 RGBA 格式
function colorToRGBA(color, opacity) {
const r = Math.round(color.r * 255);
const g = Math.round(color.g * 255);
const b = Math.round(color.b * 255);
return `rgba(${r}, ${g}, ${b}, ${opacity})`; // 使用 paint.opacity 作为 alpha 值
}
// 迭代函数用于遍历节点并提取具有 fillStyleId 的填充样式
function extractPaintStyles(rootNode) {
const styles = [];
const uniqueStyles = {}; // 用于去重的对象
const stack = [rootNode]; // 使用栈来存储待处理的节点
function processNodes() {
let count = 0; // 计数处理的节点数量
while (stack.length > 0 && count < 10) {
const node = stack.pop(); // 从栈中取出一个节点
// 仅处理具有填充样式的节点
if ("fills" in node && node.fills.length > 0) {
// 检查节点是否有 fillStyleId
if (node.fillStyleId) {
const style = figma.getStyleById(node.fillStyleId);
if (style) {
// 检查样式类型是否为 PAINT
if (style.type === 'PAINT') {
// 提取颜色信息
const paint = style.paints[0]; // 假设样式只包含一个填充
if (paint && paint.type === 'SOLID') {
const rgbaColor = colorToRGBA(paint.color, paint.opacity); // 使用 paint.opacity
const styleKey = style.name; // 使用样式名称作为唯一标识
// 去重逻辑
if (!uniqueStyles[styleKey]) {
uniqueStyles[styleKey] = {
name: style.name,
description: style.description || 'No description',
rgba: rgbaColor
};
}
}
} else {
console.error(`Node has a fillStyleId that is not a paint style: ${style.type}`);
}
}
}
}
// 如果节点有子节点，则将子节点添加到栈中
if ("children" in node) {
for (const child of node.children) {
stack.push(child); // 将子节点推入栈中
}
}
count++; // 增加计数
}
// 如果还有节点未处理，设置延迟后继续处理
if (stack.length > 0) {
setTimeout(processNodes, 1); // 每 1 毫秒继续处理
} else {
// 所有节点处理完成，输出结果
const result = Object.values(uniqueStyles); // 将对象转换为数组
result.sort((a, b) => a.name.localeCompare(b.name)); // 按名称排序
console.log('Extracted Paint Styles:', result);
alert('提取完成，请查看控制台输出');
}
}
// 启动节点处理
processNodes();
}
// 添加一个按钮到页面
const button = document.createElement('button');
button.innerText = '提取填充样式';
button.style.position = 'fixed';
button.style.top = '10px';
button.style.right = '10px';
button.style.zIndex = 1000;
button.style.padding = '10px';
button.style.backgroundColor = '#007bff';
button.style.color = 'white';
button.style.border = 'none';
button.style.borderRadius = '5px';
button.style.cursor = 'pointer';
// 点击按钮时提取样式
button.onclick = () => {
const rootNode = figma.currentPage; // 使用 Figma 的 API 获取当前页面
try {
extractPaintStyles(rootNode);
} catch (error) {
console.error(error.message);
alert('提取过程中发生错误，请查看控制台');
}
};
// 将按钮添加到页面
document.body.appendChild(button);
})();