Update Figma Color Descriptions to include RGB

100%

Update Figma Color Descriptions to include RGB

✓ Published0🌍 Public

Last edited Sep 13, 2021

Created on Sep 13, 2021

This example demonstrates a workflow for automatically updating Figma color style descriptions to include their corresponding RGB values. It uses the Figma API’s `getLocalPaintStyles()` method to iterate over all paint styles in the document. For each style, the script extracts the `paints[0].color` properties and constructs a description string containing the red, green, and blue channels, scaled from 0–1 to 0–255 using the `(color.r*256).toFixed(0)` calculation. The resulting RGB code is then assigned directly to the paint style’s `description` field, providing a quick way to document color values in a design file.

AI-generated description

Similar vizzes

Loading thumbnail…

Sketch Global colors to Layers

This example demonstrates how to extract the global color palette from Sketch’s asset library and render each color as a square swatch on the selected page. It iterates through the document’s color assets, converts each color from its native color space to a hexadecimal string, and creates a new `ShapePath` for every swatch, positioning them in a horizontal row. The script uses the Sketch JavaScript API, specifically `MSPersistentAssetCollection`, `ShapePath`, and `Rectangle`, with custom helper functions for RGB-to-hex conversion.

KKevinGutowski

58% match

Loading thumbnail…

Change Sketch Measurement Color

This example shows a Sketch plugin that programmatically reads the current measurement color from the active document and prints its RGBA values to the console. The code uses the `sketch` library to access the selection, then the `eventHandlerManager`, `normalHandler`, and `measurementRenderer` APIs to retrieve the color as an `NSColorSpaceColor` object. The resulting output confirms a solid red fill. No data source is involved; it demonstrates direct inspection of a Sketch interface element's style.

KKevinGutowski

57% match

Loading thumbnail…

Move Global Assets Colors and Gradients to Document Asset Colors and Graidents

This example shows how to move color and gradient assets from the global library into a document's asset collection. The code first retrieves the shared global assets using `MSPersistentAssetCollection.sharedGlobalAssets()`, then calls `colorAssets()` and `gradientAssets()` to extract those specific asset types. It then accesses the current document through `context.document` and uses its `documentData().assets()` object to set these collections with `setColorAssets()` and `setGradientAssets()`. The script relies on the Adobe InDesign scripting API, which provides access to document-level asset management.

KKevinGutowski

55% match

Loading thumbnail…

Gist ec761bad0f5e7bfb19f46d45ba0b3355

This example defines a small JavaScript utility that converts hexadecimal color codes into their red, green, and blue component values. The code presents the `hexToRgb` function, which first parses the hex string—overlooking an optional leading `#`—into an integer, then extracts the separate color channels using bit shifts and bitwise AND operations. The function returns an array of three numbers, each representing the intensity of a channel. This demonstrates a modular approach to color handling, using only core JavaScript without any external libraries or APIs.

MMAKIO135

55% match

Loading thumbnail…

General Update Pattern

This example demonstrates how to construct a reusable color legend using D3 v4’s General Update Pattern for nested elements. The code defines a `colorLegend` function that binds a color scale to a group, then appends and merges tick marks for each categorical domain value (setosa, versicolor, virginica). Using selections, enter, and merge, it updates circle radii and fill colors, while text labels are positioned with padding. The legend is rendered as SVG, driven by an ordinal scale with custom hex colors, explicitly showing how to handle enter, update, and exit phases for nested data.

CCurran Kelleher

55% match

Loading thumbnail…

Reading Sketch preferences for colors

This visualization captures a software designer’s preferred color settings for Sketch by reading them directly from the application’s saved user defaults. The code uses the `NSUserDefaults.standardUserDefaults()` API to retrieve the stored `colorForMeasurements`, `colorForFlows`, and `colorForSnapsAndGuides` preferences, then decodes the binary data with `NSKeyedUnarchiver`. The resulting color values are likely rendered as a palette or swatches, revealing the user’s chosen hues for interface measurement overlays, flow arrows, and snapping guides, all without manual input.

KKevinGutowski

54% match

Loading thumbnail…

A Sketch snippet to copy global colors to the pasteboard

This sketch copies all global color assets from a Sketch document to the clipboard as CSS rules, converting each color to hex and generating class names. It uses the Sketch JavaScript API (`sketch.globalAssets`) to access color assets and `NSPasteboard` to write the formatted string. The code iterates through every saved color, builds a CSS block with a `.colorN` selector or the asset’s name, and trims trailing whitespace before showing a confirmation message.

KKevinGutowski

54% match

Loading thumbnail…

16:9 - Figma

This example demonstrates a Figma plugin that resizes a selected design element to fit a 16:9 aspect ratio. It calculates a multiplier based on the current width, then uses the `resize` method to set the dimensions to 16 times that multiplier and 9 times it, while also enabling `constrainProportions` to maintain the correct ratio. The code reads the selected frame's properties directly from the Figma API and modifies its dimensions accordingly.

KKevinGutowski

53% match