Questions tagged [design-system]
The design-system tag has no usage guidance.
44
questions
0
votes
0
answers
19
views
Checklist for merging changes in a Figma branch of a Design System library
Does anyone follow any checklists when reviewing and approving branch changes in a design system library and if so, what kind of things would you check to maintain quality in your design system.
0
votes
1
answer
35
views
Adopt or create new design system
Would it be a best practice to recreate a new design library made of only components we used or just use this big library? The team bought a design system library in Figma that is comprehensive but we ...
- 1
1
vote
2
answers
472
views
What is a Pattern that is part of the Design System?
I am researching Patterns and I am confused by the following definition.
Patterns are reusable combinations of components that solve common
user problems. These best practice solutions help users ...
- 115
0
votes
2
answers
94
views
Should the components be drawn in the Design System?
I wanted to investigate what an design system is, but there is a part I cannot understand.
In design systems, buttons, forms, that is, every component we see on the website or mobile application is ...
- 115
1
vote
1
answer
55
views
Alert message component variants
I work in an e-commerce platform and we recently had a lively discussion about the variations of our alert message.
Would you agree that it is useful to have different versions of an alert or would ...
- 63
0
votes
2
answers
133
views
Do I need to follow scale while defining typography in design system?
I'm confused if I should use scale or not while defining our typography. While using it I'm not able to use 14px and 16px at the same time plus it's giving font sizes like '16.80'(just an example) and ...
- 116
2
votes
1
answer
146
views
UI: Why not negative elevations?
Since Material Design came to the surface, we "learned" to design according to 3D planes based on the sheets metaphor. This replaced flat design, which in turn replaced skeuomorphic design.
...
- 37.3k
1
vote
3
answers
135
views
Is it a good practice to display only one tab
Working on an experience where there are multiple tabs that have forms in them, but they show up only if a user has selected to fill them. There is one form and thus tab by default. Is it a good ...
- 1,013
1
vote
1
answer
78
views
Persistent Rich Tooltips
Material Design has rich tooltips which can also be persistent. As it's explained here, these tooltips:
remain active even when leaving the target region
can contain links
only disappear once you ...
- 145
0
votes
1
answer
235
views
Scalable naming convention for ordinal sizes?
Hopefully this is a good place for this question. I'm trying to put together concepts for a Design system, and I have a stumbling block on naming tokens.
Essentially, when I've got elements that are ...
- 177
0
votes
1
answer
292
views
Using Display S, M, L, XL, 2XL instead of H1 -H6 for typography in a Design System Manager (DSM)
I find using specific H1 - H6 is confining since different pages may need a different size H1 and so on. Also instead of making 2 sets for desktop and mobile this would work as one file. Does anyone ...
- 27
3
votes
3
answers
815
views
What can be the strategy to build a Design System?
I often wonder whether it should be a component first approach or what exactly should be the strategy to build a design system.
- 53
0
votes
0
answers
48
views
How to give name while creating Typography in Design Systems?
How to give name while creating Typography in Design Systems?
which of the following is most common when naming typography?
System default typography naming.
(or)
Create your own set of naming.
...
- 1
0
votes
2
answers
454
views
APCA (WCAG 3.0) does not allow for 14px font to be used as a regular base
According to APCA (WCAG 3.0), we are not able to use 14px font as a regular base, but when it comes to SaaS application design, 14px is commonly used as the base font size. Despite my attempt to use ...
2
votes
2
answers
892
views
UI Design: I can't understand the concept of design tokens
I have created a few design systems in Figma for different companies. Some are simple, and some are complex. But till now I can't understand the concept of design tokens. Every article or video I ...
- 296
0
votes
1
answer
141
views
Creating a Dark Mode
A lot of my colleagues work in quite large companies and have created some very robust and large Design Systems, however, they always say that they haven't quite determined the Dark Theme color ...
0
votes
2
answers
1k
views
Does a hover state background need to pass color contrast for accessibility?
We have some discussion going on between myself (design) and lead engineer. With this key question:
Does the background of a hover state have to pass color contrast?
Our current system has our ...
1
vote
3
answers
224
views
Design system – Different font sizes for small an big viewports
everyone! We are currently working in a project team on a design system that is primarily used to develop web applications. These web applications mainly consist of forms. One requirement here is that ...
- 21
17
votes
6
answers
6k
views
Our brand (and design system)'s primary colour is green: how should we indicate success?
Our brand's primary colour is green, and so we've been using it for a while as the primary colour for our design system (clickable buttons, elements, etc. as shown here):
Now I've just realised that ...
- 291
0
votes
1
answer
338
views
How do you use the 4px grid in a mobile screen for iPhone 11 Pro that is 375px?
How do you use the 4px grid in a mobile screen for iPhone 11 Pro that is 375px?
Margin 16px / gutter 16px? Then it requires to be four columns with a width of 74px however, one of them should be 73px.
...
0
votes
2
answers
448
views
How do you define input length?
I'm working on an online banking website and its design system.
UI designers tend to want all form input elements to be the same size so that everything is perfectly aligned. I've explained that the ...
- 677
1
vote
4
answers
1k
views
Check box and radio button - hover and focus states
I'm currently defining the hover and focus states for my Design System and looking at the major DSs (carbon, material, spectrum, eg) out there I see that the focus and hover definitions for these are ...
- 1,327
0
votes
0
answers
247
views
How to define label text vs body text?
I am setting up the initial typography style guide for a mobile fintech application, the issue I am stuck with is how to communicate what part of content needs to use "label" style vs "...
0
votes
1
answer
343
views
How should I design this, not sure if it's a container or card
I'm currently in charge of the design system and we have this component which I'm not sure if I can consider it a card, or should I just use the general term 'container'. I tried googling and results ...
- 53
1
vote
2
answers
136
views
Improve the current UI library or build a new one?
I recently joined a company with a small team but not a startup. I'm working on a CRM SaaS product, which has a few years, but it's not very sophisticated (UX and UI wise).
When they started to build ...
- 11
2
votes
1
answer
90
views
Is it OK to break with a design system in certain cases?
I am designing a lengthy questionairre (36 questions). Per our design system, I am supposed to use a modal popup (because it will make production faster).
I think that I should break with the design ...
- 21
0
votes
1
answer
72
views
Different heading sizes for different platforms in design tokens [closed]
Currently I'm doing an experiment with my first Design System(I have chosen Bootstrap) and Design Tokens(Style Dictionary npm module)
I configured and build all good,
Later I wanted to achieve as ...
0
votes
1
answer
70
views
What is the meaning of Drive, Drive Compact, Focus, Focus Compact in Style Guide
When I read this article, https://design.lyft.com/building-a-design-system-library-3a1f0d09088f#2cf8 found following image.
Its talking about Frame Name
The frame name is the top-level grouping of ...
3
votes
3
answers
131
views
Differentiate Design Systems incl. code-snippets from repositories
I'm currently doing some research on design systems (hereafter DS) because we want build one.
Context
Requirements for a DS
guides our designers
when building something that needs to conform to our ...
- 191
4
votes
1
answer
286
views
Design tokens in design systems - are designers working with developers?
Usually when I have worked on design systems in the past, a clear and robust IA helps to create a convention and vocabulary to describe all the abstract and concrete elements contained within. And ...
- 26.7k
2
votes
3
answers
183
views
Design System rules
I would like to get your input and experiences with styleguides. Some of the designers I work with insist that the design system should have rules to be followed to the T.
Some sample rules are:
A ...
- 29
1
vote
1
answer
64
views
What is the standard for the text alignment for Text Styles in a Design System?
What is the standard for Design System Text Styles alignment?
Figma defaults to align top.
What are the advantages / disadvantages of using Align Top / Align Center / Align Right when designs get ...
- 195
1
vote
3
answers
209
views
Why designers buy the UI kit for designers?
There are many design systems available online noways, but I am getting confused - what was the purpose of buying a designer system for the designers.
Why designers buy the UI kit instead of making ...
- 166
0
votes
3
answers
100
views
Preferred Mobile dimension for Design System examples
Design Systems usually contain details about the components, typography, tone, etc. There are some systems that also provide screens/page/views, but the majority I've seen online are optimized for ...
- 777
-2
votes
1
answer
84
views
What parts does a design system have, how to support development? some documentation with step by step examples uu [closed]
I'm just starting in the world of ux, I would like to know what a design system has I have read but I still don't understand, the only thing I have been able to do is create some components in figma ...
1
vote
2
answers
108
views
Why are design systems by many companies publicly available?
Why do many companies like IBM, GE, VMWare, etc make their design systems publicly available? Designers find it useful, but how is is helpful to those companies and why do they do it?
- 11
1
vote
2
answers
155
views
How do you call top block with user info on a profile screen?
There is this block in every social media app, on a user profile screen. It contains user's userpic, name and other info, before their content starts below it.
How do UX designers and developers call ...
8
votes
1
answer
300
views
Why are design patterns normally not included as part of a design system?
I have seen many front-end development frameworks that are simple a collection of UI components and page layouts to be used by developers to build new applications. However, it should come as no ...
- 26.7k
1
vote
3
answers
159
views
How to Improve "Select" Component's Experience When Lots of Informations in it?
I have a component select and it has a lot of information about Bank accounts. I need to improve it because this component will have more then 300 bank accounts. Is it a good idea to put in order the ...
- 35
0
votes
1
answer
76
views
HELP tackling huge WCAG 2.0 compliance project! Need advice, please
I need advice on how to tackle a really big project.
The project consists of getting the production and future support website WCAG 2.0 complaint - for both mobile and web:
Production website: is ...
- 108
2
votes
4
answers
1k
views
What would you call a font size between "small" and "regular"
I have these tokens in a design system for font sizes:
tiny
small
???
regular
medium
large
huge
mega
giga
Design needs to add a size between small and regular and I'm stuck trying to find something ...
- 131
1
vote
1
answer
176
views
What frameworks exists for UI documentation?
I´m working on a style guide which I want to put on the web with info, examples etc.
I know there is one API / framework called Fractal, but it does not have the look and feel I want. I see a lot of ...
- 201
5
votes
4
answers
2k
views
UX design guidelines for audio/sound feedback and interaction of UI
I came across a brief guideline that talked about how to do UX design for sound, and there were some very sensible advice that covered a number of points including:
How to decide what type of sound ...
- 26.7k
3
votes
1
answer
111
views
Design systems that cover both physical and digital use cases
When companies created design systems, it is typically applied to their products and services rather than something that can be used throughout the entire organisations. Atlassian's update of their ...
- 26.7k