This document discusses design tokens, which are reusable values that define visual design properties like colors, spacing, typography, and more. Design tokens allow maintaining a consistent and scalable design system across products by keeping these values in a single source of truth. The document provides examples of design tokens from Google's Material UI and Duet Design System and explains how tools like Style Dictionary and Stratos Tokens can be used to generate code from design tokens to implement styles in apps and export token values from design apps to code.
Bring to life best-in-class vector graphics with next-generation features from CorelDRAW®, available from Insight.
Learn more: http://ms.spr.ly/6002Tv2Mk
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.
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.
Design Systems have reached peak popularity. It seems that every design team has either built one, is building one, or wants to build one. With the release of the incredible Nested Symbols feature followed by Sketch Libraries just a few months ago, Sketch has emerged as an essential part of the Design System workflow.
In this talk we will be covering:
• Best of breed Design Systems out in the wild
• Demo of the Design System from FathomHQ
• Exploring essential Sketch plugins & tools for a seamless workflow
• Handy hacks for getting your Design System project rolling
• Roll out strategies for Design Systems
About Laura
Laura is a Senior Product Designer at Fathom, a B2B SaaS product in the fintech domain. Over the last nine years, she has worked her way through design and UX roles in a variety of environments, from small agencies to corporate giants. Her experience includes creating digital solutions for travel, government, SaaS, health, fintech, real estate and ecommerce. Laura has a natural curiosity for solving 'people problems’, which makes her a passionate advocate for unravelling complexity, measuring UX, and crafting design systems.
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.
As a PO, product designer, or PM, you've probably already thought about the possible benefits of building a design system for your organisation. And surely as all teams, like us, you kept asking yourself:
How do we start it?
But here are some guidelines to help you clarify how to start a DS.
Bring to life best-in-class vector graphics with next-generation features from CorelDRAW®, available from Insight.
Learn more: http://ms.spr.ly/6002Tv2Mk
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.
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.
Design Systems have reached peak popularity. It seems that every design team has either built one, is building one, or wants to build one. With the release of the incredible Nested Symbols feature followed by Sketch Libraries just a few months ago, Sketch has emerged as an essential part of the Design System workflow.
In this talk we will be covering:
• Best of breed Design Systems out in the wild
• Demo of the Design System from FathomHQ
• Exploring essential Sketch plugins & tools for a seamless workflow
• Handy hacks for getting your Design System project rolling
• Roll out strategies for Design Systems
About Laura
Laura is a Senior Product Designer at Fathom, a B2B SaaS product in the fintech domain. Over the last nine years, she has worked her way through design and UX roles in a variety of environments, from small agencies to corporate giants. Her experience includes creating digital solutions for travel, government, SaaS, health, fintech, real estate and ecommerce. Laura has a natural curiosity for solving 'people problems’, which makes her a passionate advocate for unravelling complexity, measuring UX, and crafting design systems.
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.
As a PO, product designer, or PM, you've probably already thought about the possible benefits of building a design system for your organisation. And surely as all teams, like us, you kept asking yourself:
How do we start it?
But here are some guidelines to help you clarify how to start a DS.
Solvion Trendwerkstatt - Microsoft Azure + BotsHolzerKerstin
In der Solvion Trendwerkstatt erfahren die Teilnehmer alle Trends rund um Microsoft Azure, Artikficial Intelligence und Bots. Microsoft MVP Stephan Bisser leitet durch den Workshop.
Smart Web Apps with Azure and AI as a ServiceIvo Andreev
Smart homes, smart phones, even smart stones… Today users expect everything to be smart and web sites to be tailored to their needs, and intelligent enough to serve within less taps. The huge advancements in machine learning and big data in recent years made that possible. One of the most complete and advanced services that is a step in front of the competition, and allows developers to add AI to their products, is Azure Cognitive Services. This session will be about how computer vision, natural language processing, speech and intent recognition could allow building smart apps with enhanced experience and be more engaging, personal and relevant.
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
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.
Timeless TechComm Tips - STC New England Interchange Keynote 2020Ed Marsh
This is the keynote presentation for the STC New England Chapter Interchange Conference. It discusses ways for technical communicators to add value and celebrate the victories.
Bots are the New Apps: Building Bots with ASP.NET WebAPI & Language Understan...Nick Landry
Bots (or conversation agents) are rapidly becoming an integral part of your users’ digital experience – they are as vital a way for users to interact with a service or application as is a web site or a mobile experience. Developers writing bots all face the same problems: bots require basic I/O; they must have language and dialog skills; and they must connect to users – preferably in any conversation experience and language the user chooses. In this session, you will learn how to build and connect intelligent bots to interact with your users naturally wherever they are, from text/sms to Skype, Slack, Facebook, e-mail and other popular services. We will explore the Microsoft Bot Framework, which provides just what you need to build and connect intelligent bots that interact naturally wherever your users are talking. Through live demos, we’ll cover the Bot Connector in the cloud, the open source Bot Build SDK with ASP.NET WebAPI & C# (Node.js is also supported) and we’ll also explore how to handle natural language input from the user with the Language Understanding Intelligent Service (LUIS) from Microsoft Cognitive Services. Every business needs bots to provide a more personal experience to its users and customers. Come learn how you can build your own bots in just a few hours.
Scaling design: When and why to build a design system, ClickSoftware’s case s...Ofir Rushinek
As the organization grows and more designers, developers and product managers are joining the team, the communication becomes a bit of a challenge. Design system is one of the most effective tools for providing consistency, scalability and basically bridging the communication gap in an agile environment. This presentation provides an extensive view of the design system benefits.
Slides from my 2013 Breaking Development conference workshop. We explore the tools and techniques behind building your own icon fonts, covering the entire process from sketching icon concepts to properly deploying your font. Topics cover include: designing icons, considerations for designing font glyphs, setting up Illustrator templates, working with Glyphs, exporting fonts, creating web fonts, and using icon fonts semantically.
In this short presentation I have tried to cover Google Provided Material Design guideline. As we are directly involved with Google glass development, I also covered Google Glass design principles for my team mates.
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
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
Implementing a Design System in a Small Team by SnapTravelProduct School
This session will provide a blueprint for how a team of 2 Designers and 3 Frontend engineers can work together, in a lean way, to build and implement a design system within 6 months while still working on other important company initiatives/features.
This 7-second Brain Wave Ritual Attracts Money To You.!nirahealhty
Discover the power of a simple 7-second brain wave ritual that can attract wealth and abundance into your life. By tapping into specific brain frequencies, this technique helps you manifest financial success effortlessly. Ready to transform your financial future? Try this powerful ritual and start attracting money today!
Solvion Trendwerkstatt - Microsoft Azure + BotsHolzerKerstin
In der Solvion Trendwerkstatt erfahren die Teilnehmer alle Trends rund um Microsoft Azure, Artikficial Intelligence und Bots. Microsoft MVP Stephan Bisser leitet durch den Workshop.
Smart Web Apps with Azure and AI as a ServiceIvo Andreev
Smart homes, smart phones, even smart stones… Today users expect everything to be smart and web sites to be tailored to their needs, and intelligent enough to serve within less taps. The huge advancements in machine learning and big data in recent years made that possible. One of the most complete and advanced services that is a step in front of the competition, and allows developers to add AI to their products, is Azure Cognitive Services. This session will be about how computer vision, natural language processing, speech and intent recognition could allow building smart apps with enhanced experience and be more engaging, personal and relevant.
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
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.
Timeless TechComm Tips - STC New England Interchange Keynote 2020Ed Marsh
This is the keynote presentation for the STC New England Chapter Interchange Conference. It discusses ways for technical communicators to add value and celebrate the victories.
Bots are the New Apps: Building Bots with ASP.NET WebAPI & Language Understan...Nick Landry
Bots (or conversation agents) are rapidly becoming an integral part of your users’ digital experience – they are as vital a way for users to interact with a service or application as is a web site or a mobile experience. Developers writing bots all face the same problems: bots require basic I/O; they must have language and dialog skills; and they must connect to users – preferably in any conversation experience and language the user chooses. In this session, you will learn how to build and connect intelligent bots to interact with your users naturally wherever they are, from text/sms to Skype, Slack, Facebook, e-mail and other popular services. We will explore the Microsoft Bot Framework, which provides just what you need to build and connect intelligent bots that interact naturally wherever your users are talking. Through live demos, we’ll cover the Bot Connector in the cloud, the open source Bot Build SDK with ASP.NET WebAPI & C# (Node.js is also supported) and we’ll also explore how to handle natural language input from the user with the Language Understanding Intelligent Service (LUIS) from Microsoft Cognitive Services. Every business needs bots to provide a more personal experience to its users and customers. Come learn how you can build your own bots in just a few hours.
Scaling design: When and why to build a design system, ClickSoftware’s case s...Ofir Rushinek
As the organization grows and more designers, developers and product managers are joining the team, the communication becomes a bit of a challenge. Design system is one of the most effective tools for providing consistency, scalability and basically bridging the communication gap in an agile environment. This presentation provides an extensive view of the design system benefits.
Slides from my 2013 Breaking Development conference workshop. We explore the tools and techniques behind building your own icon fonts, covering the entire process from sketching icon concepts to properly deploying your font. Topics cover include: designing icons, considerations for designing font glyphs, setting up Illustrator templates, working with Glyphs, exporting fonts, creating web fonts, and using icon fonts semantically.
In this short presentation I have tried to cover Google Provided Material Design guideline. As we are directly involved with Google glass development, I also covered Google Glass design principles for my team mates.
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
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
Implementing a Design System in a Small Team by SnapTravelProduct School
This session will provide a blueprint for how a team of 2 Designers and 3 Frontend engineers can work together, in a lean way, to build and implement a design system within 6 months while still working on other important company initiatives/features.
This 7-second Brain Wave Ritual Attracts Money To You.!nirahealhty
Discover the power of a simple 7-second brain wave ritual that can attract wealth and abundance into your life. By tapping into specific brain frequencies, this technique helps you manifest financial success effortlessly. Ready to transform your financial future? Try this powerful ritual and start attracting money today!
1.Wireless Communication System_Wireless communication is a broad term that i...JeyaPerumal1
Wireless communication involves the transmission of information over a distance without the help of wires, cables or any other forms of electrical conductors.
Wireless communication is a broad term that incorporates all procedures and forms of connecting and communicating between two or more devices using a wireless signal through wireless communication technologies and devices.
Features of Wireless Communication
The evolution of wireless technology has brought many advancements with its effective features.
The transmitted distance can be anywhere between a few meters (for example, a television's remote control) and thousands of kilometers (for example, radio communication).
Wireless communication can be used for cellular telephony, wireless access to the internet, wireless home networking, and so on.
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesSanjeev Rampal
Talk presented at Kubernetes Community Day, New York, May 2024.
Technical summary of Multi-Cluster Kubernetes Networking architectures with focus on 4 key topics.
1) Key patterns for Multi-cluster architectures
2) Architectural comparison of several OSS/ CNCF projects to address these patterns
3) Evolution trends for the APIs of these projects
4) Some design recommendations & guidelines for adopting/ deploying these solutions.
ER(Entity Relationship) Diagram for online shopping - TAEHimani415946
https://bit.ly/3KACoyV
The ER diagram for the project is the foundation for the building of the database of the project. The properties, datatypes, and attributes are defined by the ER diagram.
2. ”In the world of UI,
design tokens are
subatomic particles.”
Brad Frost, Atomic Design
3.
4. ”With design tokens, you can capture
low-level values and then use them to
create the styles for your product or app.
You can maintain a scalable and
consistent visual system for UI
development.”
Jina Anne, Salesforce
5. ”The themes are always
changing, but the tokens
stay the same”
Kyle Gach, CA Technologies
12. Colors, Typography, Effects,
Border Radius, Spacing, Animation
Timing
Line height, Z-index, Opacity,
Transition, Media Query
Duet Design System
Basic Design Tokens
13. Design Tokens beyond colors,
typography, and spacing.
”From a purely technical point of
view, design tokens are organised
lists of key-value pairs that
describe design decisions. So it’s
just a matter of convenience (and
context) what are the boundaries
that we assume when describing a
UI via design tokens.”
Advanced Design Tokens
14. Why use design tokens?
”It holds the definitions of styles”
”Styles should be in a single source of
truth”
Style Dictionary Presentation
15. Team Sketch2React
We develop design system tooling
Fredrik Ward Juan Maguid
sketch2react.io
Product Design
App Development
Words & Tutorials
Documentation
Support & Community
Product Design
Web Design
Words & Tutorials
Marketing & Sales
Support & Community
