- [Index / Blog](https://legault.me/blog.md)
figma · December 19, 2023

# Figma Variables: Hex Colors to Aliases Automatically

![Figma Variables: Hex Colors to Aliases Automatically](https://legault.me/images/posts/figma-variables-hex-colors-to-aliases/frame-3-1.jpg)

Automate the process of creating aliases from one Collection to another. Batch convert hex codes to aliases with this script.

[Download](https://github.com/matlegault/figma-variables-hex-to-alias)

![](https://legault.me/images/posts/figma-variables-hex-colors-to-aliases/289993596-b8d7231a-1da7-47a6-a7ce-a01088e549d0.gif)

## What is this

This is useful when converting your Styles to Variables, and wanting to create a hierarchy across collections by using Aliases (references) from one Collection to another.

This will simply match hex values from one collection to another and create an alias if there's a match, so you can have a Collection of Primitives that other Collections reference.

## How to use

The plugin is not yet published on [figma.com/plugins](http://figma.com/plugins) so the installation process is a little more involved right now.

1. Download or clone the contents of the [GitHub repo](https://github.com/matlegault/figma-variables-hex-to-alias) to a location that is *not* your downloads folder (if you delete these files after installing through the *Development* menu, it will break the plugin)

2. Right-click the canvas Plugins > Development > Import plugin from manifest…

![](https://legault.me/images/posts/figma-variables-hex-colors-to-aliases/figma-install-01.jpeg)

3. Navigate to the file **/path/to/plugin/manifest.json**

![](https://legault.me/images/posts/figma-variables-hex-colors-to-aliases/frame-7.jpg)

4. This panel will close and the plugin will now be available by going to the Development section in your plugins.

---

More: [Home](https://legault.me/index.md) · [Work](https://legault.me/work.md) · [Photography](https://legault.me/photography.md) · [Renders](https://legault.me/renders.md) · [Blog](https://legault.me/blog.md) · [About](https://legault.me/about.md) · [Contact](https://legault.me/contact.md)

Elsewhere: [Dribbble](https://dribbble.com/legault) · [Instagram](https://www.instagram.com/mathieulegault/) · [Vimeo](https://vimeo.com/legault) · [YouTube](https://www.youtube.com/user/mathieulegault1) · [Flickr](https://www.flickr.com/photos/105279032@N02/)