Questions tagged [design-system]
The design-system tag has no usage guidance.
52 questions
1
vote
2
answers
57
views
How to handle separate Design Systems for B2C and B2B from one company
Our company offers apps (B2C) and a web dashboard software (B2B), which both target completely different user groups.
We're now at a point internally, where we're discussing if we should go with one ...
- 6,847
2
votes
1
answer
53
views
Property and components naming
What is the best way to organize work on naming components and properties in a design team? Please advise the naming systems you use. Maybe there will be some useful articles on this topic?
- 131
1
vote
4
answers
121
views
Visual hierarchy guidance in design systems
While exploring various design systems, I get a little bit confused as to what design systems are meant to be and how they are actually being implemented. Design systems, by the very presence of the ...
- 730
0
votes
1
answer
69
views
Designing scalable tooltips & toggletips
I am working on creating a design system for our product and completed with an audit. While working on the tooltip component, I came across some patterns which I am unfamiliar with, can someone have a ...
- 11
1
vote
1
answer
114
views
I'm creating a detailed component spec for an input field in iOS and I don't know exactly how to specify certain accessibility details
I'm building a detailed accessibility spec for an iOS input field component for a design system. I want to outline in the spec how voiceover should work.
The design system needs an input field that ...
- 11
2
votes
6
answers
302
views
Will a Global Design System improve accessibility of web applications?
I read Brad Frost's post on A Global Design System with interest. After all, Atomic Design is one of the most popular concepts in UI Design since Bootstrap came out years ago, and there hasn't really ...
- 27.7k
0
votes
2
answers
203
views
Is skeuomorphic design out of style? [closed]
Is skeuomorphic style out of fashion? Is it necessary for design system to have skeuomorphic style for other elements in the system?
Is flat design not in trend anymore?
- 2,511
1
vote
0
answers
51
views
How to initiate designing a iPaas Product from scratch? [closed]
As a Product designer working in an iPaas company, I have worked on various features of the product. On both the scenarios like designing a new feature and also improving the existing features. The ...
- 21
1
vote
1
answer
91
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.
1
vote
1
answer
61
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 ...
- 11
2
votes
2
answers
782
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 ...
- 145
2
votes
2
answers
172
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 ...
- 145
2
votes
1
answer
84
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 ...
- 73
1
vote
2
answers
816
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 ...
- 126
3
votes
1
answer
252
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.
...
- 38.3k
1
vote
3
answers
499
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,035
1
vote
1
answer
227
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
693
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 ...
- 309
0
votes
3
answers
2k
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 ...
- 71
3
votes
3
answers
983
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
1
answer
106
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
1k
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
2k
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 ...
- 336
1
vote
1
answer
756
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 ...
- 21
0
votes
2
answers
5k
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
333
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
7k
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
549
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
956
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 ...
- 697
1
vote
4
answers
3k
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,377
1
vote
1
answer
501
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
666
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
145
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
3
votes
1
answer
104
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 ...
- 31
0
votes
1
answer
104
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
82
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
168
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
363
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 ...
- 27.7k
2
votes
3
answers
217
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
73
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 ...
- 225
1
vote
3
answers
221
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 ...
- 196
0
votes
3
answers
115
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
91
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
148
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
164
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 ...
9
votes
1
answer
339
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 ...
- 27.7k
1
vote
3
answers
162
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
79
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
2k
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
234
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