Welcome to our YouTube video on "Figma Variables & Design Tokens: Elevate Your Designs and Collaboration!"
In this comprehensive guide, we'll take you on a journey through the powerful world of Figma variables and design tokens. Whether you're a seasoned designer or just starting your design journey, understanding and harnessing these tools will revolutionize the way you create and collaborate on design projects.
Say goodbye to repetitive design tasks and hello to efficiency! Figma variables allow you to create reusable components and styles, ensuring consistent and pixel-perfect designs throughout your projects. We'll show you how to set up and use variables effectively, so you can focus on what you do best – designing stunning user interfaces.
Content of this video:
1. What is design token
2. Importance of token
3. Types of token
4. How token Works
5. What can be token?
6. How to write a design token?
7. Token Studio
8. How Token Studio Works
9. Figma Variable
10. How Figma Variable Works
11. Style vs. Variables
12. Is Variable = Token?
13. Token Studio vs Figma Variables
14. Should I Use Variable in My Design?
15. Some Tips & Caution
16. Plugins
Welcome to the latest episode of our design series! In this presentation, we dive into the world of design systems in Figma. Whether you're a beginner or an advanced learner, you'll learn about the concepts and applications of design systems in this detailed tutorial. Tune in to get all the knowledge you need to start using design systems in your workflow. Thanks for watching!
In today's video, I showed & discussed one of the most anticipated topics! "Design System". Here I talked in detail about the concepts and applications.
In this episode, I showed & discussed one of the most anticipated topics! "Prototypes in Figma". Here I talked in detail about the concepts and applications for both beginners & advanced learners. Enjoy!
Slides for a few events i was lucky to give a talk this year. From my experiences of building a design system for the product team. Figma and storybook js are introduced.
The Design System is an essential part of today's UX world which provides agility and performance in the longer term. Atomic Design is a part of Design System for designers and developers to build the parts of a complete design.
Welcome to the latest episode of our design series! In this presentation, we dive into the world of design systems in Figma. Whether you're a beginner or an advanced learner, you'll learn about the concepts and applications of design systems in this detailed tutorial. Tune in to get all the knowledge you need to start using design systems in your workflow. Thanks for watching!
In today's video, I showed & discussed one of the most anticipated topics! "Design System". Here I talked in detail about the concepts and applications.
In this episode, I showed & discussed one of the most anticipated topics! "Prototypes in Figma". Here I talked in detail about the concepts and applications for both beginners & advanced learners. Enjoy!
Slides for a few events i was lucky to give a talk this year. From my experiences of building a design system for the product team. Figma and storybook js are introduced.
The Design System is an essential part of today's UX world which provides agility and performance in the longer term. Atomic Design is a part of Design System for designers and developers to build the parts of a complete design.
Design system presentation - How to sell it internallyEugene Kardash
Design System is a systematic approach to creating and maintaining consistent user interfaces, which coherently communicate the brand values and empower user experience.
This presentation's goal is to give an overview of the current state of design maturity at the company (here, at Herbalife Nutrition), to justify the necessity of having it, and to get buy-ins from decision makers.
A design system is a framework of practices that bring designers and products together. It is a platform to identify, and document what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy.
The role of design with enterprise organizations is expanding, spreading across product teams and influencing decision-making at higher and higher levels. This scale, paired with the array of devices, browsers, screen sizes, locales, and environments, makes it increasingly challenging to align designers and developers to deliver cohesive user experiences.
In this talk, I’ll discuss the lessons learned, the challenges faced, and best practices for creating and maintaining an effective interface design system.
What I Cover:
The Initial Challenge: Why I chose not to include UI designs.
Strategizing with Wireframes: How I leveraged wireframes to demonstrate my skills.
The Interview Process at Oter: A step-by-step walkthrough.
Key Learnings and Tips: What this experience taught me about the UI/UX industry.
Design systems: accounting for quality and scalabilityuxpin
You'll learn:
How Forumone builds and implements design systems for their clients
How to plan, create, sell, and implement a design system
How to use common design tools to build a design system developers will use
Jackson Lee, Joshua Tan, Jasmine Battu on September 29, 2023
✨Unlock Your Creative Potential with Figma! Get ready to dive into the world of UI/UX design with our exciting workshop in collaboration with the ICCIT Council.
Whether you're a complete beginner or already have some design experience, this event is tailored just for you!
This event will cover creating accessible user interfaces design using Figma, and basic user experience principles that are usually taught in upper-year CCIT courses.
No prior experience is required; our goal is to provide a welcoming environment for everyone to learn and grow. Don't miss out on this unique opportunity to enhance your UI/UX skills and connect with like-minded peers. Mark your calendar, invite your friends, and see you there! 👋
Drew has spent the better part of the last two years leading the charge on launching and managing the global design system at AIG. Learn some of the battle-tested tips, tricks, and methods gained during the process including how to:
- Manage contribution and intake
- Manage “snowflake” vs system components
- Support multiple brands with a single system
- Track and measure the ROI of your system
- Perpetuate buy-in
Bio
Drew Burdick is a multi-faceted design leader with over a decade of experience. He founded and led a creative agency, led top accounts at Red Ventures, and most recently helped to transform product design at AIG by leading a team to establish their global design system. He is now a leader with the Experience Design practice at Slalom, helping to drive client engagements in the Charlotte market.
Building a Design System: A Practitioner's Case Studyuxpin
- How to build a design system from scratch
- How to audit your product for design consistency
- How to structure and communicate a design system to an Agile team
An overview about what UX design is, for a mixture of tech, support and business people (tough mix!).
There are two main points I wanted to get across: 1. UX design is not just about usabllity (and Jakob Nielsen) 2. UX design is a rigorous process (not magic and guesswork).
If you have any feedback about how to make this presentation better, I'd be happy to hear it.
A design system can vastly improve your team's productivity, but most of all, it leads to better products! The challenge lies in creating a mature system and leading its adoption across the company successfully. Let's talk about how we learned to meet the needs of different designers and developers on different products, on different tech stacks, on different platforms. Attendees will go home with tips they can use to improve design systems of any stage.
The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan.
Link of the event: https://bit.ly/2RwN4RF
The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi.
This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.
UI design becomes increasingly important for products and services. Influencing their users' expierence. UX itself determines the value of digital offerings and is their key differentiator. But "historically grown" incoherent interfaces deteriorate value and brand of products and services.
This talk is about design systems, that help to avoid (or overcome) design dept and to enable scaling UX across platforms, products and devices. Modularity and standardisation of repeatedly used aspects helps speeding up processes and increasing business value. Design systems help making user experience tangible to teams and brand values actionable.
In this talk we’ll uncover our journey in creating a Design System for Skyscanner and share our learnings on how we sold it to the business by proving its worth. We’ll talk through some of the design and tech considerations we’ve made and share the tools and techniques which have helped us along the way.
Building a design system requires your product teams to communicate and work closely together. Design tokens allow them to better collaborate and ensure brand consistency across any platform. What are they? What role do they play in a design system? And how can you start using them today?
Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015
Reports are in from Twitter, Medium, and the like; we can’t make full comps, use Photoshop, or even utter the phrase 'visual design' anymore. What’s a designer to do? Has our role evaporated? Fear not! Dan Mall will help redefine the tasks of the modern day designer in light of the multi -device world that snuck up on us.
Evolving your Design System: People, Product, and Processuxpin
You'll learn:
How to create and maintain a design system over several years
How people, process, and product change alongside a design system
Lessons learned from growing the Linkedin design system
Design system presentation - How to sell it internallyEugene Kardash
Design System is a systematic approach to creating and maintaining consistent user interfaces, which coherently communicate the brand values and empower user experience.
This presentation's goal is to give an overview of the current state of design maturity at the company (here, at Herbalife Nutrition), to justify the necessity of having it, and to get buy-ins from decision makers.
A design system is a framework of practices that bring designers and products together. It is a platform to identify, and document what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy.
The role of design with enterprise organizations is expanding, spreading across product teams and influencing decision-making at higher and higher levels. This scale, paired with the array of devices, browsers, screen sizes, locales, and environments, makes it increasingly challenging to align designers and developers to deliver cohesive user experiences.
In this talk, I’ll discuss the lessons learned, the challenges faced, and best practices for creating and maintaining an effective interface design system.
What I Cover:
The Initial Challenge: Why I chose not to include UI designs.
Strategizing with Wireframes: How I leveraged wireframes to demonstrate my skills.
The Interview Process at Oter: A step-by-step walkthrough.
Key Learnings and Tips: What this experience taught me about the UI/UX industry.
Design systems: accounting for quality and scalabilityuxpin
You'll learn:
How Forumone builds and implements design systems for their clients
How to plan, create, sell, and implement a design system
How to use common design tools to build a design system developers will use
Jackson Lee, Joshua Tan, Jasmine Battu on September 29, 2023
✨Unlock Your Creative Potential with Figma! Get ready to dive into the world of UI/UX design with our exciting workshop in collaboration with the ICCIT Council.
Whether you're a complete beginner or already have some design experience, this event is tailored just for you!
This event will cover creating accessible user interfaces design using Figma, and basic user experience principles that are usually taught in upper-year CCIT courses.
No prior experience is required; our goal is to provide a welcoming environment for everyone to learn and grow. Don't miss out on this unique opportunity to enhance your UI/UX skills and connect with like-minded peers. Mark your calendar, invite your friends, and see you there! 👋
Drew has spent the better part of the last two years leading the charge on launching and managing the global design system at AIG. Learn some of the battle-tested tips, tricks, and methods gained during the process including how to:
- Manage contribution and intake
- Manage “snowflake” vs system components
- Support multiple brands with a single system
- Track and measure the ROI of your system
- Perpetuate buy-in
Bio
Drew Burdick is a multi-faceted design leader with over a decade of experience. He founded and led a creative agency, led top accounts at Red Ventures, and most recently helped to transform product design at AIG by leading a team to establish their global design system. He is now a leader with the Experience Design practice at Slalom, helping to drive client engagements in the Charlotte market.
Building a Design System: A Practitioner's Case Studyuxpin
- How to build a design system from scratch
- How to audit your product for design consistency
- How to structure and communicate a design system to an Agile team
An overview about what UX design is, for a mixture of tech, support and business people (tough mix!).
There are two main points I wanted to get across: 1. UX design is not just about usabllity (and Jakob Nielsen) 2. UX design is a rigorous process (not magic and guesswork).
If you have any feedback about how to make this presentation better, I'd be happy to hear it.
A design system can vastly improve your team's productivity, but most of all, it leads to better products! The challenge lies in creating a mature system and leading its adoption across the company successfully. Let's talk about how we learned to meet the needs of different designers and developers on different products, on different tech stacks, on different platforms. Attendees will go home with tips they can use to improve design systems of any stage.
The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan.
Link of the event: https://bit.ly/2RwN4RF
The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi.
This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.
UI design becomes increasingly important for products and services. Influencing their users' expierence. UX itself determines the value of digital offerings and is their key differentiator. But "historically grown" incoherent interfaces deteriorate value and brand of products and services.
This talk is about design systems, that help to avoid (or overcome) design dept and to enable scaling UX across platforms, products and devices. Modularity and standardisation of repeatedly used aspects helps speeding up processes and increasing business value. Design systems help making user experience tangible to teams and brand values actionable.
In this talk we’ll uncover our journey in creating a Design System for Skyscanner and share our learnings on how we sold it to the business by proving its worth. We’ll talk through some of the design and tech considerations we’ve made and share the tools and techniques which have helped us along the way.
Building a design system requires your product teams to communicate and work closely together. Design tokens allow them to better collaborate and ensure brand consistency across any platform. What are they? What role do they play in a design system? And how can you start using them today?
Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015
Reports are in from Twitter, Medium, and the like; we can’t make full comps, use Photoshop, or even utter the phrase 'visual design' anymore. What’s a designer to do? Has our role evaporated? Fear not! Dan Mall will help redefine the tasks of the modern day designer in light of the multi -device world that snuck up on us.
Evolving your Design System: People, Product, and Processuxpin
You'll learn:
How to create and maintain a design system over several years
How people, process, and product change alongside a design system
Lessons learned from growing the Linkedin design system
These slides are from a presentation given at 360|Flex covering ways of customizing your Adobe Flex application. For more information on the topic, check out the book at http://www.cveflex.com
Designing Optimized Symbols for InduSoft Web Studio ProjectsAVEVA
Because InduSoft Web Studio allows you to easily develop applications for mobile devices and embedded systems it’s easy to get lost in the rich feature set and develop symbols that are not optimized for the entire range of systems the application will be deployed to. In this webinar, we’d like to give InduSoft Web Studio users a guide to developing symbols that can be easily resized or easily optimized for deployment to mobile devices and embedded computers.
Are you responsible for developing satellite on-board software? Are you the Dutch government and you have to efficiently implement the public benefits law? Are you a healthcare startup, developing companion apps that help patients through a treatment? Are you an insurance company struggling to create new, and evolve existing products quickly to keep up with the market? These are all examples of organisations who have built their own domain-specific programming language to streamline the development of applications that have a non-trivial algorithmic core. All have built their languages with Jetbrains MPS, an open source language development tool optimized for ecosystems of collaborating languages with mixed graphical, textual, tabular and mathematical notations. This talk has four parts. I start by motivating the need for DSLs based on real-world examples, including the ones above. I will then present a few high-level design practices that guide our language development work. Third, I will develop a simple language extension to give you a feel for how MPS works. And finally, I will point you to things you can read to get you started with your own language development practice.
This is the block and vocabulary deck that captures the keywords used during the introductory lesson for the CodeTigers/STEM Impressionists' live stream "Starting with Scratch - Introduction to Scratch" lesson. YouTube class link: https://www.youtube.com/watch?v=oZdKo3e4sOo&list=PLojHYcMFUgmqESfusKm5olQqP3WBpvMsZ&index=1&t=190s
The importance to be Driven
There are many buzzwords and acronyms to describe how the software should be designed. TDD (Test Driven), BDD (Behaviour Driven), DDD (Domain Driven) are the most well known. In this speech we'll run thought all these techniques comparing each one of those with TDD and finding what are the common concepts. An exercise will show to the students how different the code will be using different design methodologies as driver.
What are chatbots and how are they built? How conversational applications combine machine learning, knowledge and engineering? What are challenges in real world enterprise implementations? How to analyze such systems
Faq for My Design Suite which is the tool to customize your Uppercase Living expressions and embellishments. This document also includes examples of all available vinyl colours and fonts (from A-Z and numbers etc.in lower case as well as uppercase form).
There is certain topic discussed in every company: communication between departments.
As FE developers, we sit in between UX designers and BE developers.
Our apps must follow the guidelines from the UX, be compatible with the BE APIs while meeting the business requirements from our POs.
In this presentation I am addressing the relationship between UX and FE devs.
One way to collaborate better with our UX colleagues is to… learn a bit of UX and maybe share some Front End knowledge with them too.
This overview details the UI/UX design process at our company, Propeller Labs. We pride ourselves on partnering with leading companies to create digital solutions. Innovative design, through effective process, has positioned us to become a leading partner in building digital products.
Quick intro to Material Design followed by Branding do's and dont's, and some examples of apps successfully communicating their brand using Material Design.
This talk was given at App Builders 2016.
Similar to Design Token & Figma Variables.pdf (20)
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
4. Topics we will cover
What is design toke
Importance of toke
Types of toke
How token Work
What can be token
How to write a design token
Token Studi
How Token Studio Work
Figma Variabl
How Figma Variable Work
Style vs. Variable
Is Variable = Token
Token Studio vs Figma Variable
Should I Use Variable in My Design
Some Tips & Cautio
Plugins
About this
Session
5. Invention of Design Token
In 2014,
Salesforce
designer
introduced
the concept of
a ‘design
token’
Jina Anne
6. Whatis
token
Design tokens are design
decisions, translated into data.
They’re ultimately a
communication tool: a shared
language between design and
engineering for communicating
detailed information about how
to build user interfaces
11. DesignSystemvsDesignTokens
Design System
A collection of components,
patterns, and guideline
To define the visual style and
behavior of a produc
Provides a single source of truth
for design decisions, makes it easy
to make changes to the design
system, and helps to ensure
consistency across a produc
For designers
Design Token
A small, reusable piece of dat
To create consistent and reusable
component
Makes it easy to create consistent
and reusable components, and helps
to make changes to the design
system without having to update
every instance of a componen
For tech team
12. Importance
ofToken
Unique source of truth for
your brandin
Better translation from
design to developmen
Design consistency across any
product U
Improved management of your
design syste
Easier management of themes
and white-labelling feature
Proper methodology to
collaborate between teams
14. Ah! There are 3 types of token
1. Global Tokens
2. Alias Token
3. Component Specific Token
Types of
Token
15. 1.GlobalToken
Global tokens are the primitive
values in our design language,
represented by context-agnostic
names. Our color palette,
animation, typography, and
dimension values are all
recorded as global tokens.
Global tokens are easy to
reference and are the building
blocks of Spectrum
16. Use Cases of Global Tokens
Global tokens are used indipendently
when there are no available aliases
for your use case. They’re also the
least tied to the logic of our design
language.
17. AliasToken
Alias tokens relate to a
specific context or abstraction.
Aliases help communicate the
intended purpose of a token, and
are effective when a value with
a single intent will appear in
multiple places.
18. Use Cases of Alias Tokens
Alias tokens are the recommended type
to use when building your product
with design tokens. They’re a shared
language for understanding Spectrum,
and they help to associate meaning,
context, and intent to the design
tokens you’re applying to your
product
19. 3.Component
SpecificToken
Component-specific tokens are an
exhaustive representation of
every value associated with a
component. They often inherit
from alias tokens, but are named
in a way that allows engineering
teams to be as specific as
possible in applying tokens in
component development
20. UseCasesofComponentTokens
Component Specific Tokens ensures
that as a component’s design evolves,
you won’t have to retrace any higher-
level design decisions that informed
the updates.
It’s not recommended to use
component-specific tokens
interchangeably with other
components, unless one is derivative
of the other.
32. Styles vs Variables
Styles
Can store a collection of value
Can’t be aliase
Can’t be used to create different
versions of design
Can express complex visual
Useful for small visually
expressive product
Variables
Can store only single valu
Can be aliase
Can be used to create different
versions of design
Can express linear visual
Useful for long term product that
comes with theming, responsive
sizes, prototypes
33. Token Studio vs Figma Variables
Token Studio
Mature enoug
Not native
Monthly subscriptio
Offer syncing with github, expor
Not for prototype
Figma Variables
Half backe
Native
Free!
No dev side yet! (Code Syntax is
coming)
Prototype opportunity
34. Unfortunately.....Notyet!
Where is font token!
Opacity, Effect token are
missing
Token doesn’t care about
prototyp
No basic math operations in
referring token
Is
Variable=
Token?
38. Some Tips &
Caution
Create & Use design tokens
with names and descriptions
that fit your specific
situation
Use a consistent naming
conventio
Document your token
Test your tokens thoroughly.
39. To ease your works with variable
Styles to Variable
Variables Import Expor
Variables Inspector
Figma
Variables
Plugins
