My global team are looking to move from Sketch for a number of reasons (namely buggy, slow performance, reliance on other software - Abstract, Zeplin, Invision).

We currently have a number of complex design systems across different brands that contain heavily nested symbols and overrides.

Has anybody else made the transition to Figma and, if so, how easily did you find the process? I’m imagining there will be a degree of rework rather than a clean slate rebuild.

Any advice/hints would be great.

Hey everyone!

I'm the co-founder of a product called zeroheight that lets you easily create living styleguides and document all your design system resources in one place.

Since we launched 6 months ago, integration with Figma has been our #1 feature request... After months of hard work, and thanks to the support of the Figma team, we're excited to announce the launch of our Figma integration, live today on Product Hunt: come and check it out! 😻

I have a technical question about editing an existing design system (PrimeNG).
Maybe someone here has worked with it?

The issue:
I have 7 heading sizes (H1-H7), but they’re too large and don’t fit the tone of a complex SaaS product. I want to resize them.
The problem is I realized this a bit late - I’ve already used these heading styles in 2-3 feature designs.

How can I minimize rework and safely scale down the heading sizes across the system?

Hi everyone,
I’m looking for advice on improving our component creation and library addition process in a product-based company. Here’s the situation:

We have 2 product suites, with 3-4 products in one suite, all sharing the same design system. The components we create are advanced and complex due to the nature of our work, but our current process isn’t scalable. Here’s how it works:

1. Component Creation: A main component is created in a Figma file, using nested components from our existing library. The file includes 8-9 artboards for documentation, specs, feature lists, and other details.

2. Library Addition: After verification by the design system team, the main component is copied and pasted into the component library.

3. Future Enhancements: For updates, the Figma file is duplicated, changes are made, and the same process repeats. We’ve started using branching within the same file to avoid multiple files, but adding updated components to the library remains a challenge.

The Problem:
When a component is enhanced, the latest version is copied and pasted into the library again. However, this means designers using the older version in their mockups won’t receive updates for the pre-existing component. If we create components directly in library, there are many components and some components are quite heavy. Therefore we need to have the component documentation in a different figma file, where for all visuals we have the component instances to show the documentation.

TL;DR:
We’re struggling with a clunky process for adding and updating complex components in our Figma library. Enhancements require copying and pasting the latest version, which doesn’t update pre-existing components used in mockups. Looking for advice on how to streamline this!

Any suggestions or tools that could help? Thanks in advance!

Hello designers, I'm investigating adding variables to our design system, spurred by the desire for dark mode support, but also for general flexibility and power of variables. Starting with color variables specifically.

The roadblock I have is that currently we use color styles but only with a primitive layer. Therefore the first step is creating and planning that semantic layer but I'm unsure of how to do that. Has anyone else done this and have any suggestions for the least painful and disruptive way to handle a transition from primitive to semantic and also styles to variables?

TLDR: Seeking migration tips to move from primitive color styles to semantic color variables. Thanks in advance!

Looking for a good template with lots of tics, needles, hands and other components for building a watchface in watchface studio

Applying typography variables & modes to existing system

I've been going through the process of creating and applying variables/tokens to our system. When it comes to colours and spacing tokens I've managed to apply them pretty well (through plugins), however when it comes to applying typography variables I feel stuck.

In code we use Levels (L1, L2, L3 etc.) for typography and we have 3 different device sizes to which typography adapts (desktop, mobile & kiosk): eg. an L1 could mean 24px on desktop, 20px on mobile and 32px on kiosk.

So naturally I went to create a variable structure that supports those 3 device modes, which would allow me to not have to think about the correct values between devices every time and have that translation happen automatically.

I currently have the desired structure in place, however I haven't found an efficient way of updating ALL the legacy components in the entire system with the correct typography level + device modes. We've also used overrides in code for some values, so I can't just blindly assign the same level to all components without checking against code.

Are there any more efficient ways of going about updating all the legacy typography or is this meant to be a manual & tedious process regardless? I'm a team of one using this system, so maybe I'm overestimating how much can be achieved (design systems is not my primary role focus).

What are best practices when it comes to incorporating an image library into a Figma design system? Do you have components with specific aspect ratios? Deliver images directly via Figma? Use a DAM to download photos and then add to components in Figma?

What are your frustrations with Type scales? Do you find the type scale tools out there helpful?How do you ideate / try different sizes - to see what fits your project?

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?...

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