Figma UI Kit with Primefaces & Ultima Theme

[vla2307]

Hello everyone,

I’m working on a design-to-development workflow challenge and could use some guidance. Since I've only worked in design so far and my knowledge of CSS/HMTL and programming is rather limited, especially since we are working with JSF, I really hit a wall when looking for a solution to our current challenge.

Current Setup

Design: We’re using Figma with a paid license and bought the PrimeOne UI Kit, which includes design tokens.
Development: We are using PrimeFaces (JSF) as our component library.
Styling: We also bought a PrimeFaces Theme (Ultima), because we hoped that helps us with the start of our project and saves time with the styling since we have the UI Kit too.

Goal

We tried to export the Token Studio Tokens from Figma to upload them in the Ultima theme but the outcome is quite not what we hoped for. We hoped to get that by purchasing everything from Prime, but now we figured out that the theme and UI Kit Tokens are not at all compatible, since the variable names are not even close the same. Even the UI Kit and the current PrimeFaces components aren't on the same page (e.g. in the UI Kit are 4 sizes of round badges while in the component library are 3 different sizes). I am a bit frustrated that it was nowhere stated that there might be inconsistencies.

Questions

Has anyone set up a similar problem with PrimeFaces and the UI Kit, or found a solution for it? Or am I overseeing something? I hardly find people with the same or similar setup like us.

Are there any tools, plugins, or practices that could make this process more efficient?

Any insights, tips, or relevant experiences would be greatly appreciated. Thanks in advance!

[tandraschko]

AFAIK there is no support of Figma, newer Prime* theming and PrimeFaces.
PrimeFaces themes are only SASS, whereas other Prime* libs using CSS vars.

I dont know the exact plans of PrimeTek but i hope to see newer PrimeFaces themes with CSS vars and Figma support.

You may ask primetek via mail.

CC @cagataycivici @mertsincan

[onursenture]

Hello,

We are sorry to hear about your disappointment. Unfortunately, the latest version of the PrimeOne Figma UI Kit only supports the Aura theme and the theming engine of the latest versions of PrimeVue and PrimeNG. You are correct that there is no note regarding incompatibility, but it is clearly stated on the UI Kit's showcase page for PrimeFaces that only the Aura theme is included.

Additionally, the components used in premium templates, particularly in Ultima, are unrelated to PrimeOne, as Google Material Design is used in Ultima.

Given the current situation, I recommend combining the Figma file that comes with Ultima (which you can download from PrimeStore) with Google's official Figma work for Material Design 2. Unfortunately, PrimeTek currently does not offer a design-to-development solution addressing your case.