Best practice for using the Figma UI Kit

[LeCrapySae]

Hi, I'm new to using the PrimeOne Figma UI Kit. I've recently purchased a license and got the 3.0.1 version of the Figma file.

I have several questions that I hope the community can help point me in the right direction on how best to navigate through:

1. What is the best way to design for components which are dynamic? For example, the Stepper component comes in 1 instance, which has 3 steps. I'm however looking to create designs for different needs with 2 steps, and 5 steps.

2. What is the best way to add various other components into an existing component? For example, the Card component has different slots within it, one if it being Card/Content. In theory, I should be able to input other components, such as a Chip or Tag into the Card/Content but right now it is only a text and I wasn't able to just swap it to something else.
   

3. What is the best way to extend the components to cover functionalities as per PrimeVue? For example, the Toast component right now in Figma only has Toast/Severity and Toast/Text. While on PrimeVue, I saw that I'm able to do Toast/Template to provide more options when it comes to design to include buttons and an avatar even.
   

4. What is the best way to handle texts for consistency? For example, within a Stepper/Content, I'd like to have a title, subtitle and body text. These texts needed to be consistent with all other components and design. There isn't a text component to use with like different sizing conventions (like S/M/L/XL for instance).

Overall, I'm needing to ensure that whichever way we do it, it should comply with the PrimeVue standards such that when the developers inspect the Figma designs through Dev Mode, they know exactly which configurations to apply when implementing them as per PrimeVue's documentation (which should correspond with the Figma components).

Thanks in advance! Would appreciate any guidance on these areas.

[ceh137]

@LeCrapySae Have you figured that out? I'm having the exact same problem, basically not able to do anything.

[onursenture]

Hi, PrimeOne UI Kit is designed to be compatible with our UI component libraries, which can sometimes lead to constraints that might be seen as limitations from a designer's perspective. However, we value all feedback and continuously seek to make improvements. Your feedback is essential to us. Let me briefly address your questions:

1. Theoretically, we can't predict how many steps a user might need. Therefore, we recommend duplicating the component and creating custom components tailored to your needs in such cases.
2. What you're referring to can be achieved using a Slot component technique, which allows for "Swap Instance" across the components. We're currently working on this. For now, you'll need to detach and use it independently.
3. The best way to enhance component functionality is by copying the component and creating your custom version. Changes to the main components might not align perfectly with PrimeVue and could be disrupted by UI Kit updates. Additionally, the features referred to as */Template in PrimeVue are used to demonstrate the full potential of components when customized and are outside the scope of the UI Kit.
4. PrimeVue does not have a built-in method for consistency in text styles. We recommend creating your own tokens and using them across your components for consistency.

I hope this helps.

[LeCrapySae]

Thanks @onursenture for the follow up! Just to round it up:

1. That's understandable, I'll duplicate them accordingly then.

2. Any indicative timeline for the Slot component swap? I noted from some earlier discussions here that there might be a new version this month, would it include this?

3. Noted on that, I'll keep the original UI Kit untouched then (apart from Tokens, which should be fine for future updates I presume?).

4. Got it. Any tips/guides on setting the Tokens to also try to make them similar to other components' throughout the UI Kit? For example, I noticed some differences as below:

   • the header for Dialog and Card is set at 1.25rem
   • the header for Stepper and Accordion doesn't have any Tokens for font sizes
   • the header for Panel is set at 14 and not with rem
   • the header for Drawer is set at 1.5rem

Appreciate your help though! I have a better idea on how to move forward now.

[onursenture]

We currently do not have a timeline for a Slot component swap. It'll improve the designer experience dramatically, but implementing such a change in a UI Kit as large as PrimeOne could take some time.

There can be differences depending on the components, but we should consider these as design decisions rather than inconsistencies. If you want to use a common typography, you can create these typographic tokens in a custom tokens set. You can then use these typography tokens in PrimeOne or your design system, which you make by wrapping PrimeOne.