Convert Figma variable export to Tailwind color config

convert-figma-variables-to-tailwind-config.py

# Export from https://www.figma.com/community/plugin/1256972111705530093/export-import-variables

import json

app_name = "{fill_in}" # Make sure to replace this.

def rgba_to_string(rgba):
    """Convert RGBA color values to an RGBA string."""
    r = int(rgba['r'] * 255)
    g = int(rgba['g'] * 255)
    b = int(rgba['b'] * 255)
    a = rgba['a']
    return f'rgba({r}, {g}, {b}, {a})'

def read_json_file(file_path):
    """Read and return the content of a JSON file."""
    with open(file_path, 'r') as file:
        return json.load(file)

def generate_tailwind_config(json_data):
    """Generate Tailwind extend colors config from JSON data."""
    tailwind_config = {'colors': {}}
    tailwind_config['colors'][app_name] = {}
    for variable in json_data.get('variables', []):
        print(f"Processing variable: {variable['name']}")
        # Handle cases where the color name might not include a shade number
        if '/' in variable['name']:
            color_name, color_shade = variable['name'].split('/')
        else:
            color_name = variable['name']
            color_shade = 'DEFAULT'  # Use 'DEFAULT' or any other placeholder for colors without a specified shade

        color_values = variable['valuesByMode'].values()
        rgba_color = rgba_to_string(next(iter(color_values)))  # Assuming one mode per variable

        print(f"Adding color: {color_name} with shade: {color_shade} and value: {rgba_color}")

        if color_name not in tailwind_config['colors'][app_name]:
            tailwind_config['colors'][app_name][color_name] = {}
        
        tailwind_config['colors'][app_name][color_name][color_shade] = rgba_color

    return tailwind_config

def main(json_file_path):
    """Main function to process the JSON file and output Tailwind config."""
    json_data = read_json_file(json_file_path)
    tailwind_config = generate_tailwind_config(json_data)
    print(json.dumps(tailwind_config, indent=2))

if __name__ == "__main__":
    json_file_path = 'figma-variables.json'  # Update this to the path of your JSON file
    main(json_file_path)