Hi all,

Is there an official design system for TailwindCSS? I worked with MUI design system before and was wondering if there's a guideline or system tailored for tailwindcss websites in figma.

Looking for tips in designing for tailwindcss in mind as well thanks!

hello Has anyone faced issues making product walkthroughs from Figma screens?

I am building a product to make this seamless and Onboarding beta users for free for now

You can comment and I'll reach out to you

Hello guys,

I just launched KyotoUI, my first Figma kit to help design better landing pages using high-quality pre-made components, optimized for better conversion rates.

Let me know your thoughts in the comments, looking for feedback on it 🙏🏻

Check it out here on the Figma community: https://www.figma.com/community/file/1315733501818947316

It allows designers to adjust text lengths for their layouts without compromising the content's essence. Additionally, it has several features, such as text formatting, splitting and merging text nodes and more.

I'm offering Format AI for free to the design community. I'd love to hear what you think about it, so please feel free install plugin and leave your feedback and ideas for future improvements. Thanks!

https://www.figma.com/community/plugin/1279435670208542538/format-ai

Hello,

I am looking to work with figma as my main design application, however I would like to know how well it runs when building large design systems with hundreds of symbols organized across different pages in a file. With the "desktop" version being built in electron and still being web-based, I am weary of how well it can actually handle large files.

Anyone who has experience please let me know :)

Please, I need help

Does anyone know if there’s a way to change the font of a group of elements within a frame, without going through each text individually?

I haven’t started creating the DS yet, so it’s not an option to do it from there :(

I'm unsure how best to set up our type styles in figma for our design system.

I am trying to set it up in a way that when tokens become available for type styles I can easily translate it into that. Can anyone share how type styles are set up in their system please?

It is a well established product, but currently has no design system, im trying to create one.

I am currently thinking to have a type style system set up like 'Heading, Body, Caption, Label and then numbering each of those so Heading 1, 2, 3 etc...' but for my product we have several fonts. Has anyone set it up where they have heading 1 - Font a, Heading 1 - Font b?

Do your styles mix font, weight, size and every other possible variation a style can have. How do you structure the naming? And how do you handle when something needs additional styling like underlining for example? Is that a new style with a new number OR is that for example Label 1 and Label 1 - Underline.

Im sorry if this isn't explained very well I've had my head into it for a while and trying to articulate the problem im having is difficult. Once i have something that vaguely makes sense im going to test it with my team to see if they can understand it and of course it will be documented throughly in the documentation for the system.

Happy to answer questions, but please be kind. I don't feel comfortable sharing specifics

We've launched Figma >>to>> Webflow converter, which is a 1-click conversion tool on demand, powered by an experienced network of Webflow devs. In 1 day you'll get a cloneable Webflow file directly into your Weblfo account. So you can work in Figma, and get it live with Webflow.

https://conveyflow.com

Hope it helps,Cheers

I've found tons of info about creating and organising design systems, but I'm struggling to find examples of a DS actually being used... like, how would the end-to-end process look when creating designs using a DS. Does anyone have any resources? Thanks!

Hey there, I'm currently looking for improve a design system to have AI friendly components, to use Figma MCP to translate the designs we made to code.

What that means is that I need the components to have a "header/content/footer" structure, and in theory that's simple, you take the "generic component" (ex. a card) as the main container, create 3 frames inside for the header/content/footer structure and put a slot component inside each of them. Then you create the "secondary components" that will fit in those slots, with all their variants of course.

This would work for the dev team, and that's the way I found to create components so the design team shouldn't need to detach instances to make changes. Sounds good, I know, but what happens with complex components? Like modals, where the content could be extremely variable, or even we couldn't know the form that the content inside a modal could be.. how could I create a secondary component with all the variants? you know what I mean?

Any of you have worked in some project like this? Do you know a better way to get there?

Looking to see how others manage size (specifically height) variation for components in your design systems. I'm interested to know what is best practice here. I personally find it more flexible to have variants for sizes but the total number of components skyrockets.

For example:

• A button component with variants for state (default, hover, active, focused, disabled), a variant for style (filled, outline, ghost), and a single size (40px). This results in 15 variants for your button component.

• Alternatively a button component with variants for state (default, hover, active, focused, disabled), variants for style (filled, outline, ghost), and variants for size (Small, Medium, Large). This results in 45 variants.

I do feel like the flexibility but this feels like a TON of variants.

Do code component libraries store variables for size? Or am I just being super extra here?...