fabiochiu/medium-articles huggingface dataset:
Equis: la experiencia de abrazar al sistema
By: Equipo De Ux De Naranjax
Tags: Product Design, Design Process, Design Thinking, UX Design, Design Systems

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
Material-X version 5. Live updated team library for Figma available by subscription
By: Roman Kamushken
Tags: UI, UI Design, Figma, Material Design, Design Systems

What is Material—X?

990+ components and 25 app templates in the design system beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit. Easy to change fonts and swap colors.

Available as Figma team library — You’ll get an invitation to a published Material–X project in Figma within 24h after the subscription. Stay up-to-date with access to a team project where we ship in real-time. Your subscription includes updates and unlocks the Duplication. And you can always spectate live how we produce new templates 😎

What’s new in v5?

Settings components in a variation: With button, With the slider, Switch, Dropdown, Button etc.

Settings components

Each app requires space to get set up, configured, or the user’s preferences might be changed. We added Settings components as used in templates and stored them on the UI kit page.

After the components were tested and organized we’ve made some detailed visual samples on how to build the Settings section in your app:

Settings templates

Desktop, Tablet and Mobile versions provided for every category of templates.
Hey Gabriella, thank you very much.
By: Sebastian Müller
Tags: Sketch, Figma, UX, Line Height, Design Systems

Hey Gabriella, thank you very much. Actually I never used the concept of line height cropping but now you say it I realize it could be a chance for solving some issues I experienced in the past. So these are the pros and cons coming to my mind immediately:

Pro 1: Top aligning text to elements in the same line. E.g. an image left and a text right beside it. With cropping the line height it’s perfectly top aligned. Without, there would be some padding according to the line height. You would have to give the textfield some negative margin-top in the code.

Pro 2: Very precise minimal spacings. With cropping you can position a text field exactly 1 or 2 pixel next above or below an (e.g. image) element. Without it’s sometimes only guessing or the textfield (including its line height) even overlaps the image element. So if the line height is pretty large small spacings are not even doable without using negative margin values in the code.

Pro 3: With cropping the line height you don’t have to deal with invisible padding anymore. So no matter how large the line height is, the vertical distance to elements above or below stays the same.

Con: Sketch or Figma cannot crop the line height. So cropping the line height in the code would lead to permanent work arounds and guessing in the design process.

What do think about this thoughts?

I will definitely think more about this interesting concept and check out how this would be nicely applicable in the design tools. Thanks for this tip 🙏
Компонент из фрейма с иконкой
By: Андрей Насонов
Tags: Дизайн Системы, Дизайн, UX, Иконки, Design Systems

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
Porque mesmo sendo iniciante em UX é importante estudar sobre Design System?
By: Suellen Leão
Tags: UX, Design Systems

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
Product optimisation at BT and a design system to help us scale
By: Dave House
Tags: Design, Design Systems

We’ve formed a new team in BT Consumer Digital to create a single design system for our three consumer-facing brands — BT, EE and Plusnet. We hope to create something that truly brings the many different disciplines within a product squad together and increases the focus on their unique goals by solving common patterns and problems once.

Working on a multi-brand design system team forces you to make important distinctions between what makes a meaningful, robust system and what's needed to retain the essence and style of each unique brand.

We’ll be blogging more about the design system as it grows. But over the last few months, I have found it useful to explore the boundaries of what a design system team should and should not be responsible for, especially in a large organisation.

Big thinking about the role of design systems

This led me to think about design systems through the lens of industrial design, the manufacturing industry and more specifically the design of mid-century air-cooled Volkswagens. I’ve put some of those thoughts in a blog post.

Does your design team use a design system? Let us know how it’s helping you scale your work — or otherwise! — in the comments below.

Photo by Austrian National Library on Unsplash
Adobe XD e Visual Studio Code: creare un design system ready-to-code! — Vol 1
By: Anna Grazia Longobardi
Tags: Design, Adobe Xd, Development, Visual Studio Code, Design Systems

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more
Introducing NewsKit: A themeable design system for unique media brands
By: Ellis Capon
Tags: React, Design, Figma, Publishing, Design Systems

Why a design system?

News UK is one of the largest publishing companies in the UK. We own big news brands and publishers; The Times, The Sunday Times, The Sun, and Times Literary Supplement and we’re increasingly investing in broadcasting, since the acquisition of Wireless Group in 2016 (Times Radio, talkSPORT, talkRADIO and Virgin Radio). In recent years the shift towards the digital media space has become even more rapid and traditional newspaper sales have fallen amidst the general move towards ‘online everything’.

Card component anatomy

As one might imagine, these huge publishing operations are underpinned by a number of technology teams. Each publisher requires a number of performant, stable and customer friendly websites, built using a collection of interface components. When The Times decide they want to build an index page, that page will be constructed using a variety of article cards (see a card example on the left). The same need exists for The Sun, or indeed, any other of the many News UK publications. In the current world, multiple product teams will spend resources on building an article card component in their own unique way, to satisfy the needs of their business stakeholders. These components have traditionally looked and behaved a little differently but, in essence, are variations of a common, base component.

Auditing the sites and seeing how much was shared led to a simple question — “why don’t we build one, agnostic, themeable, high-quality component that will satisfy all of the requirements?”. And so the NewsKit Design System was born.

NewsKit

NewsKit, roughly 18-months old, is now maturing into a robust design system, adopting some of the latest technology to enable News UK brands to build better products, faster. We currently have around 29 high quality React components available to consumers with many more to come.

Our design system is much more than a component library. NewsKit is a family of toolkits that supports the whole process of building beautiful, scalable digital products. Like many others, we’ve recently migrated all of our design teams to Figma. This provides us with a collaborative space to help design and grow News UK’s offering, enabling us to keep our components in sync across multiple projects and simplifying the customisation of themes and components.

Using design tokens, our theming system allows designers to take an agnostic NewsKit component, apply a theme created in Figma, hand it off to an engineer and, in doing so, provide a fully publication-themed component ready to be used to build a product!

With our theming system and the Themer plugin, we can switch from wireframes to multiple high-fidelity brand themes

As we head towards the end of 2020, a momentous year for many reasons, the NewsKit team’s focus is gradually shifting. Our 2021 priorities can be outlined as follows:
Beyond the px — Zapier’s Stephanie Briones on getting feedback, open design, and ☕️
By: Luis Ouriach
Tags: Product Design, 8px Beyond, Design, Zapier, Design Systems

I’d say that it does depend a lot on where you are in your career. At my first job, I often worked extra hours because it took me more time to complete tasks, (at least to my standards at the time) especially when meetings took up precious time in the day.

Now, I’m lucky and very grateful that I can typically achieve what I want during my standard working hours, and whatever I can’t, (with very, very few exceptions) can wait until tomorrow. Zapier has a healthy work/life balance culture that really helps prevent the need for working additional hours, and I think that’s how it should be for all companies, especially the remote ones. It’s very uncommon to see anyone working outside of the hours they’ve set for themselves, and as a global, 100% distributed company, working hours are pretty flexible, as long as there is some overlap in the day with your teams to sync, you set your own schedule.

For the second part, I think that there are times in our careers where practicing design, and doing our own personal exploration feeds our souls and re-energizes us. Like when you get that itch to redesign your personal website, or make a new portfolio to share the work you’re proud of. I think it helps us reflect on what we’ve achieved, and that is a very healthy and powerful thing.
Revamping Storybook’s addon ecosystem
By: Dominic Nguyen
Tags: React, Features, Storybook, Addons, Design Systems

Revamping Storybook’s addon ecosystem

Storybook has over 200 addons that enable new features and integrations. Similar to VSCode extensions, addons are a convenient way to customize Storybook to fit your UI development workflow.

The addon ecosystem is one of the main reasons why teams adopt Storybook. But until now, finding the right addon for your use case involved plunging the depths of NPM. I’m excited to highlight Storybook’s best addons in the new addon catalog (beta).

Who uses addons and why?

Storybook’s addon API is one of its core innovations. Not only does it allow users to extend and configure Storybook in countless ways, but many of these addons are automatically cross-framework (i.e. usable in React, Vue, Angular, etc.) without modifications. This means, if you write an addon for your React project, you can reuse it in over 60,000 public Storybooks.

“Storybook is a well documented platform, letting us build an Addon that unlocks value to our users in a short period of time.” — Brendan Mahony at Contrast (YC18)

Thanks to the addon APIs versatility, the number of addons has skyrocketed. To understand what’s possible, let’s take a look at who uses addons and why.

Large organizations

Addons simplify sharing integrations with different Storybooks. Large companies use them to integrate company-specific libraries and promote UI hygiene.

Intuit centralizes UI component design and development documentation with addons. Every UI developer has a standardized template for component documentation and the theme support.

Naver, the #1 search engine in South Korea, created an addon to preview component code in multiple frameworks. That makes it easy to browse a component’s documentation for React, Vue, or Angular.

Leading agencies

Addons streamline the UI development handoff for agencies. With a constant stream of new projects, speeding up build outs results in happier clients and higher margins.

Whitespace’s HTML addon renders a component’s HTML output in an addon panel. Even though it replicates what developers already do with browser devtools, the small convenience results in big time savings in the long run.

“We often work for tech companies with inhouse backend devs. Getting direct access to HTML without having to set up the project saves time.” –Fredrik, tech lead at Whitespace

Etch takes developer productivity to the next level. Their addons integrate Storybook with Bugherd and add component status labels.
Make an Advanced Data Table in Figma With Auto Layout
By: Tulay Ozkan-Soykal
Tags: Data Tables, Prototyping, Figma, Material Icons, Design Systems

Step 1: Start with one table cell

First, create a text and set the resizing to ‘hug contents’. Then, make a component from this text. Add auto layout to this component. Adjust your row size, alignment and paddings. Select your component and style it as you like.

I want my table to have only horizontal lines so I included a line to my component. I set this line’s horizontal resizing value as ‘Fill container’. This will allow the line to resize as I change the cell width. You could probably find a plug-in to add a single border, but I went with old school in this example.

Step 2: Create different types of table cells

After creating the most basic table cell, we can spice things up! We’ll create headers and different table cell types such as with icons. Let’s start with the cell with an icon.

Create a variant and name the property as “Icon”. Rename the Default value as “False”, other as “True”. Duplicate the text layer in your variant and turn it into an icon by writing the icon name and changing the font to your icon font family.

Select your icon and the text and apply auto layout. Make sure horizontal direction is selected. Finish up by checking alignment and padding.

Icon fonts can do wonders. They are one of the easiest way to create robust components. I used Material Icons in this example but you can also use Font Awesome as well.

The next is up to your need and imagination. Continue to create different variants for each cell type such as headers, right aligned cells, mouse over effects…

Building blocks for your data table. You can also create style effects such as mouse over, selected or disabled states.

Step 3: Make columns

Now that you have your building blocks, you can use them to create the columns for your table. Think about what type of columns you need. Drag your table cell to the canvas and create your column by duplicating the cells on top of each other. Add auto layout and make adjustments.

Create a column by duplicating your basic cell component. Change your component properties and convert the first cell to a column header.

Once you create one column, make it a component and create different columns as variants.

You can create a column made of icons such as checkboxes by turning on and off the variant properties.

Step 4: Assemble your data table

Drag and drop your column component, duplicate and select the variants you need. Finally, add auto layout and your table is ready to add content.

And that’s all! I hope you find this guide helpful.
MDX Embed for Storybook
By: Paul Scanlon
Tags: React, Features, Storybook, Mdx, Design Systems

Why build an addon

When Storybook shipped with MDX support, I realized I could expand the default MDX implementation by creating an addon. That would make it easier for the community to embed content and help me get contributions and feedback.

I piggybacked off Storybook’s parameter API to wrap all MDX docs in “Provider”-type component called MDXEmbedProvider . That saves me from having to import them one-by-one (you might have encountered this if you use styled-components et al).

The provider allows Storybooks docs pages to render the out-of-the-box embed components for services like CodeSandbox whenever it encounters them in a *.stories.mdx file. Checkout the example below.

// some.stories.mdx import { Meta, Story, Canvas,} from '@storybook/addon-docs/blocks';

import { SomeComponent } from '../some-where'; <Meta title="Components/SomeComponent" component={SomeComponent} />

<Canvas>

<Story name="usage">

<CodeSandbox codeSandboxId="react-new" />

</Story>

</Canvas> <Canvas>

<Story name="something">

<SomeComponent someProp="foo"/>

</Story>

</Canvas>

You can see from the above that to render SomeComponent” you need to import it into your .stories.mdx file while MDX Embed’s CodeSandbox component doesn’t require the import.

MDX Embed is written in React and the core components can be imported in any JSX file as well

When to use MDX Embed

First off, you can only use the addon if you’re writing stories or docspages in the MDX story format, not Component Story Format (CSF).

Both formats output the same level of detail, prop tables, code snippets, etc but MDX allows for a nicer writing experience. If you plan to write supporting documentation around your component MDX is for you. Use cases that it’s great for:

Long form content

Brand guidelines

Typography

Do’s and don’ts

Usage examples

What’s more, designers tend to prefer MDX because it’s more natural to write “Markdown” than JavaScript. That helps teams bridge that designer / engineer gap. MDX Embed is perfect for these use cases because richer docs makes it easier for folks to learn.

How to install

First install the addon from npm.

npm install mdx-embed storybook-addon-mdx-embed --save

Then register the addon in Storybook’s configuration.

// .storybook/main.js module.exports = {

...

addons: ['storybook-addon-mdx-embed']

};

Final thoughts

I’m happy to share MDX Embed with the Storybook community.

If you’re interested in open-source software, developing addons for a popular project can give you a head start. Launching a project is hard without an audience, you can reach a lot more users by standing on the shoulders of giants so to speak.

If you’re interested in developing a Storybook addon, I recommend checking out the links below.

The Storybook team are super brilliant, if you have any questions about how to get started developing addons they’ll be more than happy to help.

Get involved

To get the latest addons and Storybook news sign up to the Storybook mailing list. Check out Storybook on GitHub and join the Discord chat.
Figmaで始めるチームでつくるサービスデザイン
Tags: Figma, Designer, Design, Design Systems

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
What makes up a Design System?
By: Umair Jeelani
Tags: Design Process, Portfolio, UI, UX, Design Systems

Design system is a kit of elements and a platform that helps to collaborate, design, develop a product and provides developers with necessary information for handling the small details to create a website or an app. It saves time for collaborators by making certain that everyone is on the same page rather than having inconsistency in their team.

As a designer we need to know the key insights of a design to make a design system. In a design system, we add so many small details to make a final product. Every design system has different information based on their product. I have used a program called Zeroheight to create my design systems. There are so many other platforms like Zeroheight which are really helpful for designer and developers to finalize the product. Some other good ones are: Frontify, Design System Manager (DSM) and Nuclion. Some of the platforms provide their plugins like Zeroheight to work faster and efficiently to help developers and designers.

Below is a link to one of my design system for a project I worked on and I have provided the outline for that design system below as well including the categories and sub-categories I used to divide my work so it’s more scannable for the viewer. Feel free to check and out and let me know what you think!

Click here to see design system: https://zeroheight.com/7dbfa0fa7

· Cover page

· Introduction: Goals, Design Principles

· Style: Colors, Typography, Layout, Icons, Logo

· Photography: Guidelines

· UI Components: Buttons, Navigation, Cards, Text Input, Drop-downs, Microinteractions

· Resources: Tools

Lastly, I would like to say that creating a design system really helps a designer explain their thought process to someone else like a developer. It is the like an instruction booklet in an Ikea furniture box, it helps you build something from scratch or at least direct you on how it should be done.

Umair Jeelani

UX/UI Designer
Storybook Mobile
Tags: React, Features, Storybook, Mobile Web, Design Systems

Storybook Mobile

Storybook Mobile in action

Almost every frontend developer has been guilty of this at least once: you quickly build some bit of UI that works fine in Chrome on a powerful laptop with a good internet connection, and then you go ahead and ship it.

Now, your users have to contend with a brittle UI. It might be broken for people who use their keyboard to navigate, or it could look janky on a slow connection. Maybe it renders really poorly in mobile Safari.

One component can be rendered on many devices and browsers

It’s a lot of work to build solid UI components that perform well in all circumstances, and one area that’s particularly easy for desktop-based developers to overlook is mobile devices. Even if you adhere to all the best practices of responsive design and make sure that your UI looks good on smaller devices, you could still be shipping a product that is missing all the details that make an experience usable, smooth and performant on a touchscreen device.

Mobile-web browsers account for about 50% of website visits, yet many mobile web best practices are frequently overlooked. I became increasingly aware of this issue after noticing how differently various popular websites performed on my phone — they ran the gamut from totally smooth and intuitive UIs, to near unusable ones. After spending time collecting UX best practices for mobile, I decided that it would be helpful to create an interactive tool to proactively guide developers towards using mobile web best practices.

Storybook to the rescue

Having the right tools sets developers up for success, and I like Storybook because it gives me the mental space to think in isolated components and experiment with component states as I work. Storybook has a variety of helpful addons that make it easier to pick up on usability issues during the development process. For example, the Storybook accessibility addon scans the rendered HTML of your stories for possible accessibility issues.

Inspired by the accessibility addon, I built an addon that integrates the mobile hints and facts I compiled over the years directly into my daily workflow. Storybook Mobile provides hints and suggestions in context, depending on the content of each individual component as it has been rendered into the page.
Building a Design System Package With Storybook, TypeScript, and React in 15 Minutes
By: Dennis O'Keeffe
Tags: Programming, React, JavaScript, Typescript, Design Systems

Building a Design System Package With Storybook, TypeScript, and React in 15 Minutes

Background photo by Nils Johan Gabrielsen on Unsplash.

When building out a UI component library for my own work, I ran into a couple of pain points while searching for how to create a simple workflow that “just works.”

Most tutorials I saw for TypeScript component libraries made use of build tools (which at times caused headaches) and my current job took the opposite extreme of publishing the UI component library as TypeScript and relying on individual projects to transpile it to JavaScript directly from the library itself (if you are from my company… you didn’t read anything).
How to mock APIs in Storybook with MSW (Mock Service Worker)
By: Alexis Oney
Tags: React, Front End Development, Storybook, Mock Service Worker, Design Systems

Install Mock Service Worker (MSW)

We’re going to add Mock Service Worker (MSW) to our project and make it available globally.

Usually, Service Workers offer better cache control on websites and web apps. These Workers stand between your front-end and the network, catching all requests being made.

Instead of managing the cache, MSW allows you to catch calls to the network. You can set up whatever you need in place of the official response: your application will act as usual without noticing it’s a mocked response.

Step 1: install the package as a dev dependency.

npm i -D msw

Step 2: initiate the MSW config and let it creates a file in our Storybook public folder recently created (don’t forget to adapt the path to your folder structure)

npx msw init .storybook/public/

After having run this command, the library creates the file mockServiceWorker.js in your public folder. Don’t delete it as explained inside as it is needed to start the service worker.

If everything went well, you should now be able to access this file when you run Storybook. In my case, the URL is:

http://localhost:6006/mockServiceWorker.js

Step 3: start MSW from your Storybook preview.js file by adding…

This line at the beginning of the file:

import { setupWorker, rest } from ‘msw’;

These lines at the end of the file:

// Storybook executes this module in both bootstrap phase (Node)

// and a story's runtime (browser). However, we cannot call `setupWorker`

// in Node environment, so we need to check if we're in a browser.

if (typeof global.process === 'undefined') {

// Create the mockServiceWorker (msw).

const worker = setupWorker();

// Start the service worker.

worker.start();

// Make the `worker` and `rest` references available globally,

// so they can be accessed in stories.

window.msw = { worker, rest };

}

If everything is well configured, when you run Storybook, you should see a message in your console informing you that Mock Service Worker is started:
These are great!!
By: John Macmenamin
Tags: Design System

Pegasus Design System Pro for Figma

Move projects to your users faster with a UI Kit designed for greater consistency and usability that adapts to your…
Great article
By: John Macmenamin
Tags: Design System

Great article

Naming conventions was a big struggle in building the component variants for Pegasus DS in Figma.

I think they recently standardized around default, pressed etc. state names.

John
This article was the inspiration for my team to switch to sketch and start building this design…
By: John Macmenamin
Tags: Design System

This article was the inspiration for my team to switch to sketch and start building this design system.

Thanks for paving the way!
Love these public systems!
By: John Macmenamin
Tags: Design System

Pegasus Design System Pro for Figma

Move projects to your users faster with a UI Kit designed for greater consistency and usability that adapts to your…
Didn’t know about “Bit .
By: John Macmenamin
Tags: Design System

Didn’t know about “Bit . dev” but that looks like a perfect fit for added coded React components to my own DS.

And builder X looks dope too.

Thanks for the helpful article and resources!

John
Very interesting that space plays such a big part in Design Systems.
By: John Macmenamin
Tags: Design System

Very interesting that space plays such a big part in Design Systems.

This Design System uses Base8 to control spacing.

Hope it’s helpful,

John
Case study: A design system that evolves like a language
By: Ashim D Silva
Tags: Case Study, UI Design, User Experience, Design Language, Design Systems

The challenge

Design for daily use

Paytm Insider is rapidly scaling and evolving as a business, from its history in live event ticketing, to movies, sports and interactive video and games.

For marketing, we wanted the large amount of daily work producing banners and emailers to be simplified, with improved consistency — empower all levels of designers to produce work that fits the brand well and is ready for release with minimal oversight.

For product, we wanted to reduce decision making around font sizing, margins, etc. to improve consistency across apps and create a shared language between design and development. Give both team building blocks for prototyping new features or updating older parts of the app.

Fast learns, slow remembers

Pace layers divide types of design work by their resistance to change

From the beginning, we wanted to make sure the system was ready for change. Big decisions like brand colours and fonts might remain more fixed, while fast moving components like ads and new features would need to be nimble enough to experiement and set new standards.

Borrowing from architect Frank Duffy’s ideas about the layers of a building, we divided design work into the pace at which they were likely to change. Deeper layers change slowly and need more consideration while higher levels change with the season and can be trendy.

Moving the centre needs more effort and involves more stakeholders since it forces everything around it to change as well

Core branding

Design can be broken into grammar (colours, fonts) and vocabulary (components, modules)

Rather than start with a set of use cases, we wanted to give ourselves rules to work with. The core layer then is a system, not a library, and can be used to handle any new case thrown at it.

We worked with our branding agency to develop the basic building blocks: a colour palette, fonts and patterns that can be combined in a variety of ways.
Great article!
By: John Macmenamin
Tags: Design System

Everything you need to know about Design Systems

8.7K 21
Awesome list!
By: John Macmenamin
Tags: Design System

Pegasus Design System Pro for Figma

Move projects to your users faster with a UI Kit designed for greater consistency and usability that adapts to your…
Como é fazer um Redesign Acessível?
By: Michelle Frasson
Tags: Acessibilidade, User Experience, Design Systems

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
어디에나 있는 디자인 시스템, 그러나…
Tags: Uxui Design, Web Development, Modusign, 모두싸인, Design Systems

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
Addon Catalog sneak peak
By: Dominic Nguyen
Tags: Front End Development, Storybook, Components, Design Systems

Addons are one of the top reasons for Storybook’s popularity. The community has over 200 addons made by developers at eBay, Intuit, Rakuten, and more.

But using addons is tricky.

I’m thrilled to share a sneak peak of Storybook’s new addon ecosystem. We’re simplifying how to create, find, and reuse addons. Here’s how:

New Addon Catalog app

Rewritten API docs with code samples

New guide for building an addon from scratch

Read full post: Addon Catalog sneak peak »
Addon Catalog sneak peak
By: Dominic Nguyen
Tags: React, Features, Front End Development, Storybook, Design Systems

Addon Catalog sneak peak

Addons are one of the top reasons for Storybook’s popularity. The community has over 200 addons that extend your UI development workflow. But using addons is tricky.

It’s tough to figure out how to create an addon, much less share it with others. Most addons are made by ambitious developers or professional teams like Ticketmaster, Rakuten, and eBay.

That’s why I’m thrilled to give you a sneak peak of Storybook’s new Addon Catalog app and in-depth guide. We’re making it easier to create, find, and reuse addons.

What are addons?

Before we begin, let’s recap why addons exist in the first place. Addons give you superpowers to customize Storybook to fit your workflow. Think VSCode extensions or Figma plugins.

The addon construct provides a clean separation between Storybook’s core APIs and the developer experience. This yields a stable yet extensible architecture for the community to build on. For example:

Storybook features like Actions, Controls, and Docs are implemented as addons.

like Actions, Controls, and Docs are implemented as addons. Companies like Ebay, Ticketmaster, and Intuit solve domain-specific workflows with addons.

like Ebay, Ticketmaster, and Intuit solve domain-specific workflows with addons. Open source projects like Next, CRA, and Nuxt simplify integration with addons.

like Next, CRA, and Nuxt simplify integration with addons. Cloud tools like InVision and Contrast streamline the product development cycle with addons.

like InVision and Contrast streamline the product development cycle with addons. Solo developers like Alex Holachek and Shota Fuji scratch their own itches with addons

The new addon ecosystem makes it easier for you to reuse community addons.

“There’s an addon for that”

The Addon Catalog showcases every Storybook addon in one place. It scans npm for addons, organizes them by keyword, then ranks according to maintenance heuristics and downloads.

With over 200 addons so far, it’s time consuming for devs to figure out which addons fit your project or whether they’re up to date.

Choose from the most popular or trending addons in the community. Browse by category to see a list of the most popular addons for specific jobs.

Click on an addon to see install instructions and readme.

With the Addon Catalog you’re able to discern trustworthiness and compatibility in a glance. What happens if you want to build your own addon?

How to build an addon

We interviewed developers from Atlassian, Datadog, and Intuit to learn how to building addons could be easier. The new API documentation outlines the major addons types along with working code samples.

UI-based addons

UI-based addons customize the interface, add shortcuts for repetitive tasks, or display additional information. They impact three areas of the UI: Toolbar, Tab, and Panel.
Introducing the Matterhorn Design System
By: Thais Souza
Tags: Design Teams, Designops, Design Systems, Matterhorn, Stryber

Introducing the Matterhorn Design System

The Stryber Design Team is pleased to announce that our new home for Matterhorn Design System is now live at matterhorn.stryber.com

Every digital business faces a significant challenge when they begin to scale how to quickly develop better products that users love while still creating a consistent user experience on every display. Balancing these priorities can be very difficult to execute.

To solve this, Stryber created Matterhorn a powerful open-source design system, that is 100% focused on venture development.

The design system consists of React and React Native design components that can be utilized for both web and mobile applications. It also includes source code and additional resources that serve to establish a shared vocabulary between designers and developers. The possibility to adapt our components to multiple devices and projects will make the design and development process even more efficient and focused.

With Matterhorn, you will be able to combine components and interactions quickly, therefore maintaining an intuitive, inclusive design across all of your projects.

Our Design Inspiration

When creating the components for our design system, I was inspired by the accessibility of the city of Munich.

To give you some background, I'm from Brazil and although we have some planned cities like Curitiba and Brasília. I grew up in Rio de Janeiro which renowened for its beautiful landscapes but is unfortunately not accessible or organized city. So, when I moved to Munich I was really inspired by the city's flow and accessibility. Everything works here like a perfect dance. Of course, it's not perfect all the time but it's much better than what I was used to. So I thought, why not have a digital system that works the same way?!

Just as the infrastructure is not only centered around cars but also pedestrian and bike traffic and the accessibility of blind and disabled residents we built Matterhorn to provide the best digital experience to everyone.

We incorporated colors, lines, and elements from our second big inspiration: the Alps and the nature surrounding it. For this reason, we have called our design system Matterhorn.

Our Mission

To give all people total control of the interface experience by creating the first truly inclusive design system, which can be used to build products accessible to everyone, regardless of age, disability, or other factors.
Design a new project. Where to begin?
By: Lina Stepanova
Tags: Style Guides, Atomic Design, Branding, Web Design, Design Systems

What are the basics of future visual concept?

Do your Bussines owners already have a Brand Identity?

If the answer is “NO”, its time to show to Bussines owners the power of the band ( here you can find a guideline to shed some light on the subject of branding)

So here is a set of graphics assets and visual elements, including logo, brand colors, typography, illustrations, animations, and business cards.

Down below you can find the list of resources to look through about branding:

If the answer is “YES”, so you're a pretty lucky guy!

If the answer is “YES”, so you’re a pretty lucky guy!

If we are talking about digital products, this is the field where so many old-fashioned companies should adapt their Brandbooks that focused mostly on paper marketing & outdoor advertising. There are some steps to align your current design-work with product identity:

Conduct a visual audit

Create a visual design language ( Colors, Typography, Grids, Imagery)

Create a UI/pattern library

Document what each component is and when to use it

Keep going & let's know more about design systems.
Streamlining the Design x Engineering Partnership
By: Kim Hart
Tags: Design, Web Components, Frontend, QA, Design Systems

Removing the Guesswork 🕵️‍♀️

A common pain point during a feature’s lifecycle often surfaces when the handoff of a design spec breeds assumptions from the designer and engineer alike. Design assumptions about feasibility or complexity can lead to questioning, debates, and overall time lost. Engineering assumptions about a design can lead to bugs, UX inconsistencies, tech debt-incurring workarounds. Fortunately, the introduction of Hook and WUI has alleviated a lot of the guesswork in both the design and engineering workflows.

Designers are now empowered to design with specific components in mind without worrying if the technical aspects are achievable or not. Loading, error, empty, and focus states are largely handled out of the box and just need to be wired up appropriately. Each state might not need to be detailed in a flowchart—a huge timesaver—because our components’ behaviors are consistent.

Here’s an example of how a traditionally tricky key-value input list handles itself in the context of a robust video detail page:
디자인 시스템을 만들면서 배웠던 것들 — 컴포넌트 부터 시작하지 마세요!
Tags: React, Framer, Korean, 디자인시스템, Design Systems

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
How we built ‘Kosmos’ a Design System for Vault Intelligence product suite (web, mobile and wearables)
By: Clarice Menna Barreto Trevisan
Tags: Design Process, Design Systems

‘Cosmos, or Greek ‘Kosmos’ implies viewing the universe as a complex and orderly system, a system of thought, orderly arrangement.’

Vault Intelligence provides Risk and Safety Management Software. We built a design system to uplift our product build and unify, simplify and add consistency to Vault Intelligence Product Suite.

Vault Enterprise web platform

Check Mobile App

Notify Mobile App

Audit Mobile App

Vault Solo web platform

Vault Solo mobile App

Vault Solo App for Galaxy Watch

Vault Solo App for WachOS

Vault Solo watch (Omate watch)

When I joined Vault to build a new design capability, I immediately identified the need for a design system. The first action was to educate the product team and broader business on the value of a design system then followed by an inventory and a plan to build the design system.

Proving the value of a design system to the team and the business was not difficult but I believe that the key was open communication and bringing everyone along the journey. It was important to show how many hours of designers and developers work can be saved, how it empowers the product team, speeds up the building and nurtures a shared language that is translated in the products we build.

After a workshop with the product team, everyone agreed to help with an inventory of existing components, colours, patterns, accessibility, etc. This exercise reassured everyone of the importance of a design system and helped us to prioritise the work to be done.
Component Libraries for Enterprise SaaS
By: Masha S
Tags: Design, Figma, Design Operations, Components, Design Systems

Intro + Background

In this article, I’m going to go over how we organize component libraries at here at LogicManager.

LogicManager (or LM, for short) is a complex tool for enterprise risk management. It consists of numerous areas, such as:

Risk library — a place where you can store all risks that might be applicable to your company

Plans area — a place where you can conduct a risk assessment by department

Incidents — a place where you can keep track of any issues that come up

…etc.

And it also has quite a few core features:

Workflows

Form builder

Rule builder

…etc.

While there are many “universal” components that are shared across all areas/features, there are still a lot of the ones that are area- or feature-specific.

Component Library v1

When we first began developing the app, we started with some very basic functionality and for a while, we only needed the aforementioned “universal” components (breadcrumbs, input fields, buttons…).

We expected that having just two files inside our Component Library project would be enough: one file for colors/typography/spacing and one with all components, organized by pages using the atomic design system.

It looked something like this:

Component Library project in Figma

Pages inside “Components” file

And this did work well, for some time.

However, as we started going farther down the roadmap and implementing more complex areas/features, things started to get messy. Unintentionally, we developed a new way of working which didn’t allow us to maintain the existing set up.

Here’s what happened:

Every time we would start working on a new project, we would create a new file inside Component Library for exploration (in order to avoid cluttering up the Components file) We would create new components and prototypes in that new file We would then iterate in that file until we solidified the new design By the time we would be done with designs, it would be time to make specs for devs And after all that, it would be too late and inconvenient to transfer new components to the original Components file

As a result we ended up having numerous component files for different areas and features. Those files neither had a matching page structure nor a matching naming convention for the components.

This is what our Component Library project started to look like:

It’s worth noting that components in files were not necessarily differentiated between features/areas. Some files contained components that belonged to an area and a feature. And then those same components would be used in another file for some other area. There was a lot of overlapping.

Pages inside files were not organized either:
Lessons Learned From Building Design Systems — Do Not Start from Components
Tags: React, English, Framer, Design Systems

Someday I read an article called “Design systems will replace design jobs” from my Facebook timeline. It was a viral article, and many designers agree with some points of that article. And I think I found the answers to Harbor School’s problem.

It seems to be good medicine to align the differences between many different designs on websites and SNS. So I decided to make the system. Developing systems look easy cause I’ve been making component-based websites for a long time. But I’m not confident on the graphic side. So I started to find cool designers, and I met Sangmin.

We are all the first time on Design System, so I gathered information and references for Design System and shared them together. But it was a time no one knows exactly what we are doing. Anyway, Sangmin made beautiful graphics for our new website about the system. We quickly summarized some guides and rules of the system on Notion.

However, the system was too simple and strict. That means we should make new guides and rules for every new design required. Our rules matched one by one as components. One rule means one component. We didn’t think about relations between rules and components, making it more challenging to sustain the system and create new designs.

Color rules at that period. It was too rigorous.

Focusing on Flexibility — The Second Try (July 2020)

The newly launched service was successful (beta.harbor.school) with the first Design System. We tested a lot of users and a new feature. But on the system side, it is almost the same as the time we didn’t have the system.

The system needed something to change.

After one year passed from we started to make the first system, we decide to change it from the starting point. I studied more about the flexibility of Design Systems, which makes me realize a new thing.
nova, the design system that transformed a enterprise cloud product
By: Shamir Dawood
Tags: Nova Design System, Design Practice, Enterprise Application, Design Systems

In my previous article I’ve discussed why organizations that build enterprise level applications, specially for web and mobile should consider using an existing design system or take a step forward and create their own design system.

In the recent past most of the well-known popular digital products out there are designed and developed ground up with the help of a design system. The sole reason for this is because the system is designed with a set of commonly agreed design principles, with a set of unique and consistent style guides and with a collection of reusable components maintained from one single repository.

We at Cloud Solutions International, understood that the enterprise grade Healthcare application that we were building will definitely need a design system a.k.a “a backbone” to hold the 20+ modules together as one within the application. We realized, if we didn’t have a Design System and since the product was rich with features and modules, when multiple UI/UX designers, UI engineers and Front-end developers start to work parallel, it would cause problems within the development process.

We at Cloud Solutions International understood the importance and gravity of the use of a Design System within our application and started to create our very first design system back in 2019 with a bunch of talented Leads, UX designers, UI Designers, UI Engineers, UX Writers, Front-end Developers and BA’s and that’s “nova”.