Figma Name That Color Plugin: Name Colors and Export Code

Quick answer: Select one Figma layer, run Figma Name That Color, then choose a color from its Fills, Strokes, or Effects list. The plugin matches the color to a readable name and lets you copy it as a CSS custom property, a Jetpack Compose Color, or an Android XML color resource.

Design files often contain useful colors without useful names. A layer may use a precise blue, a semi-transparent shadow, or several gradient stops, but the value still has to be translated into code and given a name that teammates can understand. Figma Name That Color handles that small but repetitive part of design handoff directly in Figma.

Open Figma Name That Color in the Figma Community

What the Figma Name That Color plugin does

The plugin examines one selected layer and groups the colors it finds into three sections:

• Fills: solid fills and every stop in supported linear, radial, angular, and diamond gradients.
• Strokes: colors applied to a layer’s strokes.
• Effects: visible drop-shadow and inner-shadow colors.

For each color, it finds the closest descriptive color name. When the value is not an exact match in its color-name library, the result is marked “Approx”. The displayed name also includes opacity, which makes semi-transparent effects easier to identify.

This is especially practical when a developer needs a starting name for a design token or resource instead of copying an anonymous hex value such as #3b82f6 from the inspector.

How to use the plugin in Figma

1. Select exactly one layer

Click a frame, shape, text layer, component, or other single layer in your Figma file. The plugin reads the properties of the current selection, so it intentionally asks you to select one layer rather than a whole group of unrelated layers.

For example, select a button to inspect its fill and stroke, or select a card to inspect its background and shadow colors.

2. Open Figma Name That Color

Open the plugin from Figma’s Resources panel or Plugins menu. If no layer is selected, the plugin displays a prompt asking you to select one layer to begin.

When you select a layer, the results update automatically. Changing the selected layer updates the list, too, so you can inspect another element without reopening the plugin.

3. Review fills, strokes, and effects

Each result includes a circular color preview and a generated name. Gradient colors appear as individual stops, while a layer with a visible shadow shows the shadow color under Effects.

Use the generated name as a helpful code label, not as a replacement for a considered design-token system. For a product palette, a semantic name such as primary, onSurface, or error is often more durable than a literal color name. The plugin is most useful when you need to quickly identify, compare, or export an individual value.

4. Copy the format your project needs

Every color row has three copy buttons. Choose the output that matches your codebase:

The exact generated name depends on the selected color and whether it is an approximate match. CSS uses lowercase, hyphen-separated names; Compose uses PascalCase; and XML uses lowercase snake case.

Exporting Figma colors as CSS variables

CSS custom properties give a named value that can be reused throughout a stylesheet. After copying a CSS result, paste it into a selector that owns your variables, commonly :root:

:root {
  --cornflower-blue-100: #6495ed;
}

.button {
  background: var(--cornflower-blue-100);
}

The plugin retains transparency when needed. An opaque color is exported as a hex value, while a translucent color is exported as rgba(...). That is useful for overlay, border, and shadow values where alpha is part of the visual design.

If you are converting more than one visual property from Figma, the Figma Solid and Gradient to CSS guide covers a companion workflow for fills and gradients.

Exporting colors for Jetpack Compose

For a Compose project, copy the Compose output and paste it into the file that defines your palette or UI constants. The generated value is in ARGB order, so the alpha channel comes first:

import androidx.compose.ui.graphics.Color

val CornflowerBlue100 = Color(0xFF6495ED)

For a one-off implementation, this can save a conversion step between Figma’s RGBA color and Compose’s Color constructor. For an app theme, map the exported value to a meaningful role rather than exposing literal color names throughout the UI:

private val LightColors = lightColorScheme(
    primary = CornflowerBlue100,
)

That distinction matters: a literal color name describes an appearance, while primary describes the job the color performs in your interface. See How to Use Strings, Colors, and Drawables in Jetpack Compose for more guidance on keeping Android colors theme-aware.

Exporting colors to Android XML

For legacy Android Views or projects that still centralize values in res/values/colors.xml, choose the XML button. The plugin copies a complete color-resource line with an eight-character hexadecimal value:

<resources>
    <color name="cornflower_blue_100">#FF6495ED</color>
</resources>

The first two characters after # represent alpha. This lets an exported shadow or translucent stroke keep the opacity that was set in Figma.

Tips for better color handoff

• Select the actual painted layer, not only its parent frame, when you need a specific fill or stroke.
• Check the Effects section when recreating drop shadows and inner shadows; their colors may not appear under Fills.
• Inspect gradient stops individually before creating a token. A gradient often contains colors that should not become global palette roles.
• Treat an Approx label as a readable hint. The copied RGB, RGBA, or ARGB value is the color to use when visual fidelity matters.
• Rename exported variables when your product already has established semantic tokens. Consistent names across design and code are more valuable than any literal color label.

Frequently asked questions

Does the plugin work with gradients?

Yes. It reads the individual color stops from linear, radial, angular, and diamond gradients, then lets you export each stop separately.

Why does a color say “Approx”?

The plugin compares the selected color against its built-in color-name collection. “Approx” means it found the closest available descriptive name rather than an identical catalog entry.

Can I select multiple layers at once?

The plugin is designed for one selected layer at a time. Select a single layer, copy the colors you need, then move to the next layer.

Does it export opacity?

Yes. CSS output uses an rgba(...) value for non-opaque colors. Compose and XML output include alpha in the leading part of the ARGB hexadecimal value.

Turn selected Figma colors into useful code

Figma Name That Color is a focused handoff tool: select a layer, identify its fill, stroke, gradient, or shadow colors, then copy a code-ready value in the format your project expects. It is a fast way to bridge the gap between a color on the canvas and a clear, reusable line of CSS, Kotlin, or XML.

Try Figma Name That Color and use the generated names as a starting point for a cleaner design-to-code workflow.