How to THINK LIKE A DEVELOPER using Dev Mode in Figma!
Summary
TLDRIn 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
🖥️ 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.
🎨 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.
🔍 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.
Mindmap
Keywords
💡Design Systems
💡Dev Mode
💡Design Tokens
💡Parity
💡Naming Convention
💡Inspector Panel
💡CSS Variables
💡Swift UI
💡Jetpack Compose
💡Component Variants
💡Playground
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
Weitere ähnliche Videos ansehen
Figma Goes All In On Developers
Designer and developer workflows unlocked using Dev Mode - Jake A, Avantika G, Lauren A, Jenny L
Part #11: Analytic design & sensitivity analysis of V-type IPM motors
Flowbite Crash Course in 20 mins | Introduction to UI components using Tailwind CSS
Config 2024: How we redesigned Figma (KC Oh, Ryhan Hassan, & Joel Miller, Figma)
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 3
5.0 / 5 (0 votes)