@sit-onyx/figma-utils 0.0.0-20250804145452

package/dist/types/figma.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Figma API response when fetching from https://api.figma.com/v1/files/${fileKey}/variables/local
+ */
+export type FigmaVariablesApiResponse = {
+    meta: {
+        variableCollections: Record<string, VariablesCollection>;
+        variables: Record<string, Variable>;
+    };
+};
+export type VariablesCollection = {
+    defaultModeId: string;
+    hiddenFromPublishing: boolean;
+    modes: Mode[];
+};
+export type Mode = {
+    modeId: string;
+    name: string;
+};
+export type Variable = {
+    name: string;
+    variableCollectionId: string;
+    hiddenFromPublishing: boolean;
+    deletedButReferenced?: boolean;
+    valuesByMode: Record<string, VariableValue>;
+};
+export type VariableValue = RGBAValue | ColorsAlias | number | string;
+export type RGBAValue = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export type ColorsAlias = {
+    type: "VARIABLE_ALIAS";
+    id: string;
+};
+export type ParsedVariable = {
+    /** Figma mode name or undefined if its the default mode. */
+    modeName?: string;
+    /**
+     * Mapping from variable name to its value.
+     * @example
+     * ```json
+     * {
+     *    "primary-100": "#ffffff",
+     *    "border-radius-s": "1rem",
+     * }
+     * ```
+     */
+    variables: Record<string, string>;
+};
+/**
+ * Figma API response when fetching from https://api.figma.com/v1/files/${fileKey}/components
+ */
+export type FigmaComponentsApiResponse = {
+    meta: {
+        components: Component[];
+    };
+};
+/**
+ * An arrangement of published UI elements that can be instantiated across Figma files
+ */
+export type Component = {
+    /**
+     * ID of the component node within the Figma file
+     */
+    node_id: string;
+    /**
+     * Name of the component
+     */
+    name: string;
+    /**
+     * Data on component's containing frame, if component resides within a frame
+     */
+    containing_frame: FrameInfo;
+    /**
+     * The description of the component as entered by the publisher
+     */
+    description: string;
+};
+/**
+ * Data on the frame a component resides in
+ */
+export type FrameInfo = {
+    /**
+     * ID of the frame node within the file
+     */
+    nodeId: string;
+    /**
+     * Name of the frame
+     */
+    name: string;
+    /**
+     * ID of the frame's residing page
+     */
+    pageId: string;
+    /**
+     * Name of the frame's residing page
+     */
+    pageName: string;
+};
+export type ParsedIcon = {
+    id: string;
+    name: string;
+    aliases: string[];
+    category: string;
+};
+export type ParsedFlag = {
+    id: string;
+    code: string;
+    internationalName: string;
+    continent: string;
+};

package/dist/types/figma.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/fetch.d.ts

@@ -0,0 +1,26 @@
+import { FigmaComponentsApiResponse, FigmaVariablesApiResponse } from "../types/figma.js";
+/**
+ * Fetches the Figma Variables for the given file from the Figma API v1.
+ *
+ * @param fileKey File key. Example: https://www.figma.com/file/your-file-key-here
+ * @param accessToken Personal access token with scope/permission `file_variables:read`
+ * @see https://www.figma.com/developers/api#get-local-variables-endpoint
+ */
+export declare const fetchFigmaVariables: (fileKey: string, accessToken: string) => Promise<FigmaVariablesApiResponse>;
+/**
+ * Fetches the Figma components for the given file from the Figma API v1.
+ *
+ * @param fileKey File key. Example: https://www.figma.com/file/your-file-key-here
+ * @param accessToken Personal access token with scope/permission `file_read` or `files:read`
+ * @see https://www.figma.com/developers/api#get-file-components-endpoint
+ */
+export declare const fetchFigmaComponents: (fileKey: string, accessToken: string) => Promise<FigmaComponentsApiResponse>;
+export declare const fetchFigmaSVGs: (fileKey: string, componentIds: string[], accessToken: string) => Promise<Record<string, string>>;
+/**
+ * Generic utility to fetch Figma API routes.
+ *
+ * @param url API route, e.g. "https://api.figma.com/v1/files/${filekey}"
+ * @param accessToken Access token for authentication
+ * @throws Error if request was not successful
+ */
+export declare const fetchFigma: <T = unknown>(url: string, accessToken: string) => Promise<T>;

package/dist/utils/fetch.js

@@ -0,0 +1,50 @@
+/**
+ * Fetches the Figma Variables for the given file from the Figma API v1.
+ *
+ * @param fileKey File key. Example: https://www.figma.com/file/your-file-key-here
+ * @param accessToken Personal access token with scope/permission `file_variables:read`
+ * @see https://www.figma.com/developers/api#get-local-variables-endpoint
+ */
+export const fetchFigmaVariables = async (fileKey, accessToken) => {
+    return fetchFigma(`https://api.figma.com/v1/files/${fileKey}/variables/local`, accessToken);
+};
+/**
+ * Fetches the Figma components for the given file from the Figma API v1.
+ *
+ * @param fileKey File key. Example: https://www.figma.com/file/your-file-key-here
+ * @param accessToken Personal access token with scope/permission `file_read` or `files:read`
+ * @see https://www.figma.com/developers/api#get-file-components-endpoint
+ */
+export const fetchFigmaComponents = async (fileKey, accessToken) => {
+    return fetchFigma(`https://api.figma.com/v1/files/${fileKey}/components`, accessToken);
+};
+export const fetchFigmaSVGs = async (fileKey, componentIds, accessToken) => {
+    const result = await fetchFigma(`https://api.figma.com/v1/images/${fileKey}?ids=${componentIds.join()}&format=svg`, accessToken);
+    await Promise.all(Object.entries(result.images).map(async ([id, imageUrl]) => {
+        const response = await fetch(imageUrl);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch SVG content for component ${id}: ${response.statusText}`);
+        }
+        result.images[id] = await response.text();
+    }));
+    return result.images;
+};
+/**
+ * Generic utility to fetch Figma API routes.
+ *
+ * @param url API route, e.g. "https://api.figma.com/v1/files/${filekey}"
+ * @param accessToken Access token for authentication
+ * @throws Error if request was not successful
+ */
+export const fetchFigma = async (url, accessToken) => {
+    const response = await fetch(url, {
+        headers: {
+            "X-FIGMA-TOKEN": accessToken,
+        },
+    });
+    const body = await response.json();
+    if (response.status !== 200) {
+        throw new Error(`Figma API request failed. Response body: ${JSON.stringify(body)}`);
+    }
+    return body;
+};

package/dist/utils/fs.d.ts

@@ -0,0 +1,7 @@
+import { PathLike } from "node:fs";
+/**
+ * Checks whether the given path is a directory.
+ *
+ * @returns `true` if path exists and is a directory, `false` otherwise.
+ */
+export declare const isDirectory: (path: PathLike) => Promise<boolean>;

package/dist/utils/fs.js

@@ -0,0 +1,15 @@
+import { stat } from "node:fs/promises";
+/**
+ * Checks whether the given path is a directory.
+ *
+ * @returns `true` if path exists and is a directory, `false` otherwise.
+ */
+export const isDirectory = async (path) => {
+    try {
+        const stats = await stat(path);
+        return stats.isDirectory();
+    }
+    catch {
+        return false;
+    }
+};

package/dist/utils/optimize.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Optimizes the given SVG content for usage inside an icon library using [svgo](https://svgo.dev).
+ * Will apply the following optimizations:
+ * - remove dimensions (height/width) so it can be set via CSS
+ * - "preset-default" to reduce file size and redundant information
+ * - (only if type "icon"): remove all fills so the color can be set via CSS
+ */
+export declare const optimizeSvg: (svgContent: string, type?: "icon" | "image") => string;

package/dist/utils/optimize.js

@@ -0,0 +1,25 @@
+import { optimize } from "svgo";
+/**
+ * Optimizes the given SVG content for usage inside an icon library using [svgo](https://svgo.dev).
+ * Will apply the following optimizations:
+ * - remove dimensions (height/width) so it can be set via CSS
+ * - "preset-default" to reduce file size and redundant information
+ * - (only if type "icon"): remove all fills so the color can be set via CSS
+ */
+export const optimizeSvg = (svgContent, type = "icon") => {
+    const plugins = [{ name: "preset-default" }, { name: "removeDimensions" }];
+    if (type === "icon") {
+        plugins.push({
+            name: "removeAttrs",
+            params: {
+                // remove all fills so we can set the color via CSS
+                attrs: ["fill"],
+            },
+        });
+    }
+    const { data } = optimize(svgContent, {
+        multipass: true,
+        plugins,
+    });
+    return data;
+};

package/dist/variables/generate.d.ts

@@ -0,0 +1,82 @@
+import { ParsedVariable } from "../types/figma.js";
+export type BaseGenerateOptions = {
+    /**
+     * If `true`, alias variable values will be resolved to their actual value instead
+     * of using a reference by their name.
+     *
+     * @default false
+     */
+    resolveAlias?: boolean;
+    /**
+     * Parsed Figma variables for an additionally dark theme.
+     */
+    dataDarkTheme?: ParsedVariable;
+};
+export type GenerateAsCSSOptions = BaseGenerateOptions & {
+    /**
+     * Selector to use for the CSS format. You can use {mode} as placeholder for the mode name.
+     *
+     * @default ":root"
+     * @example
+     * for the mode named "dark", passing the selector "html.{mode}" will result in "html.dark"
+     */
+    selector?: string;
+};
+/**
+ * Generates the given parsed Figma variables into CSS variables.
+ *
+ * @param data Parsed Figma variables
+ * @param options Optional options to fine-tune the generated output
+ * @returns File content of the .css file
+ */
+export declare const generateAsCSS: (data: ParsedVariable, options?: GenerateAsCSSOptions) => string;
+/**
+ * Generates the given parsed Figma variables into SCSS variables.
+ *
+ * @returns File content of the .scss file
+ */
+export declare const generateAsSCSS: (data: ParsedVariable, options?: BaseGenerateOptions) => string;
+/**
+ * Generates the given parsed Figma variables as JSON.
+ * Alias variables will be resolved to their actual value.
+ *
+ * @returns File content of the .json file
+ */
+export declare const generateAsJSON: (data: ParsedVariable) => string;
+/**
+ * Recursively resolves the value for the given variable name.
+ * So if the value is an alias, the output will be the actual alias value instead of a reference by name.
+ * If the value is not an alias, its value will be directly returned.
+ *
+ * @param name Variable name to resolve
+ * @param allVariables All available variables
+ * @example
+ * ```ts
+ * const allVariables = {
+ *   "variable-a": 42,
+ *   "variable-b": "{variable-a}"
+ * }
+ *
+ * const resolvedValue = resolveValue("variable-b", allVariables);
+ * // const resolvedValue = 42;
+ * ```
+ */
+export declare const resolveValue: (name: string, allVariables: ParsedVariable["variables"]) => string;
+/**
+ * Generates the timestamp comment that is added to the start of every generated file.
+ */
+export declare const generateTimestampComment: (modeName?: string) => string;
+/**
+ * Checks whether the given variable value is an alias / variable reference to another variable.
+ * Alias values are enclosed by curly braces.
+ *
+ * @example "{your-variable-name}"
+ * @returns `isAlias` whether the variable is an alias and `aliasName` the raw variable name without curly braces.
+ */
+export declare const isAliasVariable: (variableValue?: string) => {
+    isAlias: boolean;
+    aliasName: string;
+} | {
+    isAlias: RegExpExecArray | null;
+    aliasName: string;
+};

package/dist/variables/generate.js

@@ -0,0 +1,123 @@
+/**
+ * Generates the given parsed Figma variables into CSS variables.
+ *
+ * @param data Parsed Figma variables
+ * @param options Optional options to fine-tune the generated output
+ * @returns File content of the .css file
+ */
+export const generateAsCSS = (data, options) => {
+    const variableContent = getCssOrScssVariableContent(data.variables, (name) => `  --${name}`, (name) => `var(--${name})`, options);
+    const fullSelector = options?.selector?.trim().replaceAll("{mode}", data.modeName ?? "") || ":root";
+    return `${generateTimestampComment(data.modeName)}
+${fullSelector} {\n${variableContent.join("\n")}\n}\n`;
+};
+/**
+ * Generates the given parsed Figma variables into SCSS variables.
+ *
+ * @returns File content of the .scss file
+ */
+export const generateAsSCSS = (data, options) => {
+    const variableContent = getCssOrScssVariableContent(data.variables, (name) => `$${name}`, (name) => `$${name}`, options);
+    return `${generateTimestampComment(data.modeName)}\n${variableContent.join("\n")}\n`;
+};
+/**
+ * Generates the given parsed Figma variables as JSON.
+ * Alias variables will be resolved to their actual value.
+ *
+ * @returns File content of the .json file
+ */
+export const generateAsJSON = (data) => {
+    const variables = structuredClone(data.variables);
+    // recursively resolve aliases to plain values since keys can not be referenced in a .json file
+    // like we could e.g. in a .css file
+    Object.keys(variables).forEach((name) => {
+        variables[name] = resolveValue(name, variables);
+    });
+    return `${JSON.stringify(variables, null, 2)}\n`;
+};
+/**
+ * Recursively resolves the value for the given variable name.
+ * So if the value is an alias, the output will be the actual alias value instead of a reference by name.
+ * If the value is not an alias, its value will be directly returned.
+ *
+ * @param name Variable name to resolve
+ * @param allVariables All available variables
+ * @example
+ * ```ts
+ * const allVariables = {
+ *   "variable-a": 42,
+ *   "variable-b": "{variable-a}"
+ * }
+ *
+ * const resolvedValue = resolveValue("variable-b", allVariables);
+ * // const resolvedValue = 42;
+ * ```
+ */
+export const resolveValue = (name, allVariables) => {
+    const { isAlias, aliasName } = isAliasVariable(allVariables[name]);
+    if (!isAlias)
+        return allVariables[name];
+    return resolveValue(aliasName, allVariables);
+};
+/**
+ * Generates the timestamp comment that is added to the start of every generated file.
+ */
+export const generateTimestampComment = (modeName) => {
+    return `/**
+ * Do not edit directly.${modeName ? `\n * This file contains the specific variables for the "${modeName}" theme.` : ""}
+ * Imported from Figma API on ${new Date().toUTCString()}
+ */`;
+};
+/**
+ * Checks whether the given variable value is an alias / variable reference to another variable.
+ * Alias values are enclosed by curly braces.
+ *
+ * @example "{your-variable-name}"
+ * @returns `isAlias` whether the variable is an alias and `aliasName` the raw variable name without curly braces.
+ */
+export const isAliasVariable = (variableValue) => {
+    if (!variableValue)
+        return { isAlias: false, aliasName: "" };
+    const isAlias = /{.*}/.exec(variableValue);
+    const aliasName = variableValue.replace("{", "").replace("}", "");
+    return { isAlias, aliasName };
+};
+/**
+ * Gets the variable file content of the CSS or SCSS file as array where each element
+ * represents a single line of the file.
+ *
+ * @param variables Variable data (name + value)
+ * @param variablesDarkTheme Variable data (name +value) for additionally dark theme
+ * @param nameFormatter Function to format the variable name
+ * @param aliasFormatter Function to format a reference to another variable (e.g. `var(--name)` for CSS)
+ * @param options Generator options
+ */
+const getCssOrScssVariableContent = (variables, nameFormatter, aliasFormatter, options) => {
+    const variablesDarkTheme = options?.dataDarkTheme?.variables;
+    return Object.entries(variables).map(([name, value]) => {
+        const lightRawValue = value;
+        const darkRawValue = variablesDarkTheme?.[name];
+        const { isAlias: isLightAlias, aliasName: lightAliasName } = isAliasVariable(lightRawValue);
+        const { isAlias: isDarkAlias, aliasName: darkAliasName } = isAliasVariable(darkRawValue ?? lightRawValue);
+        let lightValue = isLightAlias ? aliasFormatter(lightAliasName) : lightRawValue;
+        let darkValue = isDarkAlias ? aliasFormatter(darkAliasName) : (darkRawValue ?? lightRawValue);
+        if (options?.resolveAlias) {
+            if (isLightAlias) {
+                lightValue = resolveValue(name, variables);
+            }
+            if (isDarkAlias) {
+                darkValue = resolveValue(name, variablesDarkTheme ?? {});
+            }
+        }
+        const formattedName = nameFormatter(name);
+        if (variablesDarkTheme && darkRawValue) {
+            if (lightValue === darkValue) {
+                return `${formattedName}: ${lightValue};`;
+            }
+            else {
+                return `${formattedName}: light-dark(${lightValue}, ${darkValue});`;
+            }
+        }
+        return `${formattedName}: ${lightValue};`;
+    });
+};

package/dist/variables/parse.d.ts

@@ -0,0 +1,42 @@
+import { FigmaVariablesApiResponse, ParsedVariable, RGBAValue, Variable, VariableValue } from "../types/figma.js";
+export type ParseFigmaVariablesOptions = {
+    /**
+     * Base for converting pixel in rem. Set to `false` for disabling rem conversion and use pixel values.
+     * @default 16
+     */
+    remBase?: number | false;
+};
+/** Default Figma mode name if only one mode exists and no other name is specified by the designer. */
+export declare const DEFAULT_MODE_NAME: "Mode 1";
+/**
+ * Parses Figma variables received from the Figma API to a minimal JSON.
+ * Numeric / pixel values will be transformed to rem.
+ * Variables / collections that are hidden from publishing will not be parsed.
+ *
+ * @param apiResponse Variables response body received from the Figma API.
+ */
+export declare const parseFigmaVariables: (apiResponse: FigmaVariablesApiResponse, options?: ParseFigmaVariablesOptions) => ParsedVariable[];
+/**
+ * Resolves the given Figma variable value to a string value. Value types:
+ * - number: converted to rem, e.g. 16 => "1rem"
+ * - color: converted to HEX color, e.g. {r:1, g: 1, b: 1, a: 1} => "#ffffff"
+ * - alias: referenced with variable name, e.g. "--primary-100" => "{--primary-100}"
+ * (curly brackets will indicate that the value is an alias / reference)
+ *
+ * @param value Figma variable value
+ * @param allVariables Object of all variables. Needed for variables that use aliases.
+ */
+export declare const resolveFigmaVariableValue: (value: VariableValue, allVariables: Record<string, Variable>, remBase?: ParseFigmaVariablesOptions["remBase"], name?: string) => string;
+/**
+ * Converts a RGBA value to a hex color.
+ * Transparency will only be added if its not 1, e.g. "#000000" instead of "#000000ff"
+ */
+export declare const rgbaToHex: (value: RGBAValue) => string;
+/**
+ * Normalizes the given variable name by apply these transformations:
+ * - replace slashes with "-"
+ * - replace whitespace with "-"
+ * - replace "+" with "-"
+ * - replace "&" with "-"
+ */
+export declare const normalizeVariableName: (name: string) => string;

package/dist/variables/parse.js

@@ -0,0 +1,127 @@
+/** Default Figma mode name if only one mode exists and no other name is specified by the designer. */
+export const DEFAULT_MODE_NAME = "Mode 1";
+/**
+ * Parses Figma variables received from the Figma API to a minimal JSON.
+ * Numeric / pixel values will be transformed to rem.
+ * Variables / collections that are hidden from publishing will not be parsed.
+ *
+ * @param apiResponse Variables response body received from the Figma API.
+ */
+export const parseFigmaVariables = (apiResponse, options) => {
+    const parsedData = [];
+    /**
+     * Loop through each variable and mode and create a new object.
+     */
+    Object.values(apiResponse.meta.variables).forEach((variable) => {
+        const collection = apiResponse.meta.variableCollections[variable.variableCollectionId];
+        if (variable.hiddenFromPublishing ||
+            variable.deletedButReferenced ||
+            collection.hiddenFromPublishing)
+            return;
+        // parse variable value for every mode
+        Object.values(collection.modes).forEach((mode) => {
+            const variableName = normalizeVariableName(variable.name);
+            const variableValue = resolveFigmaVariableValue(variable.valuesByMode?.[mode.modeId], apiResponse.meta.variables, options?.remBase, variableName);
+            // add/update parsed variable value
+            const existingIndex = parsedData.findIndex((i) => i.modeName === mode.name);
+            if (existingIndex !== -1) {
+                parsedData[existingIndex].variables[variableName] = variableValue;
+            }
+            else {
+                parsedData.push({
+                    modeName: mode.name,
+                    variables: { [variableName]: variableValue },
+                });
+            }
+        });
+    });
+    parsedData.forEach((data) => {
+        if (data.modeName === DEFAULT_MODE_NAME)
+            delete data.modeName;
+        const numberRegex = /\d+/;
+        // sort variables by name
+        // for variables with the same name that just end with a different number (e.g. my-var-100 and my-var-200)
+        // sort them by number instead of alphabetically so e.g. 100 is sorted before 1000
+        data.variables = Object.keys(data.variables)
+            .map((key) => {
+            const asNumber = numberRegex.exec(key)?.[0] ?? "";
+            return {
+                key,
+                asNumber: +asNumber || undefined, // prevent NaN
+                base: key.replace(asNumber, ""),
+            };
+        })
+            .sort((a, b) => {
+            if (a.asNumber && b.asNumber && a.base === b.base)
+                return a.asNumber - b.asNumber;
+            return a.key.localeCompare(b.key);
+        })
+            .reduce((variables, { key }) => {
+            variables[key] = data.variables[key];
+            return variables;
+        }, {});
+    });
+    return parsedData;
+};
+/**
+ * Resolves the given Figma variable value to a string value. Value types:
+ * - number: converted to rem, e.g. 16 => "1rem"
+ * - color: converted to HEX color, e.g. {r:1, g: 1, b: 1, a: 1} => "#ffffff"
+ * - alias: referenced with variable name, e.g. "--primary-100" => "{--primary-100}"
+ * (curly brackets will indicate that the value is an alias / reference)
+ *
+ * @param value Figma variable value
+ * @param allVariables Object of all variables. Needed for variables that use aliases.
+ */
+export const resolveFigmaVariableValue = (value, allVariables, remBase = 16, name) => {
+    if (typeof value === "number") {
+        if (name?.includes("font-weight"))
+            return `${value}`;
+        // numeric value, parse as rem or pixel value
+        // note: value 0 should also be parsed as "0rem" instead of just "0" because otherwise
+        // the CSS variable could not be used together with "calc()"
+        if (remBase === false || remBase <= 0)
+            return `${value}px`;
+        return `${value / remBase}rem`;
+    }
+    if (typeof value === "string") {
+        return `"${value}"`;
+    }
+    if ("type" in value) {
+        // parse value as alias
+        if (value.type !== "VARIABLE_ALIAS") {
+            throw new Error(`Unknown variable value type: ${value.type}`);
+        }
+        const reference = allVariables[value.id];
+        if (!reference) {
+            throw new Error(`Could not find variables alias with ID "${value.id}"`);
+        }
+        return `{${normalizeVariableName(reference.name)}}`;
+    }
+    return rgbaToHex(value);
+};
+/**
+ * Converts a RGBA value to a hex color.
+ * Transparency will only be added if its not 1, e.g. "#000000" instead of "#000000ff"
+ */
+export const rgbaToHex = (value) => {
+    const hex = Object.values(value)
+        .map((color) => Math.floor(color * 255))
+        .map((color) => color.toString(16))
+        .map((color) => color.padStart(2, "0"))
+        .join("")
+        .replace(/^/, "#");
+    if (value.a === 1)
+        return hex.substring(0, hex.length - 2);
+    return hex;
+};
+/**
+ * Normalizes the given variable name by apply these transformations:
+ * - replace slashes with "-"
+ * - replace whitespace with "-"
+ * - replace "+" with "-"
+ * - replace "&" with "-"
+ */
+export const normalizeVariableName = (name) => {
+    return name.replaceAll("/", "-").replaceAll(" ", "-").replaceAll("+", "-").replaceAll("&", "-");
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sit-onyx/figma-utils",
+  "description": "Utility functions and CLI for importing data from the Figma API into different formats (e.g. CSS, SCSS etc.)",
+  "version": "0.0.0-20250804145452",
+  "type": "module",
+  "author": "Schwarz IT KG",
+  "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
+  "bin": {
+    "@sit-onyx/figma-utils": "./dist/cli.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "homepage": "https://onyx.schwarz/development/packages/figma-utils.html",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SchwarzIT/onyx",
+    "directory": "packages/figma-utils"
+  },
+  "bugs": {
+    "url": "https://github.com/SchwarzIT/onyx/issues"
+  },
+  "dependencies": {
+    "commander": "^14.0.0"
+  },
+  "optionalDependencies": {
+    "svgo": "^4.0.0"
+  },
+  "scripts": {
+    "build": "pnpm run '/type-check|build-only/'",
+    "build-only": "rimraf dist && tsc -p tsconfig.node.json --composite false",
+    "type-check": "tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "@sit-onyx/figma-utils": "node ./dist/cli.js",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
+  }
+}