Hello everyone,
I am reaching out to the community to bring some awareness to the issues I have been facing lately, and I am sure I am not the only one.
My first issue is “A component with properties and variants nested into another component”. I love making templates to ease workflows and for that, I e.g. make a minor design system to manage the basics. For example, I make a component with different button variants in size and type – this component is to quickly change the look, e.g. a new project with different button sizes and border-radiuses, maybe even colours. This component handles that. Afterwards, I would like to take the (previously mentioned) component and create another component to manage and easily create properties to manage different versions of the overall button. E.g. Has icon: No icon, Only icon, Left icon, Right icon, Inner left icon, Inner right icon, etc. Then it might also have Type, Disabled, Has text, and Has indicator to quickly change between the different variants of the button. So overall, one component controls the styling of the button (to quickly change it everywhere), and another button manages the different variants – where the first one is nested into it. I can set it up, no problem, but the problem is when I switch the size then nothing happens – the nested component works fine outside of the other component, but inside it breaks. It seems as if I only got one way and that is to move all of it into one component with all properties in there for it to work. However, that would remove the quick restyling method if you were to start having a simple design system to kickstart new projects. It’s not that it would make it more difficult or complicated, but it does require more time to restyle everything.
https://www.loom.com/share/330cf2c751834dc39304585715dd30a6?sid=71e99212-c355-4ac3-a751-d770594dc33e (Video of example of what I am talking about)
Another issue that I am facing is that I want to use Figma’s variables (tokenisation), but you are simply too far behind compared to Token Studio, and the requirements for the designer to actually take over the basic stylesheet for the developer. In another matter to these variables, what really annoys me is that I can’t even have the variables window visible (hooked) to the side, like another sidebar. I’m not talking about replacing the styling to the right, but have the variables next to them instead or a sidebar you can expand (please, just don’t do another toggle of the sidebar view). Or even better move the window outside of Figma’s main “window” – e.g. most designers use multiple screens. Big screen Figma main window. The second screen could easily be “Figma’s variables window”. That would be super helpful to actually get work done quicker. But most of all GET typographies in there, effects, anything you can save as a style in the sidebar you should be able to save as a variable. Otherwise, your attempt at tokenisation is useless and you should just refer people to use Token Studio until you make something that is better than what they have made.
I am sorry, but it’s frustrating when you really want things to succeed and you just hid walls that are made impossible for you to climb over.
Best regards,
Morten.
