# figma-to-theme-code-generator

**Repository Path**: mirrors_primefaces/figma-to-theme-code-generator

## Basic Information

- **Project Name**: figma-to-theme-code-generator
- **Description**: Continuous Integration Flow between Figma and Theme Designer
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-12
- **Last Updated**: 2026-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PrimeUI Theme Generator

[![GitHub marketplace](https://img.shields.io/badge/marketplace-prime--theme--tokens--generator-blue?logo=github)](https://github.com/marketplace/actions/prime-theme-tokens-generator)
[![GitHub release](https://img.shields.io/github/release/primefaces/theme-designer-ci.svg)](https://github.com/primefaces/theme-designer-ci/releases/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

A GitHub Action that generates theme tokens for Prime UI libraries (PrimeVue, PrimeNG, etc.) based on design tokens from your design system. This action enables seamless continuous integration between your design tokens and Prime UI theme generation.

## ✨ Features

- **🎨 Design Token Integration**: Convert design tokens to Prime UI compatible themes
- **🚀 Multiple Prime UI Library Support**: Works with PrimeVue, PrimeNG currently. PrimeReact support will be added in the future.
- **⚡ Fast Theme Generation**: Automated theme creation from your CI/CD pipeline
- **🎯 Live Preview**: View the generated theme at Prime UI showcases using Theme Designer
- **🔐 Secure Authentication**: Uses API keys for secure theme generation
- **📦 Ready-to-Use**: No additional setup required, works out of the box

## 🚀 Usage

### Example

```yaml
name: Automated Figma To Theme Code

on:
    push:
        paths:
            - "tokens.json"

permissions:
    contents: write

jobs:
    generate-tokens:
        name: Generate Theme Code
        runs-on: ubuntu-latest
        steps:
            - name: Checkout repository
              uses: actions/checkout@v3

            - name: Generate Prime Theme
              uses: primefaces/theme-designer-ci@1.0.0-beta.4
              with:
                  designer-secret: ${{ secrets.THEME_DESIGNER_SECRET_KEY }}
                  theme-name: "acme"
                  font-size: "14px"
                  font-family: "Inter Var"
                  project: "primevue"
                  tokens-path: "tokens.json"
                  output-dir: "./acme-theme"

```

## 📋 Inputs

| Input             | Description                                                         | Required | Default       |
| ----------------- | ------------------------------------------------------------------- | -------- | ------------- |
| `designer-secret` | API key for authentication with the Prime Theme Designer service    | ✅ Yes   | -             |
| `theme-name`      | Name of the theme to generate                                       | ✅ Yes   | -             |
| `project`         | Target Prime UI project (`primevue`, `primeng`)                     |  ✅ Yes   | -             |
| `font-size`       | Font size for theme preview in visual editor                        | ❌ No    | `14px`        |
| `font-family`     | Font family for theme preview in visual editor                      | ❌ No    | `Inter Var`   |
| `tokens-path`     | Path to the design tokens file                                      | ❌ No    | `tokens.json` |
| `output-dir`      | Directory where generated theme files will be saved                 | ❌ No    | `./`          |

## 🔑 Setup

### 1. Get Your API Key

1. Visit the [PrimeUI Store](https://primeui.store/user/designer)
2. Purchase an Extended License
4. Navigate to your [account](https://primeui.store/user/designer) settings
5. Generate a secret key for CI/CD integration

### 2. Add API Key to Repository Secrets

1. Go to your GitHub repository
2. Navigate to **Settings** > **Secrets and variables** > **Actions**
3. Click **New repository secret**
4. Give a name such as: `THEME_DESIGNER_SECRET_KEY`
5. Value: Your API key from Prime Theme Designer
6. Click **Add secret**

### 3. Configure Figma Token Studio with a Git Sync Provider

Visit the [Token Studio](https://docs.tokens.studio/token-storage/remote/sync-git-github) documentation for a comprehensive guide to connect repository so that
you'll be able to push tokens.json to the git repository where this action runs.

## 📁 Output

The action generates theme files compatible with your specified Prime UI project. You may import the theme files to your project, and configure it as your "preset".

- [PrimeNG Theming Docs](https://primeng.org/theming#theme)
- [PrimeVue Theming Docs](https://primevue.org/theming/styled/#theme)

## Example Repository

Visit the example repository with a sample configuration.

https://github.com/primefaces/theme-designer-ci-test

## Live Preview

After your CI pipeline completes successfully, your theme becomes available in the Prime UI Theme Designer. 

- Navigate to the Prime UI library website.
- Click the ⚙️ icon at topbar to open up Designer Editor.
- Sign in with your license key and pass key credentials.
- Then select your theme from the available options to apply it across all demos and website content.
- Note that CI-generated themes are provided in read-only mode for preview purposes only and cannot be edited in the Theme Designer.

## 🛠️ Supported Projects

- **PrimeVue** (`primevue`) - Vue.js UI library
- **PrimeNG** (`primeng`) - Angular UI library
- **PrimeReact (soon)** (`primereact`) - React UI library

## 🐛 Troubleshooting

### Common Issues

**Authentication Failed**

- Verify your API key is correct and added to repository secrets

**Invalid Tokens Format**

- Ensure your `tokens.json` follows the expected structure
- Validate JSON syntax using a JSON validator
- Make sure default tokens are not removed and in case new tokens are required, they are defined under the [https://primevue.org/uikit/guide/#tokensets](custom) tokenset.

**Missing Output Files**

- Check that the `output-dir` path is correct
- Verify repository permissions allow file creation

**Project Not Supported**

- Ensure the `project` input matches supported values: 'primevue', 'primeng'.

### Debug Mode

Enable debug logging by setting the `ACTIONS_STEP_DEBUG` repository secret to `true`.

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## 💬 Support

- 📖 **Documentation**: [Prime Theme Designer Guide](https://designer.primetek.com.tr/docs)
- 💬 **Community**: [PrimeTek Community Forum](https://github.com/orgs/primefaces/discussions)
- 🐛 **Issues**: [GitHub Issues](https://github.com/primefaces/theme-designer-ci/issues)
- 📧 **Enterprise Support**: Contact [PrimeTek](https://www.primetek.com.tr/contact)

## 🏢 About PrimeTek

This action is developed and maintained by [PrimeTek Informatics](https://www.primetek.com.tr/), the team behind the Prime UI libraries trusted by thousands of developers worldwide.

---

**Made with ❤️ by the PrimeTek Team**