Let's build an amazing product, together

In this article, we compare all of the possible designer hiring options and propose an alternative.

At different junctures of their journey, tech companies and startups face an important decision: should they hire a freelancer, work with an agency, or onboard a designer full-time? Each choice carries its unique set of pros and cons, but is there an alternative that combines the benefits of all three while mitigating the downsides? In this article, we'll delve deep into these options and propose an unconventional yet compelling route: working with a long-term product design partner.

Freelancers are often seen as a cost-effective solution. Many companies opt for this route to maintain lean operations and keep their overheads low. Here's what you need to know about working with freelance designers:

: Hiring a freelancer is usually more economical compared to other options. You pay them only for the work they do, and you can avoid the financial burden of employee benefits and other fixed costs associated with full-time employees.

: Hiring freelancers can be risky. More often than not, it takes several trials and errors before you find the right designer that aligns with your vision and ethos.

: Freelancers are free agents and are likely to chase the best-paid gigs. There's a chance they might disappear mid-project, or decide to take a full-time job, leaving you in the lurch.

: As freelancers are usually hired for short-term projects, they may lack the long-term perspective and commitment that some projects demand.

Agencies bring a dedicated team to the table, boasting a depth and breadth of experience across different product types. However, their services come at a premium. Here's a breakdown:

: Agencies have dedicated project managers who ensure that your project runs smoothly and deadlines are met.

: With a portfolio of complex products, agencies bring a wealth of experience to the table that can prove beneficial for your project.

: Agencies can be a hefty investment. The costs are often high because you're paying not just for the designers' time, but also for project managers and the agency's overheads.

: Many agencies outsource their design work to junior or mid-level designers, which might affect the quality and integrity of your project.

Hiring a full-time designer can give you better control and consistency over your projects, but it's a significant commitment that comes with its own set of challenges.

: Having a full-time designer can ensure consistency and dedication to your project, leading to a deep understanding of your product and your brand.

: Onboarding a full-time designer can cost anywhere between $15,000 to $20,000. If the hire doesn't work out, the financial implications are even greater.

: Besides salary, full-time employees need benefits, vacation, sick days, mentoring, and growth opportunities, all of which add up significantly.

: Research shows that full-time employees, especially in the tech industry, tend to change jobs every 1.5 years on average, which can disrupt the flow of your projects.

: Unless your product is well-known or highly appealing, attracting talented senior designers can be challenging.


The Alternative - A Long-Term Design Partner

 - establishing a long-term relationship with a design partner. This route combines the flexibility of freelancers, the professionalism of agencies, and the commitment of full-time employees, all while avoiding their drawbacks.

: It's at least 50% cheaper than a full-time employee and 2-3x cheaper than an agency.

: You save $15,000 a year and avoid the headaches related to hiring, firing, rehiring, vacation, and time off.

: Design partners don't outsource to junior designers or charge for product managers. The work is done by senior designers with a vested interest in your success.

: Long-term design partners are focused on SaaS interface design, making them the best in the field.

: Long-term design partners can be picky with whom they work with since it's potentially a long-term relationship

If you have a project that's a few weeks of work, freelancers would be a better option.

The decision to hire a freelancer, an agency, or a full-time designer can make or break your product's success. However, as the business landscape evolves, new models like long-term design partnerships offer innovative ways to access quality design services. Ultimately, it's all about understanding your needs, evaluating your options, and choosing a path that aligns with your business objectives. The design landscape is no longer black and white but filled with shades of exciting alternatives. Explore them, and you might just find the perfect fit for your company.

Should I Hire a Freelance, Agency, or a Full-Time Product Designer?

In this blog post we share about Design Tokens and how we apply them for our clients to reduce development time and improve consistenty.

The world of design continues to evolve at a fast pace. New methodologies and tools are continuously being introduced, and it can be quite a task to keep up. However, one methodology that has gained a lot of traction in recent years (and for a good reason) is the concept of "Design Tokens".

Design tokens are essentially named entities that store visual design attributes. They are the smallest pieces of your design system, such as colors, typography, spacing, border width, radii, shadows, etc. Think of them as the atomic elements of your brand that can be reused across your digital products for consistency, scalability, and maintainability. They are used to ensure a consistent design language across different platforms and devices.

During our own process, we leverage the power of design tokens using the Figma Tokens plugin (Token Studio). This tool provides a visual interface for creating and managing design tokens directly within Figma. This not only makes the process easier for designers but also allows for a more unified and efficient workflow.

As with any new tool or methodology, it is crucial to assess your organization's readiness to integrate it into your workflow. Here are some prerequisites that you need to consider before diving into design tokens:

: the product has to be substantial enough to see a positive ROI from this investment. A simple blog or a single-page website might not benefit much from design tokens. However, large-scale digital products with numerous components and views can significantly benefit from them.

: Design tokens aren't something you just write down in some internal documentation and place in a repository. They're more than just a design principle; they are a workflow strategy. Implementing them will have to be a team effort, requiring collaboration and clear communication among various stakeholders, including designers, developers, and product managers.

: There have to be stakeholders within the company who understand the benefits of design tokens and can advocate for them. They should be able to work with the management to find the time and resources necessary to invest in this process. Remember, adopting design tokens is not a quick fix; it is a strategic shift that will pay off significantly in the long run.

Once you have assessed your readiness, it's time to bring your plan to the table. Discuss it with key stakeholders, including the main product manager, lead developers, and others who might be involved in this process. This is an important step as it helps ensure that everyone is on the same page and understands the reasons for this shift.

It's crucial to highlight the benefits of design tokens during these discussions. Explain how they will help maintain visual consistency, make the design-to-development process smoother, and save a lot of time in the long run.

Now that you have buy-in from the key stakeholders, it's time to get your hands dirty. However, instead of going all in, it's usually a good idea to start with a pilot design system.

: It's always a good idea to start small and then scale up. Instead of implementing design tokens for all the components at once, focus on some key reusable components. If these key components are big (they have many properties or variants), either choose simpler components or decide which variants to ignore for now.

: Make sure that the components in your design system file have all the visual specifications that a non-designer would need. These include the component's anatomy, properties, layout, spacing and token values. These are critical in ensuring that the implementation of the design system is as smooth as possible.

With your pilot design system in place, it's time to create your design tokens.

: Leveraging the power of the Figma Tokens plugin can make this process a lot easier. The Token Studio plugin provides a user-friendly interface for creating and managing design tokens, ensuring you can keep all your design tokens in one place.

Start with the essential ("core") design tokens

: At the very least, your design tokens should include color, typography, spacing, radius, border width, and shadows. These elements form the backbone of your design language and will be repeatedly used across different components.

Expand core tokens into simplified semantic tokens

. Semantic tokens allow us to add a variable token value (like {semantic.primary.foreground}) instead of a hardcoded hex value. And this unlocks the possibility of theming. For the 

 set, we only include Color and Typography tokens. All the rest of the semantic tokens live in the Semantic Granular set.

Go into depth with Semantic Granular tokens

. We have decided to create 4 levels of tokens for components: Core, Semantic Simplified, Semantic Granular and Component-level tokens. The reason for splitting semantic tokens into two groups was to have more control over typography and colors at differnet levels. While the Simplified set has 

 token, Semantic Granular set has a token for a group of components like actions (

{semantic.color.actions.primary.default.border}

. This allows us to change colors for specific groups of components, such as actions, feedback, inputs and ui.

Final step - create component-specific tokens

. This is where you use only semantic granular (and sometimes simplified) tokens to create detailed values of specific components. The best example would be a color token of a Button component with an example value of 

{button.color.primary.default.background}. 

It points to the semantic granular token 

{semantic.color.actions.primary.default.background}, 

: If you're new to design tokens, consider reading these articles to get a head start:

Creating & Crafting a Design Token System

After creating your design tokens, it's crucial to have your developers review them. They can provide invaluable insights into the practicality of your tokens, identify any potential errors, and suggest ways to simplify things.

Having your design system live in a central repository like Github rather than your Design File can make it easier for developers to access and implement the design tokens. Once the tokens have been reviewed, start coding these components and tokens in Storybook.

As your design system grows, it can become increasingly challenging to keep track of all the different components and tokens. This is where Zeroheight can come in handy. It allows you to store all your design system knowledge in one place, serving as the single source of truth for everyone involved.

With your design tokens in place and your pilot design system ready to go, it's crucial to understand that this is not the end. Your design system and design tokens are now your internal product and they need to be managed as such. This includes regular updates, versioning, and release notes to keep everyone updated with the changes.

The key to a successful design system is continuous improvement. Regularly review your design tokens and update them as needed. You should also ensure that you are frequently releasing new versions of your design system and documenting these releases meticulously.

Furthermore, keep the communication lines open with your stakeholders. Regularly update them about the progress, take their feedback, and iterate on your design tokens accordingly. We wrote a more detailed article on how we handoff our designs to development teams thanks to design tokens 

In conclusion, design tokens are not just a novel concept. They are a game-changer for digital product design. By incorporating them into your workflow, you are laying the groundwork for a scalable, consistent, and maintainable product design. At Outframe, we can't stress enough their potential to elevate your design process. Now that you have the roadmap, it's time for you to start your journey with design tokens.

How We Apply Design Tokens: a Guide

Since Design Systems can be a big investment, we talk about the pros and cons of them for startups and tech companies alike.

In the current digital landscape, the importance of product design can't be understated for growing SaaS companies. It's a key driver of user engagement, conversion, and satisfaction. As B2B startups strive to meet these objectives, pressing questions often emerge:


"Should we invest in a proper Design System?"

"Why is our existing Design System not useful for anyone apart from the designer?"


Design systems, while incredibly beneficial, are also a significant investment. Therefore, it's essential to weigh the pros and cons before making a decision.

Before we delve into the advantages and disadvantages of design systems, let's take a moment to define what they are. Simply put, a design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. 

These components could include buttons, forms, layouts, color schemes, typography, and more. Most importantly, design systems include detailed guidelines and documentation on how to use these components and patterns for developers to make sure the finished product looks as close to the design as possible.

Now that we understand what a design system is, let's consider the various benefits it can bring to a B2B startup.

The first and most noticeable advantage is consistency. With a design system in place, your products will have a cohesive look and feel, regardless of the platform or device they're accessed from. This consistency enhances the user experience and reinforces your brand identity across all touchpoints.

As your company grows, the number of products or features you offer will also increase. Managing the design aspects of these numerous entities can become a daunting task. However, with a design system, you can streamline this process, as the components and guidelines are already defined and readily available for use.

The versatility of design systems is another compelling advantage. They allow you to easily switch between different themes such as light, dark, or even themes specific to different products (ProductA/ProductB). This flexibility not only enhances user experience but also enables you to adapt quickly to evolving design trends or user preferences.

Having a vast library of components at your disposal accelerates the design and development process. Instead of building everything from scratch, you can use pre-built, tested components to build new products or features, saving time and resources.

Design systems provide a common language for designers, eliminating potential confusion or misinterpretation. They also ensure that every designer, regardless of their experience level, can produce consistent, high-quality work.

Design systems are not just for designers. They also play a crucial role in bridging the gap between design and development teams. With a well-documented design system, developers have a clear understanding of the design elements, leading to faster and more accurate implementation.

Despite the numerous benefits, implementing a design system is not without its challenges. Here are some potential drawbacks to consider:


1. Expensive - Takes a Long Time to Build It

Creating a comprehensive design system is a significant undertaking that requires considerable time and resources. It's not just about creating components; it also involves documenting guidelines, training the team, and integrating the system into your workflow. For a startup operating on a tight budget or timeline, this could be a daunting investment.

Design tokens are an integral part of a design system. They are the visual atoms of the design system — such as color, typography, spacing — defined by values. The management of these tokens can add another layer of complexity, particularly for companies that may not yet have established robust design workflows or resources. We wrote more about design tokens here.

The benefits of a design system become more apparent as the complexity and size of your product portfolio grow. For smaller startups with a limited range of products or features, the return on investment may not be immediately apparent. Therefore, it's crucial to consider your startup's current state and future growth projections when deciding to invest in a design system.

Like any system, a design system requires ongoing maintenance to remain effective. As your products evolve and new design trends emerge, you'll need to update your components and guidelines accordingly. This continuous maintenance can be a significant commitment and requires dedicated resources.


5. Needs Internal Promotion - The Fact That It’s Built Doesn’t Mean It Will Be Used

Creating a design system is only half the battle; the other half is ensuring its adoption. Just because it's built doesn't mean it will automatically be used. Therefore, promoting the design system internally, training your team on how to use it, and integrating it into your workflow is critical. This process can be time-consuming and 

Design systems can be a game-changer for B2B startups, enhancing design consistency, streamlining product management, and fostering better collaboration between design and development teams. However, they also come with significant costs and ongoing commitments.

Before deciding to implement a design system, consider your company's unique circumstances, including your product complexity, team size, resources, and future growth plans. Remember, a design system is not a one-size-fits-all solution, and its effectiveness largely depends on how well it aligns with your needs and capabilities.

Ultimately, implementing a design system is an investment in your business. It may seem like a daunting task now, but with careful planning and execution and a professional next to you, it will provide substantial returns in the long run. Whether or not to invest in a design system is a decision that should be made with a clear understanding of the potential benefits, costs, and challenges involved.

Pros and Cons of Design Systems for SaaS companies

We talk about the process, design system components, and the value our clients get from our custom design systems.

I've been building design systems for quite a few years now and carved a niche for myself that caters to the unique needs of B2B startups and growing organisations alike. However, I've noticed that our clients often have questions regarding our process, its components, and the value they derive from it.

In this detailed guide, I aim to provide a transparent overview of our approach. I'll shed light on:


The anatomy of our design systems and the components they encompass

The cohesive mechanism that enables these components to work seamless

The concept and relevance of design tokens in our systems

The seamless process we follow for handing over the design system to developers.


To further augment your understanding, check our in-depth 

 that chronicles our journey of developing a design system for our B2B client.

Before we delve into our methods, let's first clarify the concept of a design system. First of all, "Design System" is currently a hot keyword usually thrown around by everyone without fully understanding what it is. I've seen many companies say they have a design system, but almost always it's just a style guide and a library of a few components. A design system is a living document built for developers and product managers, not an old outdated repository that no one uses.


There are many different explanations of a design system, and most of them are correct. My thinking is this: a design system is a robust framework comprising a series of components reused across a digital product. It brings uniformity, boosts efficiency, and strengthens brand identity by providing a single source of truth to all stakeholders involved in product design and development. But Design Systems can be complex and very different for every project. If you're not sure your company needs one, check out this 

We view each design system as a unique entity that caters to the specific needs and goals of a business. That said, the following components often form the backbone of our design systems.

Design tokens are the DNA of a design system. They set the tone and define the core attributes that ensure consistency across the interface. They help us connect our designs with front end and force designers to design consistently. Our design tokens encompass:

: We define a palette that embodies your brand's identity, mood, and values.

: We establish rules for fonts, sizes, weights, line heights, and spacing to ensure readability and accessibility.

: We use shadows to emphasize depth and draw attention to interactive elements.

: We define a flexible grid system that governs the layout and arrangement of components.

: We set consistent spacing rules to ensure balance and rhythm in the design.

: We define corner radius values for elements like buttons, cards, inputs, etc., to control their roundness.

 such as sizing, min/max-width, border-width, etc.


During the creation of each component (atoms, molecules, organisms) we always have design tokens in mind and add them whenever applicable. To learn more about design tokens and why they're crucial to our design systems, we recommend reading the 

Atoms represent the most basic functional units of a user interface. They're the building blocks that, when combined, create more complex components. Our design system atoms typically encompass:

Buttons of various types: standard, group, mobile

Regular icons and miscellaneous ones (check, rating, social, country, payment, files)

Horizontal and vertical Tabs for managing multiple contents in the same space

Input fields and dropdowns for data entry

Badges, or labels, for providing metadata

Checkboxes and Toggles for binary choices

Dropdown menus and combo boxes for selecting from a list of options

Molecules are complex components made by grouping atoms together. They form functional sections of an interface and often involve user interaction. Our design system molecules typically include:

Pagination and dividers for data division and navigation

Toast or Snackbar notifications for user feedback

Image grids, video players, and carousels for rich media display

Organisms are complex UI sections formed by grouping together molecules and/or atoms. They form distinct parts of a page and work together as a part of the whole. Common organisms in our design systems include:


And many more reusable organisms based on popularity

We integrate the above atoms, molecules and organisms into tailored templates based on our customers' unique needs. These include, but are not limited to:


Any other specific page that gets reused frequently.

An effective design system is not merely a collection of components; it's their thoughtful assembly that abides by certain rules. All components of our design systems follow key tokens — grid, layout, padding, radiuses, shadows, typography, and colour — to ensure visual harmony and consistency across the product. This methodical approach streamlines the implementation process, making it less prone to discrepancies and errors.

We believe in transparent and exhaustive documentation. Each component in our design systems comes with a clear usage explanation, development specifications, and its different states clarified. We utilize Figma for documenting these details and use various Figma plugins to help make design system documentation more exhaustive.

Furthermore, we encourage and assist our clients in adopting Design System component documentation platforms like Storybook, Zeroheight, and others. This helps create an easily accessible and interactive library of all components, boosting team understanding and communication.

Our role isn't confined to just creating a robust design system; we also facilitate its seamless transition to the development team. Each component is meticulously annotated, and component tokens are exported as CSS and JS output files, aided by a style dictionary. This streamlining significantly reduces the time spent by developers on styles. Our detailed 

I believe (and have experienced) that a well-structured design system is instrumental in crafting a cohesive, consistent, and efficient digital product that's a must for growing tech companies. This example process I discussed has already provided immense value for companies by making interface design structured and much easier to understand for other departments. However, this process still requires quite an investment from designers, product managers and frontend engineers alike, so it's best to discuss with an expert to see what the potential return on investment will be.

This is a meta title

How We Build Custom Design Systems for Our Clients

We share our ideal design process that we try to follow for every client, though it works more as a guideline rather than a rule.

Design Systems — pros and cons for companies in various stages of their life, when to use them, and when to skip them.

Every time we have a chat with a potential client, a recurring question pops up - "What is your design process?" It's a valid question as it provides clarity on how we approach designing your product. While we attempt to follow our prescribed process, it is essential to remember that we don't view it as a rigid structure. Each project is unique, and our approach is tailor-made to suit its demands. So, if you're a client looking for a quick product design MVP, we can skip or abbreviate some steps. This blog post gives you a tour of our "ideal" design process, assuming you have sufficient time and budget to follow it step-by-step.

Our journey begins with a couple of onboarding surveys. We gather essential information about your company and product. These questionnaires help us understand your business better:


: Information about your company, product, access to platforms, any crucial deadlines, etc.

: Information about your competitors, likes, dislikes, expectations, etc.

: To comprehend your uniqueness and your ideal customer.

Next, we like to better understand how you wish to start the collaboration. It might be a simple exchange of a few emails or a few calls, depending on the complexity:

: Diving deep into the UX first and setting the visual design aside for later.

: Focusing on a particular area to deliver quick changes.

: Prioritizing the visual identity and branding, with UX taking a back seat for now.


For someone who hasn't decided, we also offer a free UX/UI audit of their app or a 2-day free trial.

Once we gather sufficient information, we hold a kickoff call. This call serves as a platform to ask questions, clarify doubts, explain our process, and decide the next steps. To maintain transparency, we believe in discussing our working methods and communication style.


Our tasks are always available for viewing on a Trello board. We share our work on Figma, using its comment feature for feedback. Additionally, we exchange Loom videos or conduct quick calls if we find ourselves stuck. We join our client's Slack or Teams workspaces and prefer to avoid calls unless absolutely necessary.

This is an optional step that we recommend to everyone unless there's a very tight deadline. The scope of user research varies on the type of company, the stage it's at and the type of product we're focused on designing or redesigning. Here's a rough outline:


We start with internal stakeholders to understand what is the reason the product needs to be built. (or redesigned)

If it's a redesign of an existing product, we thoroughly analyse existing usage analytics.

We then arrange calls with different types of existing (or potential) users and do specific types of UX research, be it typical user interviews, usability testing or other.

We then present these results and conclusions to our client and present them with a list of suggestions.

A critical part of our process involves creating moodboards. These allow us to experiment with different concepts, suggest potential options, and ensure that we're on the same page as the client.


: Contains various visual assets and materials that match our client's creative vision. This could include photos, illustrations, patterns, logo samples, typefaces, color palettes, print materials, etc.

: For web app products, we create a second moodboard to portray UI/UX aesthetics for different platforms (Web, iOS, Android).

Armed with insights from the onboarding surveys and moodboards, we craft a unique visual identity. We develop one main and one or two secondary visual identities. These identities include patterns, illustrations, textures, a colour palette, typography, a general style, and potentially, branding or a logo.

Here, we delve into what usually brings the highest ROI for our clients - UX Design. We conduct user research, collate user feedback, and analyze tools and stakeholder feedback. If necessary, we may perform a UX audit of an existing app or work on User Personas. However, in many cases, we find it more effective to design and obtain customer feedback directly. This phase culminates in the creation of wireframes and high-fidelity designs.

With the visual identity in place and plenty of data at our disposal, we move on to set up a scalable design system. The system includes actual typography, button, and other component styles. We have written more about this in our other article 

This is where the magic happens! We take all the information gathered, utilize our newly built design system, and bring the end product to life with consistent and themeable designs.

We work with design tokens, which means we provide our clients with well-documented component annotations. We aid our clients with frontend work, exporting these tokens into CSS and JS files using Style Dictionary for easier implementation on Storybook. For larger clients, we can set up this documentation on Zeroheight or other design system documentation platforms. More about this in our article 

Once everything is set up, we're ready to roll. This is where we churn out designs and ensure your product keeps evolving. Our partnerships often span at least six months to a few years, making this a continuous process.

Our product design process is not just a roadmap we follow; it's a philosophy that encapsulates our values of transparency, flexibility, and collaboration. While we do have a structured approach, we never lose sight of the fact that each client and product is unique. It's a balance of following a process, yet being ready to adapt as we go along, always in tune with our clients' needs.

Remember, what we've outlined here is our 'ideal' process. In reality, it often changes based on project demands. However, regardless of the path we take, our ultimate goal remains the same – to deliver exceptional product designs that exceed client expectations and make a difference to their users.

Our B2B Product Design Process: Unraveling the Steps for Success

In this article, we share our thoughts about Design Tokens and why they key to product design in 2023

In the realm of product design, especially for Software as a Service (SaaS), it's imperative to keep consistency and ease of use at the forefront. While working on complex B2B products, I have made these qualities paramount in our work for the clients. One framework that has proven invaluable in achieving this balance is the use of design tokens. Through the amazing Figma Tokens plugin, we've helped countless clients streamline their design systems and amplify their products' visual appeal.

Design tokens can be thought of as the atomic elements of a design system. They are small, individual pieces of design information used to define and communicate the style properties of a design system. They encapsulate visual design attributes such as colour, typography, spacing, shadows, and others. These tokens can then be utilized across all components of a product's design, ensuring consistency, and simplifying updates and changes.

) plugin pretty much every day to manage design tokens. This tool enables us to define a set of tokens within Figma that can be applied to various design components. It allows for seamless, centralized control of design attributes and makes us, designers, feel closer to the front-end world by forcing us to be consistent and design logically. We wrote more about how we apply 

Many of our clients used to tell us at the beginning of our relationship that they already had a Design System. Upon closer inspection, it would always be clear that it's not a real design system, but rather a style guide or a component library that has only been used by their previous designer.


Before starting with design tokens, you should first have a detailed design system with explicit documentation, consisting of various levels of components and style guides, starting with colors and typography, and ending with reusable organisms such as tables, calendars, sidepanels, etc. 

Read our guide on creating design systems.

If you already have a Design System with Atoms, Molecules and Organisms, we can start looking into applying Design Tokens on top.

SaaS products, by their nature, tend to have extensive design systems due to their inherent complexity and the broad range of functionalities they offer. Managing such comprehensive systems can become challenging, especially when changes need to be implemented across multiple components or when scaling the product.

This is where design tokens come in. For every Design System, we establish a system where a single change updates the corresponding attribute across all components. It facilitates a smooth and efficient way to maintain an extensive design system, reducing manual labour and minimizing errors.

Theming is a crucial aspect of SaaS product design. Today's users expect the ability to switch between light and dark themes, or even customize themes to their liking. Using design tokens, theming becomes a straightforward process. It's also possible to do theming with Figma's native variables, but Variables are still at the early stage and have quite a few limitations, hence we only recommend using them for smaller projects like web design, but not design systems.

We can define separate groups of design tokens for different themes, each containing specific values for colours, typography, and other style attributes. Switching between themes becomes as simple as pressing a few buttons and waiting for everything to load. Furthermore, creating a new theme is as easy as defining a new set of tokens, which dramatically simplifies the process compared to traditional theming methods.

Without design tokens, changing a design attribute like colour or font could require individually updating every component that uses this attribute. What if you want to change the background of a dropdown list item component? Figma almost always fails to update it, especially in bigger design systems.

With Design Tokens, updating components is as simple as modifying one value in one central place. The change automatically propagates to all components using that token, ensuring the update is implemented consistently across the entire design. This functionality significantly reduces the time and effort needed for design updates, which translates into quicker product iterations and lower costs for our clients.

Maintaining consistency is paramount in product design. Inconsistencies can negatively impact the user experience, making the product appear unprofessional and confusing to users. Design Tokens help bridge the gap between designers and front-end developers. Tokens map perfectly to variables in CSS or other styling languages, which makes the design-to-development handoff smoother. By using Figma Tokens, designers think in terms of the same style variables that developers use, making the entire process more collaborative and efficient. We wrote an article on how design tokens help designers handover designs more easily 

Maintaining a consistent look and feel across all products can be challenging when your organisation has multiple offerings. Design tokens are the perfect solution to this issue.

By defining a set of tokens for the entire organization, you can ensure that the same design attributes are applied across all products. This provides a consistent user experience and strengthens your brand identity. Moreover, when it's time to update your design, changes can be implemented across all products simultaneously by updating the design tokens.

To sum it up, design tokens have revolutionized the way product designers approach SaaS design and design scaling. They provide an efficient and reliable way to manage extensive design systems, allow for easy theming, simplify design updates, enforce consistency, and ensure a smoother collaboration between design and development. If you're looking to streamline your SaaS product's design process and enhance its user experience, design tokens, specifically Figma Tokens, might just be the game-changer you need.

5 Key Benefits of Design Tokens for SaaS Product Design

We delve into the nitty-gritty of our handoff process and the tools we employ to make everyone's lives easier.

Creating captivating and user-friendly interface designs is one thing, but handing those designs over in a way that is comprehensive, easy to understand, and actionable for developers is another. We go the extra mile to ensure that the handoff process of our B2B SaaS product designs and design systems is as smooth as possible. Our methods and tools are tailored to help engineers grasp our designs and code them with ease, saving time and reducing potential bottlenecks. In this article, we delve into the nitty-gritty of our handoff process and the tools we employ to achieve our goals.

Let's start by talking about design systems. A design system is more than a style guide or a pattern library. It is a comprehensive, evolving document that contains the standards for design and front-end code. It includes everything from style guides, pattern libraries, component libraries, coding standards, design principles, and documentation. It is the single source of truth that groups all the elements that will allow teams to design, realize, and develop a product.

One of the core principles of our design work is consistency. It's something we strive for in every project we undertake. To achieve this, we employ design systems. Once we have collaborated with a client and confirmed the visual identity of a new product, we implement this style on the components. We then build a design system based on these stylings.

Our design systems are not just a collection of patterns and styles. They are meticulously organized and documented to facilitate easy usage and provide a clear roadmap for developers during the implementation phase. This practice helps maintain a consistent user experience across different parts of a product and reduces the design debt in the long run.

For a more in-depth understanding of what our design systems consist of, how we present them, and why they're valuable, we invite you to read our internal article on the topic.

In our quest for seamless design-to-code transition, design tokens play a pivotal role. These are the basic atoms of a design system, representing the values for a design attribute in a semantic and platform-agnostic way. They can include anything from colors, typography, spacing, to animation timings, and more.

We use design tokens as a bridge between the designers and developers. They help us manage our clients' design systems more effectively and ensure that we do not stray too far from the frontend while designing. Moreover, design tokens allow us to set constraints for interface design, which are crucial for maintaining consistency and facilitating easier implementation.

For a more comprehensive explanation on how we use design tokens, read our 

internal article discussing design tokens

Instead of manually translating each design attribute from Figma to code, developers can automate this process with design tokens. This reduces errors and saves significant time, especially in large-scale or complex projects. In essence, design tokens allow developers to focus more on building functionality and less on manual, error-prone tasks of translating designs into code.

Design tokens often exist at multiple levels to support different degrees of abstraction and use:

Blog