Olga Zelenska — Design Team Lead at Infor Design
Michał Grzegorzak — Product Designer Associate at Infor
Design system analytics: How to measure the adoption and success of Figma components
September 5, 2023
14:45
UI Design
🇬🇧 English
UI Design
Your ace up your sleeve is in the browser: DevTools for designers
About
About what.
About the fact that one of the most important tools of a UX Designer's job is free and hides in... the browser.
As designers, we don't use the full potential of developer tools (DevTools in Chrome, Web Inspector in Safari). They are available at our fingertips, yet we use them rarely, usually only for a few basic functions.
It will show, among other things, how to:
- edit a page like a text document
- set up a simulation of the slow internet to convince decision-makers that it might be worth working on the weight of images
- turn off styling to test accessibility
- quickly show the boss how the page will look in other colours
- take an isolated screenshot of just one element and quickly paste it into Figma
- download the files you need
- and much more...
# Why does he want to talk about it?
When we talk about developer tools we usually focus on how developers and testers use them. We don't talk about how they are equally useful tools for designers.
I want to show that designers can save time by editing and testing 'in production'. This is not the only benefit. Using developer tools has a positive impact on the quality of work with developers and programmers, so that we create better products.
In my experience, designers (especially beginners, but not only) are afraid of what is involved in code, they feel it is too technical.
I'd like to disenchant this myth and show that it's easy, fun, and most importantly, useful. The mission of this talk is to lower the entry threshold for using browser developer tools.
The results of my questionnaire on the FB group "Product & UX Design PL" show that more than half of the people surveyed know only a few features of developer tools.
My presentation will not only reach beginners, but also those who want to develop their skills.
# What will the audience get out of it?
In this presentation, I will show how, with developer tools:
- communicate better with developers
- present ideas and solutions to stakeholders
- test in production without involving developers
- improve the accessibility of your projects
I will focus on these less obvious features so that advanced designers can also find something for themselves.
With complete beginners in mind, I will discuss how, without any prior preparation, designers can use the simple functions of the developer tools in their daily work.
I will describe each function using real-life examples from my work.
At the end, the audience will receive a list of useful developer tool functions created by me to practice the new skills in practice."
Watch the full talk
Watch this WaysConf session, then continue with related talks or explore the current programme.
From the recording
Talk in brief
A Polish-language practical tour of browser developer tools for designers, rendered here in English. The talk shows that DevTools is not reserved for engineers: it can expose typography, spacing, color, and contrast; replace copy directly on a live page; simulate slow networks and mobile devices; capture full pages or individual elements; and test semantic structure by disabling CSS. Designers can also inspect and override component states, extract SVG assets, and use CSS Overview to audit accumulated colors and font values. These techniques shorten feedback loops, support accessibility and performance conversations, and let designers test ideas safely in the browser before returning to design files or requesting implementation.
Key takeaways
- 01
Inspect live design values in seconds
The element selector exposes colors, fonts, spacing, backgrounds, and contrast without requiring a separate handoff or source file.
Watch from 3:31 - 02
Test realistic copy directly on the page
Design Mode lets designers replace text in context and quickly discover whether longer content breaks an interface.
Watch from 4:54 - 03
Demonstrate the experience of slow networks
Network throttling and loading screenshots make performance consequences visible to designers and stakeholders.
Watch from 6:31 - 04
Audit structure without relying on styling
Disabling CSS reveals whether semantic HTML keeps content understandable when presentation is absent or unsupported.
Watch from 9:11 - 05
Use CSS Overview to expose design-system drift
A single audit can inventory repeated colors, font sizes, weights, and line heights across an existing page.
Watch from 14:13
Read edited transcript highlights
These concise notes were edited from automatic captions and checked against the talk structure. They are not a verbatim transcript.
Inspection turns a live page into a design reference
Selecting an element immediately exposes practical values such as typeface, color, background, padding, and contrast. Clicking it also reveals its position in the page structure. For a designer reviewing an existing product, this replaces a slow round trip through documentation or source files and creates a shared object that can be discussed directly with engineering.
Watch from 3:31Temporary copy changes reveal layout assumptions
A page can be made editable in the browser without changing the deployed site. Designers can replace a label, demonstrate revised wording to a stakeholder, or paste a deliberately longer translation to see whether the layout survives. The edit exists only in the local session, making it a quick and safe experiment rather than an implementation shortcut.
Watch from 4:54Performance becomes persuasive when people can watch it
A page that feels fast on an office connection can be throttled to approximate a slower mobile network. Capturing the loading sequence shows which images, videos, or components delay useful content. That evidence helps move a conversation from abstract warnings about asset weight to the visible experience a customer may actually encounter.
Watch from 6:31Removing presentation tests the document underneath
When CSS is disabled, a semantically structured page should still present headings, text, links, and controls in a meaningful order. A page that becomes confusing exposes dependence on visual placement alone. This is useful for accessibility review and for understanding how resilient the interface remains when old browsers, failed assets, or assistive technologies interpret its foundation.
Watch from 9:11A browser inventory can reveal years of inconsistency
CSS Overview collects the colors, backgrounds, borders, font sizes, weights, and line heights used on a page. In an older product, the report may reveal several nearly identical blacks or a long tail of accidental type values. Designers can use that evidence to plan design-system cleanup with greater confidence than manually hunting through screens one value at a time.
Watch from 14:13
Denis Rybin — Product designer at Fireart Studio
Designing with Data: The Art and Science of Data Visualization Selection
September 5, 2023
13:45
UI Design
🇬🇧 English
Łukasz Tyrała — Principal Designer at Grafana Labs
Never urgent, rarely important: how to find and elevate the value of visual (UI) design for different types of projects
September 5, 2023
13:05
UI Design
🇬🇧 English
Oleksii Drozdenko — Lead Designer, Design Systems & Language at Booking.com
5 Design System Traps
September 5, 2023
12:45
UI Design
🇬🇧 English
Explore WaysConf 2026
