How to THINK LIKE A DEVELOPER using Dev Mode in Figma!

Summary

In this video, the host dives into the world of Design Systems, focusing on the crucial aspect of 'Dev mode'. They explore the importance of maintaining parity between design and code to ensure a functional Design System. The host guides viewers through the process of examining components in Atlassian's design system, explaining how developers interpret and code using design tokens. The tutorial includes a practical demonstration of using Dev mode in Figma and Chrome's inspector panel, highlighting the significance of clear naming conventions and the impact on code structure. The video aims to bridge the gap between designers and engineers, emphasizing the need for a streamlined workflow that reduces miscommunication and enhances the development process.

Takeaways

• 😀 The video is an ultimate guide to Design Systems, focusing on the importance of 'Dev mode' for developers and designers.
• 🔍 Dev mode helps in achieving parity between design and code, which is crucial for the effectiveness of a Design System.
• 💡 Design tokens are used to maintain consistency in design elements and are essential for developers to understand and implement correctly.
• 🌐 The video demonstrates how to use design tokens in Figma and how they are reflected in the code, specifically in CSS and other programming languages.
• 🔎 The speaker explores Atlassian's design system as an example, highlighting the importance of a clear naming convention for design tokens.
• 👀 The video shows how to use the Chrome Developer Tools (Dev mode) to inspect and understand how design elements are coded, focusing on color values and variables.
• 🛠️ Figma's Dev mode is introduced as a tool for designers to understand how developers interact with design components and how they are coded.
• 📚 The video emphasizes the need for clear and concise naming conventions in design tokens to avoid confusion and repetition in code.
• 🔄 The speaker discusses the impact of naming conventions on different programming languages, such as Swift UI and Jetpack Compose, and how they affect the coding process.
• 🤝 The video concludes by stressing the importance of reducing miscommunication between designers and developers and ensuring that developers can easily implement designs as intended.
• 👋 The speaker encourages viewers to engage with the content by liking, subscribing, and commenting, indicating a call to action for the audience.

Q & A

What is the main focus of the video script?

The video script focuses on explaining the concept of 'Dev mode' in the context of Design Systems, and how it helps developers and designers ensure parity between design and code.

What is the importance of having good parity between design and code?

Good parity between design and code is crucial because it ensures that the final product matches the design intent, which is the foundation of a successful Design System.

What does the video demonstrate about the Atlassian's design system?

The video demonstrates how Atlassian's design system uses design tokens and a specific naming convention for these tokens, which helps in maintaining consistency across the design and development process.

What is the significance of the 'Dev mode' in Figma?

The 'Dev mode' in Figma allows developers to see the specific properties and values of design components, which aids in accurately translating designs into code.

How does the video script explain the use of CSS in web and mobile app design?

The script explains that CSS is used for building websites and designing mobile apps, and it shows how design tokens are represented as variables in CSS.

What is the role of the inspector panel in Google Chrome when discussing Dev mode?

The inspector panel in Google Chrome, also known as Dev mode, allows developers to inspect and manipulate the HTML and CSS of a webpage, which is essential for understanding and implementing design tokens.

Why is it important for designers to understand how developers work with Dev mode?

Understanding how developers work with Dev mode helps designers create components that are easier to code, reducing miscommunication and ensuring that the design is accurately implemented.

What is the issue with repeating words in the naming convention of design tokens as shown in the script?

Repeating words in the naming convention can lead to confusion and unnecessary complexity, making it harder for developers to work with the tokens in code.

How does the video script address the problem of repeated words in naming conventions?

The script suggests simplifying the naming convention by removing repeated words, which makes it easier for both designers and developers to work with the tokens.

What does the video script suggest for improving the communication between designers and developers?

The script suggests using Dev mode effectively to ensure that both designers and developers have a clear understanding of the design components and their properties, which helps in reducing miscommunication.

How does the video script conclude about the benefits of understanding Dev mode for both designers and developers?

The script concludes that understanding Dev mode helps designers think like developers, making developers' lives easier and ensuring that the design is built exactly as intended.

Outlines

00:00

🖥️ Design Systems and Developer Perspective

This paragraph introduces the video's focus on Design Systems, specifically exploring how developers interact with them. It emphasizes the importance of parity between design and code, and the necessity of a well-structured Design System for effective collaboration. The speaker plans to demonstrate how developers view components, code, and design tokens, using examples from Atlassian's design system and Figma's Dev mode. The goal is to ensure that designers understand the developers' perspective and create components that are easy to implement correctly.

05:00

🎨 Understanding Design Tokens and CSS Variables

The speaker delves into the specifics of design tokens and how they translate into CSS variables in code. Using Atlassian's design system as an example, they highlight the naming conventions for tokens and how these are reflected in the code. The paragraph discusses the importance of clear and consistent naming to facilitate understanding between designers and developers. The speaker also demonstrates how to use Figma's Dev mode to view and adjust these tokens, showing how they affect the visual elements in the design. The emphasis is on simplifying the naming to avoid confusion and ensure that the code is clean and easy to manage.

10:02

🔍 Enhancing Design-Engineering Parity with Dev Mode

In this paragraph, the speaker discusses the benefits of using Dev mode in Figma for both designers and developers. They highlight how Dev mode can help reduce miscommunication and ensure that the design is accurately translated into code. The speaker shows how developers can use Dev mode to understand the properties and options of components, and how they can see the active states and variations of these components. The paragraph concludes with a call to action for designers to think like developers, making their lives easier by providing clear and concise design elements that can be easily implemented in code.

Keywords

💡Design Systems

Design Systems are a set of guidelines, components, and resources that ensure consistency and efficiency in product design. In the video, the main theme revolves around understanding how Design Systems facilitate a seamless transition from design to code, highlighting the importance of maintaining parity between the two to ensure the final product aligns with the designer's vision.

💡Dev Mode

Dev Mode, as discussed in the video, is a feature in design tools like Figma that allows developers and designers to inspect and understand the properties and code behind UI components. It is crucial for ensuring that developers can accurately implement design components, as it provides a clear view of the design's structure and properties.

💡Design Tokens

Design Tokens are the visual and functional attributes that define the look and feel of a design system, such as colors, typography, and spacing. In the script, the author explores how these tokens are applied and how they help maintain consistency across different design elements, which is vital for developers to reference when implementing designs in code.

💡Parity

Parity, in the context of the video, refers to the alignment between the design and the code. It is essential for a successful implementation of a design system, as it ensures that the final product matches the designer's intent. The video emphasizes the importance of achieving parity to make the development process more efficient and reduce miscommunication.

💡Naming Convention

A Naming Convention is a set of rules for assigning names to elements in a system, which helps in organizing and identifying them easily. In the video, different naming conventions are discussed, such as those used by Atlassian's design system, which is crucial for developers to understand and apply correctly in their code.

💡Inspector Panel

The Inspector Panel, also known as Dev Mode in browsers like Google Chrome, allows developers to inspect and interact with the elements on a webpage. The video demonstrates how to use the Inspector Panel to examine the CSS variables and values of design elements, which is a practical approach to understanding how designs are translated into code.

💡CSS Variables

CSS Variables, as mentioned in the script, are custom properties that allow for dynamic theming and styling in web development. They are used to store design tokens like colors and are easily adjustable, making it simpler for developers to maintain consistency across a website or application.

💡Swift UI

Swift UI is a user interface toolkit for designing iOS, iPadOS, macOS, and tvOS apps. In the video, the author shows how design tokens and components can be translated into Swift UI code, illustrating the cross-platform applicability of design systems and the importance of understanding different programming languages for developers.

💡Jetpack Compose

Jetpack Compose is a modern toolkit for building native Android UI, which uses Kotlin. The video script mentions it as an example of how design systems can be adapted to different programming environments, emphasizing the need for developers to understand the structure and naming conventions used in design tools to implement designs accurately.

💡Component Variants

Component Variants refer to different states or versions of a UI component that can be used in various contexts. The video explains how Dev Mode in Figma allows developers to see the properties and options for creating component variants, which is essential for building a flexible and consistent user interface.

💡Playground

In the context of the video, Playground refers to an interactive environment within Figma where developers can experiment with and see the properties of design components. It is a tool that helps bridge the gap between design and development by allowing developers to understand and replicate design elements in code.

Highlights

Introduction to the concept of Dev mode and its importance in maintaining parity between design and code within a Design System.

Explanation of how developers view and interact with design components, emphasizing the need for clarity in coding practices.

Demonstration of navigating Atlassian's design system to understand the use of design tokens and naming conventions.

The significance of consistent naming conventions for tokens to facilitate understanding between designers and developers.

How to use the inspector panel in Google Chrome to examine and understand the CSS variables applied in a design.

The process of identifying and modifying CSS variables to ensure they align with design intentions and coding standards.

A comparison between the design tokens in Atlassian's system and those in Figma, highlighting the importance of consistency.

The role of Figma's Dev mode in helping designers understand the developer's perspective and ensuring accurate implementation.

How to use Figma's Dev mode to inspect component variants and their properties, ensuring they align with design specifications.

The impact of clear and concise variable names on reducing confusion and improving the efficiency of developers.

The demonstration of how to adjust Figma variables to avoid repetition and streamline the coding process.

How to utilize Figma's Dev mode to ensure that component properties are correctly represented in the codebase.

The benefits of using Dev mode for reducing miscommunication between designers and developers and enhancing collaboration.

The practical application of Dev mode in examining and understanding the structure and elements of a design system.

How engineers can use Dev mode to identify and implement the properties and settings of design components accurately.

The importance of thinking like a developer in the design process to ensure that the final product matches the original design.

Encouragement for viewers to engage with the content, subscribe to the channel, and look forward to future videos.

Transcripts

[Music]

foreign

[Music]

ERS and creatives hope you're all doing

well welcome to another video super

ultimate guide to Design Systems in this

video we're going to explore Dev mode

now that we have created two components

we have applied design tokens let's

actually understand how all of this

actually helps developers right because

there has to be really good parity

between design and code and if the

parity is not then there's no point of

having a Design Systems so in this video

I'm going to show you what do developers

actually look at what do they think and

how do they code and what you need to

know as a designer by looking at Dev

mode I'm not going to just show you the

features of devmod I'm going to explain

how Engineers are going to look at your

components and make sure that they do

things correctly so without any further

Ado let's get started now before I show

you Dev mode and figma I'm going to show

you something in atlassian's design

system now here I'm in the design tokens

section as you see over here I'm in the

examples page all right I'm going to

come down and I'm going to look at this

dialog box all right

now I'm going to come over here and look

at the text over here basically the code

over here now there is nothing to worry

over here you don't have to focus on

anything else just focus on this part so

basically what they're saying is that

they have three tokens as you can see

they have three tokens and just the way

we named our tokens in figma atlassin is

using a different naming convention it

doesn't really matter what the naming

convention is it can be anything you

want as long as you and your developers

can understand it it's just that you

need a token so here for the text which

is called Model dialog oops all right

they have a token called as color dot

text right and it is n 800 right that's

the reference value and we've called it

color text now they also got background

and Shadow tokens as well now I'm not

going to look into that right we're just

focusing on the color text now what I'm

going to do is I'm going to open Dev

mode in Chrome right we're going to look

at Dev mode and figma but here I'm going

to open devmod in Google Chrome and

that's basically called the inspector

panel so I'm going to right click and

say inspect okay and now I'm going to

zoom in here again okay and now I'm

going to find that text item I'm going

to click here okay now I've selected it

now if I come all the way down

here you can see the color value so if I

turn that off you can see that the color

changes okay and here the color value

VAR basically stands for variable okay

and hyphen hyphen DS hyphen text

so this is how it's actually going to

look in code now this is CSS now CSS is

used for building websites

for Designing mobile apps depending on

the language the way these are

structured will look different I'm going

to show you that in Dev mode right but

as you can see here it says hyphen

hyphen DS stands for design system and

they have text okay now

I'm going to come over here and click on

this button over here

and I can click on this one

and let's search for that color right so

what we can also do is I'm going to just

type in color over here and let's see if

we can find it over here so here

variable DS stands for design system

hyphen text hyphen inverse okay this is

how the naming convention is in the code

base right but here in this case if you

look at it and maybe we should look at

the one on top right here this is the

pretty this is pretty much the same

button

in design they called it color text

inverse but here it is DS text inverse

now it's fine that here it's color and

here is DS that's irrelevant but for the

majority you can see here it says text

inverse and text inverse

but what about the background you know

let's look at the background right I'm

going to click over here on the

background

and we're going to search for background

here we set color background selected

bold but here it says DS background

background brand bold right now there's

a little bit of a change now that's fine

ideally they should be the same but

atlassin is doing its own thing and

that's absolutely fine right but what

you need to understand here is this

naming convention DS hyphen background

hyphen brand bold right now let's go to

figma's Dev mode and see how it looks

for the components that we have made so

far

now here in figma let's turn on dev mode

and see how this looks for developers

and what is it that they actually want

and care about and how do you ensure

that you have done it correctly so that

Engineers will not make mistakes okay

so I'm going to turn on dev mode okay

now I'm going to come over here and

click on this we're going to focus on

this one right

uh yeah now the first thing it tells you

that this is a variant of the component

and if you click on let's say an

instance in this case it says it says

right that's fine

now here it also shows you the variable

for the various properties right this is

no right so this sign

it shows you uh all the paddings as well

what we care about is the colors because

that's what we added now we know that we

added if I maybe turn this off for a

second you can see that we added surface

primary okay

if I come over here and we are now in

CSS CSS is the language used to design

websites okay

here in the style you can see that the

code looks exactly same as how we saw it

in the browser

it's a background color

variable all right

surface surface primary all right now

here we are repeating the word surface

surface

right now that's again very confusing

now Engineers can actually see the

values right over here if you want if

you want to see the hex value you can

see all of that and you can see all that

information really clearly right but

here it says surface surface primary

okay

if I click on this okay we have a border

let's look at what the code looks for

the Border

here you can see that we have the Border

radius the Border information and now

the Border color variable right so the

border is one pixel it's a solid color

right but it has this variable which is

border border transparent static

which means that the word border is

being repeated here and we don't really

want that it should just be border

transparent static you know it should be

as simple as that

now let's look at another component

let's go to the navigation bar that we

created all right and I'm going to come

over here and click on this text all

right now here you can see

that this text actually we need to click

on the text value yeah we clicked

actually the text value right over here

here you can see all the values are here

the color is content content primary now

let's look at other programming

languages right so I'm going to click on

this which is the surface now we added

the surface primary which is the normal

one and I'm coming over here change it

from CSS to Swift UI now Swift UI is

used to design iOS apps right

you can come over here and you can see

in the variables section all right it

says surface surface primary and even

here in the background it says surface

surface primary now there's no hyphen

over here and that's just how the

programming language is structured if

you come here and use jetpack compose

which is basically used for Designing

Android apps it's called jetpack compose

but they just call it compose over here

here again it says color is equal to

variable dot surface surface primary

which means we are repeating the word

surface

so what it means is the reason it's

calling surface surface primary is

because that's how we set up the

structure in the figma variables what am

I talking about

if I come over here and open this up you

can see that it is actually capturing

surface surface primary

right that's the problem

so what that means is if I go ahead and

just call it primary

call it inverted call it static all

right and now when I click on this

it's now called surface hyphen primary

and if I come down here to Dev mode

and we can look at the CSS again

here it just says hyphen surface hyphen

primary which is exactly what we want

and this is super easy for engineers

because we're removing all those

unnecessary words right and even for us

designers all right if you look at the

figma variables this is a lot easy and

it's honestly quite fast to look at this

right or as we're repeating this word

content content content all the time and

it's becoming a big mess

so what I'm going to do is I'm going to

come over here and just remove all of

this unnecessary information I'm just

going to call it primary secondary

static

and brand

right and here this is going to be

transparent

static so we can actually look at that

right so let's come down here and we can

click on this button go to Dev mode and

here in the Border you can see here it

says border transparent static all right

and here for the text uh or yeah let's

click on the text we need to actually

double click here and more yeah so here

color content primary right

and apart from that when we created

these components what Engineers can do

is they can see all the properties right

now let's look at an instance right

let's take an instance of

um this right this one

so here they can open it up in

playground and they can actually see

what were all the properties that are

available and they will set this exact

same thing in their code base as well

right they can see what are the options

that are going to be here what are the

options that are going to be here and

they can see to create this instance or

this variant what are the settings right

and this is super easy for them to

actually build this in their code based

and this is again going to bring parity

between design and engineering and of

course not just that it's going to

reduce miscommunication right

and it's not just that it even shows you

what are the elements that are being

used you can see that it's using uh the

icon button component and it is also

using the tabs component right so here

you have the main you can click on this

to go to the main component so people so

that Engineers can go there if you click

on that you can see it takes you over

here and once you take it over here you

when Engineers are building this

component you know they can click and

check all their values and whatever it

is right and here again this is using

components as well so let's say they

want to see the active State they can

click on that if you want to come over

here and they're going to see all the

information

so that's how devmod helps you think

like a developer because it's really

important to understand how to think

like a developer and make sure that

developers life are also made much

easier because if you are able to help

developers they will be able to take

your design and build it exactly like

you have designed it right so that's

pretty much it for this video guys thank

you guys so much for watching hope you

guys really enjoyed it if you did let me

know in the comment sections down below

make sure to leave a like And subscribe

to the channel for more amazing awesome

content and I'll see you guys in my next

video so then take care and bye

thank you