[Figma] Figma Kit Pro suggestions

[emavitta]

Environment

• Figma file v1.3.0

Version

v1.3.0

Reproduction

No reproduction needed

Description

I’m using Nuxt UI Pro for a large project that also requires extensive mockups. I bought the Figma file, and while I found some things I could live with, I made changes to my local file for better usability. Some changes may be applied to the nuxt ui system design as well.

I’m using the Figma file v1.3.0.

Icon

The user solid icon includes two vector icons.

General

There are several components with outdated auto-layouts that need updating.

Colors

Alpha colors are missing from the variables. For instance, if you change the primary color (e.g., in buttons), you might still find some hardcoded green with alpha values, along with other green variations.

My personal solution was to add alpha variables and apply them to the components that needed them. The scaffolding isn’t perfect—it might be better to use something like “400/25, 400/10”—but it works.

Also, in some components, only the primary color is available, but in certain cases, you can use other colors as well. For example, the Button component only has the primary color, but other colors like red and green can also be used.

My solution was to handle the variants differently. Instead of having different shades for the primary color, I used the first column for the primary color and the other columns for other useful colors like red, green, and orange. I know 4 columns is the limit for non-enterprise accounts, but for now, it’s the best solution short of manually changing the colors.

Component Variant Organization

Some components are hard to use because of how they are organized. For example, the dropdown component.

The default variant only includes the button component because the dropdown is hidden. This means that toggling isOpen over time causes you to lose all the configurations for the DropdownMenu.

I used it in the sidebar, enabled isOpen, configured the DropdownMenu, and then disabled isOpen. However, after making some changes and reopening the dropdown, some configurations—like positioning—were lost. Sometimes it even loses all the work I’ve done on the DropdownMenu.

The solution, though tedious, is to include all components for every variation.

Component Slot

Some components in the code offer slots that are missing in the system design. For example, the DashboardSection.

This is just one case, but I often find myself detaching components just to add a custom placeholder component so I can use the components with the correct slot. It’s tedious, but it’s the best way to mimic the framework.

Placeholder

In general, I like the placeholders for the slots, but they can clutter the outline view. I understand that they look nicer and maintain quality, but for the outline view, a simple 5x5 tiled image could achieve the same effect while being lighter and slightly less memory-intensive.

SelectMenuItem

There are two SelectMenuItem components in the ———— SelectMenu - UNPUBLISHED COMPONENTS! ———— section. This means you can’t use them, as Figma cannot determine which component to apply. I changed the latter to SelectMenuItemPlaceholder

TableHeadItem

Span and Sortable have different text variants. I standardized Span to match the button’s font weight.

Thanks for the amazing job.
I can be of any help if needed.

Additional context

No response

Logs

No response

[SarahM19]

Thanks for your feedback @emavitta , I will definitely consider this for the next release.