{"id":15254,"date":"2024-01-18T16:04:35","date_gmt":"2024-01-18T15:04:35","guid":{"rendered":"https:\/\/immune.institute\/?p=15254"},"modified":"2024-12-18T12:11:39","modified_gmt":"2024-12-18T11:11:39","slug":"que-son-y-para-que-sirven-los-design-systems","status":"publish","type":"post","link":"https:\/\/immune.institute\/en\/blog\/que-son-y-para-que-sirven-los-design-systems\/","title":{"rendered":"What are Design Systems and what are they for?"},"content":{"rendered":"

The world of web design<\/strong> is constantly evolving, and to keep up, professionals are always looking for tools and methods that allow them to work in a more efficient and coherent way. In this context, the Design Systems<\/strong> have become a key part of optimising the design process and improving the look and feel of the user experience.<\/p>\n\n\n\n

The Design Systems <\/strong>are not simply a passing trend in the world of web design<\/strong><\/a>They are one of the most effective solutions to the most common problems faced by design teams.<\/p>\n\n\n\n

By adopting a systemic approach<\/strong>In this way, designers can save a great deal of time, avoid unnecessary repetition and ensure that each element contributes to creating a unique and unique consistent user experience<\/strong>. In addition, facilitate collaboration between designers and developers<\/strong>The first is that they all work on the basis of a shared set of rules and components.<\/p>\n\n\n\n

But do you really know What are Design Systems?<\/strong>? Here we explain what Design tokens are for, how they work and their application in the design of digital products. We will also take you through the steps to create your own Design System using tools such as Adobe XD and Figma.<\/p>\n\n\n\n

What are Design Systems?<\/h2>\n\n\n\n

The Design Systems<\/strong> or design systems are coherent sets of rules, principles and patterns that guide the design process of a digital product. They include not only visual elements,<\/strong> such as colours, fonts and icons, but also broader aspects such as information structure, interface architecture and user interactions.<\/p>\n\n\n\n

It could therefore be said that it is a guide to unified<\/strong> which ensures that all elements of the design remain aligned with the visual brand identity<\/strong> and comply with the usability standards.<\/strong><\/p>\n\n\n\n

How do Design tokens work?<\/h2>\n\n\n\n

The Design tokens<\/strong> play a key role, as they provide a common language between designers and developers within an Design system.<\/strong> By representing specific values such as colours, fonts and spacing, they facilitate the consistent application of different styles throughout the system.<\/p>\n\n\n\n

Its modular nature allows for a inherent design flexibility<\/strong>The design tokens can be combined and reused efficiently. This not only streamlines the design process, but also ensures that any updates to the design tokens are reflected uniformly across all instances, ensuring that the user experience maintains a certain cohesion.<\/p>\n\n\n\n

Thus, the tokens Design<\/strong> are the basis for the visual and functional consistency of a Design System, contributing to the efficiency and success of digital product development.<\/p>\n\n\n\n

What applications do they have in digital product design?<\/h2>\n\n\n\n

The Design Systems <\/strong>and the Design tokens<\/strong> can be applied in a wide variety of contexts within the design of high quality digital products. From creating consistent user interfaces to streamlining the development process.<\/p>\n\n\n\n

Brand consistency and user experience<\/h3>\n\n\n\n

One of the main benefits of the Design systems<\/strong> is the ability to maintain visual consistency across applications and platforms. This is especially important for large companies with many products, where brand consistency is essential for user perception.<\/p>\n\n\n\n

A Design System ensures that every interaction, from the home page to the most specific functions, reflects the visual brand identity<\/strong> cohesively. In this way, it strengthens the emotional connection with users<\/strong> and a more robust and memorable user experience.<\/strong><\/p>\n\n\n\n

Development efficiency<\/h3>\n\n\n\n

Design tokens play a key role in development efficiency by allowing developers to rapidly deploy consistent styles<\/strong> throughout the application. They reduce the need to write custom code for each visual element, significantly accelerating the development process.<\/strong><\/p>\n\n\n\n

In this way, not only saves time,<\/strong> but also ensures that design changes are reflected in a uniform manner <\/strong>across the platform, avoiding potential inconsistencies and improving the overall quality of the digital product.<\/p>\n\n\n\n

How to create effective Design tokens?<\/h2>\n\n\n\n

The Design token creation<\/strong> involves carefully identifying and defining the key elements of style that will be used throughout the project. For example, establishing colour palettes, defining text styles and determining standard spacing. Once these elements have been conceptualised, they are converted to Design tokens<\/strong> that can be applied consistently across all user interfaces.<\/p>\n\n\n\n

How to create a Design System in Adobe XD<\/h3>\n\n\n\n

Creating a Design System from scratch may seem like a complex task, but the truth is that, thanks to tools such as Adobe XD<\/strong><\/a>This process is much simpler and more efficient. Here are the steps to follow:<\/p>\n\n\n\n

    \n
  1. Define design principles:<\/strong> Before starting with the visual elements, establish the fundamental principles that will guide your design. For example, simplicity, consistency, accessibility, etc.<\/li>\n\n\n\n
  2. Create reusable components:<\/strong> identify elements that will be repeated in your design and turn them into reusable components. This includes buttons, cards and other common elements.<\/li>\n\n\n\n
  3. Organise your system:<\/strong> To organise your Design System efficiently, use shared libraries and styles in Adobe XD. This will facilitate collaboration and constant updating.<\/li>\n<\/ol>\n\n\n\n

    How to create a Design System in Figma<\/h3>\n\n\n\n

    This is another popular tool for digital product design. The creation of a token in Figma follows similar principles:<\/p>\n\n\n\n

      \n
    1. Identify key elements:<\/strong> As in Adobe XD, identify the key elements that will be part of your Design System. This may include colours, fonts and spacing.<\/li>\n\n\n\n
    2. Create shared styles:<\/strong> use shared styles to define your design tokens. This way, changes to one style will automatically be reflected in all related elements.<\/li>\n\n\n\n
    3. Documenting your Design System:<\/strong> Make sure to document your Design System in Figma so that the rules and components you set up can be easily accessed by the whole team.<\/li>\n<\/ol>\n\n\n\n

      Get trained in Design Systems through IMMUNE's UX\/UI Design Bootcamp.<\/h2>\n\n\n\n

      As we have seen throughout this article, Design Systems and Design tokens are fundamental tools for maintaining a certain coherence in the design of a brand. Thanks to this, designers can simplify the process of creating and managing Design Systems, <\/strong>ensuring a more efficient workflow and higher quality results.<\/p>\n\n\n\n

      A professional profile that is currently in high demand in the market. UX\/UI Design Bootcamp<\/strong><\/a> allows you to acquire the necessary knowledge to master applications such as Figma and Adobe XD. In addition, you will be able to delve into all the essential aspects of UX, from the design process to its implementation in web\/app development. Providing the necessary tools to stand out in the job market.<\/p>\n\n\n\n

      Find out more about our courses using the form below!<\/strong><\/p>\n\n\n\n