Week of November 17,2023
Introduction: B2C Light and Dark Theme
We have released a new version of our design tokens with the B2C Light and Dark themes tokens and they are ready to be used in products.
Updating layout components: Container, Stack & Grid
We have renamed our PositionContainer just to Container in order to simplify the semantics. This component implements a new API to easily add responsive behaviour to any layout component in the design system. Our Stack & Grid component are now connected to the new tokens.
Week of October 27, 2023
🌊 Wave 3 components have been unleashed and are primed for integration into your projects! 🚀
We just enabled some new components in Figma Core library: tabs, segmented control and badge.
Important info:
- As with previous waves, we suggest to first create a Brach in your file, where you accept the updates and swap components (see instruction video here)
- Swapping Instructions are as always in Miro and in the deprecated component properties panel description.
- We are behind with the documentation due to the decreased amount of designers in the team and holidays. For now I included most important info in the new components’ properties panel description. If you have any questions - please ask here and I will add info there as well.
- We are aware that there is some confusion in using tabs, segmented control, selection cards, selects at the moment. We realise we are missing proper docs. We are planning to clean it up and provide a decision tree guiding you in selecting the correct one, hopefully still in Q4. Until then when in doubt please ask us here.
- all components deprecated in Wave 2 have been deleted from the libraries and therefore we also deleted the green highlight for the new components as now they are the only ones available.
Figma Styles Naming Upgrade 📢
We've just given our themes and color groups in Figma a name makeover!
The goal? Making sure their names fit perfectly in the color dropdown. While some groups still have lengthy names that sadly get snipped :disappointed:, we've scoured for quick fixes without losing their essence. No worries, though! We're planning to revamp the token structure next year to optimize this, and your feedback is paramount!
💡 Pro Tip: In the list view, simply click the "edit style" icon to unveil the full name + description. For the tiles view, hover over the color to reveal the description. 🌈🖌️
Week of September 14, 2023
🎉🌟 Exciting News: Introducing the brand-new Toggle Button! 🎉🌟
This fantastic addition, co-designed by the talented @zuzana.hrusovska, allows seamless toggling between tertiary and success (new) variants.
But wait, there's more! We've also incorporated a loading state into the button component, which was long-awaited and is now fully implemented. 🚀🔥
🌟✨ Big News: Updated Tabs Component! ✨🌟
Get ready for a game-changing update to our Tabs component! 🚀 We've embraced the new guidelines, waving goodbye to some outdated props, and ushering in a host of fresh functionalities. Not to mention, a stunning style makeover that syncs perfectly with the latest tokens. 🎨🔥
But that's not all – we're taking it a step further by giving the component a sleek new name: Tabs! 📌 Say hello to the future of tabbed navigation. 🌐💫
Mobile Updates 👀
Updated Badge component
We’ve updated the Badge component for the mobile design system. New design is coupled with updated design tokens.
Updated Tab component
We’ve updated the Tab component for the mobile design system. New design is coupled with updated design tokens.
Week of September 01, 2023
Exciting Updates for Our Design System Storybook!
We are thrilled to share some fantastic updates to our Design System's Storybook that will make your design and development workflow even more delightful and efficient:
- Brand New Theme: First things first, Storybook has received a fresh makeover with a sleek, modern theme. It's now even more visually appealing, setting the stage for a more enjoyable design exploration journey.
- Upgrade to Storybook 7: We've leveled up! Our Storybook has been upgraded from version 6 to the latest and greatest Storybook 7. This means you can expect improved performance, enhanced stability, and access to the latest features.
- Introducing Dark Mode: We understand that designers and developers often work late into the night, so we've added a dark mode to Storybook. Now, you can toggle between light and dark themes to suit your preference and reduce eye strain during those late-night coding sessions.
- Enhanced Component Organization: To streamline your experience, we've restructured the groups for our components. This ensures a more intuitive navigation and a smoother user experience when browsing and selecting the components you need.
- Individual Story Restructuring: We've begun the process of restructuring each individual story. This revamp will make it easier for you to grasp the essence of each component by offering a more organized and user-friendly layout.
- Comprehensive Component Variations: We've added a fantastic feature – an overview section for each story. Here, you can explore and compare all the variations of a component at a glance, helping you make informed design choices efficiently.
- Interactive Playground: Dive into the creative process with our new playground feature! Each story now includes an interactive playground where you can play with different settings and options of the component in real-time. Experiment and fine-tune to your heart's content.
- Say Goodbye to Knobs: We've evolved our component customization process. Instead of knobs, we now use controls to showcase the various settings and options of each component. This update ensures a more intuitive and user-friendly interface for customization.
We hope these updates to our Design System's Storybook elevate your design and development experience. We're committed to continuously enhancing our tools to empower your creativity and productivity. Stay tuned for more exciting features in the future! Happy designing and coding!
Big Kudos to our Enigeers making this possible 😍
Week of August 25, 2023
🎉 Exciting News: Wave 2 Components Are Here! 🎉
And now, the moment has arrived: you're all set to dive into the realm of components from Wave 2 Figma library updates! 🚀 Let's embark on this journey with gusto!
Key Details to Keep in Mind:
🌟 Just like Wave 1, we suggest creating a Branch in your file before accepting updates and swapping components.
🚀 If your file features new tables, remember that accepting all changes at once might disrupt them. To ensure a seamless transition, manually update each "Table" component, one by one, from the oldest to the most recent. Here's a detailed guide (with video!) to assist you.
📚 Every deprecated component comes with clear step-by-step migration instructions in Figma (visible in the right properties panel) and in our Miro board. You can't miss them—they've been given a pink/red hue both in design and the assets panel. The shiny new components, on the other hand, appear in a vibrant green in the assets panel.
🎬 Be sure to watch our New Inputs Components video, divided into part 1 and part 2. We've undertaken significant restructuring, including the introduction of the new number input and highlighting differences in the Stepper component. Dive into details about read-only and disabled inputs, prop handling, deciphering pink coloring, and more.
🔄 Note that table filters will reset due to the chip swaps. Just update the text within them (this change won't be flagged as deprecated in layer names).
🐞 If you stumble upon any bugs, anomalies, missing variants, or other issues, don't wait! Report them right away in this channel so I can jump in to fix things pronto.
A Heartfelt Thanks for Your Unwavering Support! 🙌🏼
If you have feedback regarding the migration process or these novel components, let's connect and discuss ways to enhance the quality.
🌊 Deep Dive : Components We're Talking About 🌊
Inputs
- Text Input (character counter pending in code)
- Search Input
- Text Area
- Chip Text Input
- Password Input
- Signature Input
- Stepper
- Calendar picker (calendar dropdown migration pending)
- Time picker (time selection dropdown migration pending)
- Select (single, multi, multi-compact) (dropdown migration pending)
- Compound Text Input
- Compound Select Input
- Compound Date & Time Picker
- new Number input (code update in progress)
Other Components:
- Tooltip (documentation incoming)
- Tag
- Chip
- Divider (documentation incoming)
- Link
- Typography components deprecation
Week of August 18, 2023
🌟 Goodbye Wave I Components : Component Evolution 🌟
It's time to bid a fond farewell to some familiar faces as we usher them into the Figma graveyard. 💀 These old components, set for deprecation in Wave I, will gracefully exit our libraries, making room for an array of fresh, innovative additions. Say goodbye to the confusion of choosing the right component!
🎉 So, What's in Store for You? 🎉
Once you embrace the forthcoming Figma updates, your component instances will gracefully detach from their main counterparts. Don't fret! A handy "restore main component button" will reside in the side panel, offering seamless navigation. And for those who haven't migrated files yet – no sweat! Transition to the new components at your convenience. Even better, we're keeping the "deprecated" label intact in their names, simplifying discovery through a quick Command+F search.
🧹 Our Cleanup Approach: Two-Step Tango 🧹
1️⃣ Step One: An upcoming Figma update will sweep away the pink/red overlays from the deprecated components. This precaution ensures that archived files stay clear of accidental rouge takeover.
2️⃣ Step Two: Another Figma update will perform the grand cleanup by bidding adieu to the components. In sync, we'll wave goodbye to the green overlay on the fresh components. These newcomers take center stage, exclusively gracing the library from here on out.
🔒 Smooth Sailing Ahead 🔒
Anticipate no turbulence or visual shake-ups in your files. We're confident that this transition will be seamless. But, as always, if you encounter any glitches post-embracing the Figma Library updates, don't hesitate! Reach out ASAP, and we'll dive right in to swiftly troubleshoot and set things right. 🛠️
Week of August 11,2023
Get ready to dive into a world of enhanced design possibilities with our latest update! 🎉 We've just dropped a fresh batch of updates in the Pattern section that you won't want to miss – forms, filtering, and dialogs are now equipped with detailed documentation to elevate your design game! 💥
New Text styles
But that's not all! 🌟 In our relentless pursuit of design excellence, we've bid adieu to our old typography component in Figma. Say hello to the future as we introduce the all-new typography tokens and text styles that are set to revolutionize your design process! 🎨✨
We know that change can be a whirlwind, but fret not! We've got you covered with a comprehensive and user-friendly guide that unravels the mysteries of our dazzling new styles. Get ready to wield the power of hierarchy like never before, creating designs that truly captivate and engage. 📚🔍
New Chip Component
Say goodbye to the old and hello to the extraordinary – we're thrilled to announce a dazzling transformation in our design arsenal! 🚀 Our renowned Removable Tag has undergone a remarkable evolution, emerging as the sleek and versatile Chip component you've been waiting for! 💫
What's the scoop? 📰 Our design wizards have conjured a brand-new look that'll leave you in awe. But it's not just about appearances – the Chip component now seamlessly integrates with our cutting-edge design tokens, ensuring a harmonious and consistent visual language across your creations. 🎨✨
And that's not all! 🌟 We've taken your feedback to heart and fine-tuned the user experience, guaranteeing a smoother journey from concept to execution. Our revamped story behind the Chip component is bound to inspire and empower your designs like never before. 📚🔥
Week Of July 31, 2023
We are thrilled to announce the long-awaited release of the new Mews Design System documentation! This comprehensive resource is a significant milestone in our journey towards achieving a better alignment with our new design vision.
With this documentation, our team has put in extensive effort to create a unified and intuitive guide for all aspects of the design system. It covers everything from design principles and component usage to brand guidelines and accessibility best practices. We believe that this documentation will not only streamline our design process but also empower all teams to create more consistent and delightful user experiences across our products.
But we're not done yet! We understand the value of feedback in driving continuous improvement. As we embark on this new chapter, we eagerly welcome feedback from our colleagues, stakeholders, and users. Your insights and suggestions will play a crucial role in refining the design system and making it even more powerful and user-centric.
So, let's come together and celebrate this achievement while remaining open to feedback and iterating towards excellence. Together, we can shape a design system that elevates our products and creates a lasting impact on our users. Thank you all for your dedication and support throughout this process! 🚀📚🎉
Week Of July 24, 2023
Enhanced Radio and Checkbox Components
We are excited to announce significant updates to our Radio and Checkbox components, offering improved functionality and design. Here are the key enhancements:
- Interactive Storybook Stories: Both components now feature updated Storybook stories that utilize controls instead of knobs, providing a more interactive and user-friendly way to explore their functionalities.
- Localized State and Variant Tokens: We have introduced a more localized approach to retrieve state and variant tokens, enhancing the components' flexibility and ease of customization.
- New Token System: The old tokens have been replaced with our new token system, enabling the components to seamlessly adapt to both dark and light modes, ensuring a consistent user experience across themes.
- Redesigned Look: The components boast a refreshed appearance, featuring a thicker border, a new error state color, added focus-visible state, and other subtle tweaks to enhance visual appeal and usability.
In summary, these updates have transformed the Radio and Checkbox components, making them even more powerful, versatile, and aesthetically pleasing. Explore the new functionalities and designs using the updated Storybook stories. We hope you enjoy these improved components! 🚀✨
Introducing the New Generic Typography Component
We are excited to introduce our latest addition, the Generic Typography component, to complement our existing typography components. This new component empowers you to utilize typography presets seamlessly. Aligned perfectly with our design vision processes, the Generic Typography component is designed to simplify your workflow and enhance your overall experience.
With this new approach, you can effortlessly access and apply typography presets, streamlining the design process and ensuring consistency throughout your projects. The Generic Typography component is here to provide you with an easier and more efficient way to work with typography in line with our design vision.
Week Of July 10, 2023
Checkbox
One significant aspect of our ongoing efforts involves updating the component in line with the new design vision and token standards. As design trends evolve and user expectations change, we recognize the importance of staying up-to-date and adapting our component accordingly.
Radio Button
By aligning with the latest design vision, we can ensure a consistent and seamless user experience across all our products and services. This not only enhances the visual appeal but also fosters user engagement and satisfaction.
Additionally, adhering to token standards streamlines our development process and promotes reusability. Utilizing standardized design tokens enables us to maintain a uniform design language throughout our ecosystem, making it easier to scale and maintain our projects efficiently.
Toggle
Introducing Toggle Component Technical Documentation in Our Design System
We are thrilled to announce the addition of comprehensive technical documentation for our new Toggle component in the design system. The Toggle component provides a simple yet powerful way to implement on/off switches or checkboxes in our user interfaces.
Table
As we continue to expand and enhance our design system, one of the key areas of focus is providing comprehensive documentation for our complex data table component. Data tables play a crucial role in displaying and organizing information, especially in data-rich applications.
The complexity of this component demands clarity and understanding for developers, designers, and stakeholders. Through detailed documentation, we aim to empower our team with the knowledge needed to utilize the data table effectively and consistently across projects.
Week Of July 03, 2023
Side panel component added
Exciting News! We're delighted to unveil our latest addition: the Side Panel component. This versatile component is now available for use as a universal pattern throughout the entire commander interface. With this release, we're taking yet another significant stride towards realizing our design vision for the product. 🎉
Week of June 26,2023
Button
Great news! Today, we successfully merged the Button PR update, bringing a refreshing change to the appearance of buttons across all our web products. The introduction of these new buttons allows us to guide users more effectively by emphasizing primary actions, enhancing the overall user experience.
Moreover, with a mindful reduction in visual complexity, we've managed to decrease the cognitive load on users, making it easier and quicker for them to read and navigate through our interfaces.
One significant benefit of this update is the elimination of confusion related to the old secondary button. Its graphic style, resembling a disabled button, has been replaced with a new variant that ensures a clear distinction between the secondary and ghost buttons. This addition offers greater flexibility when it comes to composing and designing the user experience.
We believe that these button enhancements will elevate the usability and visual appeal of our products, resulting in a more engaging and intuitive experience for our users. We're excited to witness the positive impact of these changes on our web platforms! 🚀🎉
AppBar
We are thrilled to announce that our AppBar component has undergone a complete redesign and recoding process to align seamlessly with our new design vision. The updated version is now live and fully functional, awaiting your exploration and implementation.
With this redesign, we aimed to enhance the visual aesthetics, usability, and overall user experience. The AppBar component is now better equipped to complement the modern look and feel of our applications while offering improved functionality.
We invite you to take advantage of the newly revamped AppBar and integrate it into your projects. It's now more powerful and visually appealing than ever before, elevating the navigation and interaction capabilities of our applications.
Try out the enhanced AppBar component today and witness the positive impact it brings to our design ecosystem! 🎉🚀
Typography
Exciting news! Our font has received a noteworthy update, now featuring a slashed zero. This improvement significantly enhances readability by making it easier to differentiate numerals from the letter 'O.'
The addition of the slashed zero is a small yet impactful step towards realizing our design vision for our products. With this enhancement, we're striving to create a more seamless and user-friendly experience, ensuring that our users can effortlessly comprehend numerical data without any confusion.
We're committed to continuously refining and perfecting our design elements to deliver the best possible user experience. This font update is just one of the many ways we're working towards achieving our design goals. Stay tuned for more exciting updates as we continue to elevate our products with thoughtful design improvements! 🚀🔠
MenuList component
We are thrilled to unveil our latest addition, the MenuList component, which is now available for use as the primary navigation in our applications. This versatile component is designed to deliver a seamless user experience and will eventually extend its functionality to power our dropdown menus as well.
The MenuList component offers an intuitive and efficient way for users to navigate through our applications. Its flexibility and adaptability make it a valuable asset in enhancing the overall usability and accessibility of our interfaces.
By incorporating the MenuList component as the main navigation, we aim to provide a consistent and user-friendly experience across all our applications. As we continue to develop and refine this component, we look forward to further enriching our user interface with its capabilities.
Migration wave I: Components
n the initial phase of migration, we are consolidating into one core library to enhance the Figma experience for our users. As part of this process, we have successfully merged the following updated components:
- Button
- Table
- Toggle
- Pagination
- Checkbox
- Radio Button
- Dialogs : Floating panel , side panel, pop over, modal
- Top Navigation
- Side navigation
By centralizing our components in a single core library, we aim to streamline our design process, improve collaboration, and ensure a consistent user experience across all our projects. This transition marks an exciting step forward, and we are eager to witness the positive impact it will have on our design workflow and, ultimately, on the satisfaction of our users.
Migration wave I: Old styles to new MDS token
We have completed the removal and detachment of all outdated Optimus styles, including color and typography. As part of this update, the core library now incorporates 80% of the new tokens, which will be reflected in our files once we accept the library updates.
Moving forward, we strongly recommend adopting the new styles, which are now enabled by default in our files. It's essential to note that there is no direct 1-1 matching with the old styles. However, to facilitate a smooth transition, we have created a template and mapping to guide everyone through the adoption of the new styles.
In the code, engineers can readily access the new typography tokens, making it easier than ever to integrate them into their work. We believe that embracing these modern styles will not only improve consistency but also enhance the overall user experience across our projects. Let's make this transition together and create remarkable designs! 🎨✨
For more Information, updates, and support, contact us in Slack: #optimus-to-mds-support
Table template and plug-in
Exciting Update! Our design team can now work more efficiently with the introduction of a brand-new table template tailored for our new table component. This template is specifically crafted to streamline the design process, saving valuable time and effort.
To complement the table template, we've also launched an instructive video that demonstrates how to effectively utilize the template alongside a helpful plug-in to expedite workflows. This video is a comprehensive guide that walks designers through the seamless integration of the template, empowering them to create exceptional designs with ease.
With these new resources, our designers can now unleash their creativity and productivity, enabling them to deliver outstanding table designs in no time. Let's take our design projects to new heights! 🚀🎨
Education: Working with Slots
We are thrilled to announce the release of our new educational video focused on working with Slots in our design system. This video provides a comprehensive guide on understanding and leveraging Slots, a powerful feature that allows for dynamic content insertion within our components.