SlideShare a Scribd company logo

Design System in Figma A to Z.pdf

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!

1 of 16
Download to read offline
Design System in
Figma A to Z
Free Live Session
Presented by
Atiqur Rahaman
Topics we will cover
Prologu
Issues of Using DS
Basic Understanding of Figma
Librar
Library Structure
Building Guideline
Prologue Again
Building Component
Let’s Build a U
Plugin Storie
Some tips & cautio
FAQ
About this

Session
Please watch
this before
starting!
This will help to understand the
basic context better
Issues of
Using DSM
Library managemen
What should be under
component
Creative blocks
There are 2 types of library
1. Local Library
Dedicated to that desig
Update is applied instantly to the
instances
2. Remote Library
Generic use case
Required update from the library
Basic
Understanding
of Figma
Library
Visual Structures
DSM File
Structuring

(Sample A)
Too many layer
Not feasible for multiple
platform
Library Management

Recommended

Scopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdfAtiqur Rahaman
 
Figma Prototype A to Z.pdf
Figma Prototype A to Z.pdfFigma Prototype A to Z.pdf
Figma Prototype A to Z.pdfAtiqur Rahaman
 
Design Token & Figma Variables.pdf
Design Token & Figma Variables.pdfDesign Token & Figma Variables.pdf
Design Token & Figma Variables.pdfAtiqur Rahaman
 
Tutubi Design Assigments.pdf
Tutubi Design Assigments.pdfTutubi Design Assigments.pdf
Tutubi Design Assigments.pdfAtiqur Rahaman
 
Understanding Design Tokens, from UX tool to production - Débora Barreto Orne...
Understanding Design Tokens, from UX tool to production - Débora Barreto Orne...Understanding Design Tokens, from UX tool to production - Débora Barreto Orne...
Understanding Design Tokens, from UX tool to production - Débora Barreto Orne...Wey Wey Web
 
Figma Meetup - Introduction
Figma Meetup - IntroductionFigma Meetup - Introduction
Figma Meetup - IntroductionVeronica Fasulo
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Designeggcellent
 

More Related Content

What's hot

UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX Murali Krishna
 
Design Tokens For Dummies
Design Tokens For DummiesDesign Tokens For Dummies
Design Tokens For DummiesLouis Chenais
 
Figma design tool - an alternative for windows users
Figma design tool - an alternative for windows usersFigma design tool - an alternative for windows users
Figma design tool - an alternative for windows usersAugustina Reipšlėger
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini CourseDigital Snack
 
Adobe Animate CC Classroom In A Book
Adobe Animate CC Classroom In A BookAdobe Animate CC Classroom In A Book
Adobe Animate CC Classroom In A BookLori Mitchell
 
Introduction to UI/UX with Figma
Introduction to UI/UX with FigmaIntroduction to UI/UX with Figma
Introduction to UI/UX with FigmaPRIYATHAMDARISI
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and PrinciplesPeeyush Sahu CAPM®
 
How UI Framework improves design process - 2015 (Dribbble meetup)
How UI Framework improves design process - 2015  (Dribbble meetup)How UI Framework improves design process - 2015  (Dribbble meetup)
How UI Framework improves design process - 2015 (Dribbble meetup)Marian Mota
 
쏘카프레임 구축 배경과 과정
 쏘카프레임 구축 배경과 과정 쏘카프레임 구축 배경과 과정
쏘카프레임 구축 배경과 과정NAVER Engineering
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaRoshan Karunarathna
 
How to Integrate UX and Agile
How to Integrate UX and AgileHow to Integrate UX and Agile
How to Integrate UX and AgileUserZoom
 

What's hot (20)

UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
 
Design Tokens For Dummies
Design Tokens For DummiesDesign Tokens For Dummies
Design Tokens For Dummies
 
Figma design tool - an alternative for windows users
Figma design tool - an alternative for windows usersFigma design tool - an alternative for windows users
Figma design tool - an alternative for windows users
 
Figma.pptx
Figma.pptxFigma.pptx
Figma.pptx
 
Prototyping in Figma
Prototyping in FigmaPrototyping in Figma
Prototyping in Figma
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
Wireframe
WireframeWireframe
Wireframe
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini Course
 
Ux design
Ux designUx design
Ux design
 
Ux & ui
Ux & uiUx & ui
Ux & ui
 
Adobe Animate CC Classroom In A Book
Adobe Animate CC Classroom In A BookAdobe Animate CC Classroom In A Book
Adobe Animate CC Classroom In A Book
 
Design System
Design SystemDesign System
Design System
 
Introduction to UI/UX with Figma
Introduction to UI/UX with FigmaIntroduction to UI/UX with Figma
Introduction to UI/UX with Figma
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
 
UI/UX Design in Agile process
UI/UX Design in Agile process  UI/UX Design in Agile process
UI/UX Design in Agile process
 
How UI Framework improves design process - 2015 (Dribbble meetup)
How UI Framework improves design process - 2015  (Dribbble meetup)How UI Framework improves design process - 2015  (Dribbble meetup)
How UI Framework improves design process - 2015 (Dribbble meetup)
 
쏘카프레임 구축 배경과 과정
 쏘카프레임 구축 배경과 과정 쏘카프레임 구축 배경과 과정
쏘카프레임 구축 배경과 과정
 
Atomic design
Atomic designAtomic design
Atomic design
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
 
How to Integrate UX and Agile
How to Integrate UX and AgileHow to Integrate UX and Agile
How to Integrate UX and Agile
 

Similar to Design System in Figma A to Z.pdf

IntelliJ IDEA Architecture and Performance
IntelliJ IDEA Architecture and PerformanceIntelliJ IDEA Architecture and Performance
IntelliJ IDEA Architecture and Performanceintelliyole
 
Strategies and Tools for Model Reuse with Capella
Strategies and Tools for Model Reuse with CapellaStrategies and Tools for Model Reuse with Capella
Strategies and Tools for Model Reuse with CapellaObeo
 
Introduction to Software Build Technology
Introduction to Software Build TechnologyIntroduction to Software Build Technology
Introduction to Software Build TechnologyPhilip Johnson
 
Exploring Android Studio
Exploring Android StudioExploring Android Studio
Exploring Android StudioAkshay Chordiya
 
Don't Get Lost on the Cutting Room Floor: Organizing Your Assets for Content ...
Don't Get Lost on the Cutting Room Floor: Organizing Your Assets for Content ...Don't Get Lost on the Cutting Room Floor: Organizing Your Assets for Content ...
Don't Get Lost on the Cutting Room Floor: Organizing Your Assets for Content ...See3 Communications
 
Expanding XPages with Bootstrap Plugins for Ultimate Usability
Expanding XPages with Bootstrap Plugins for Ultimate UsabilityExpanding XPages with Bootstrap Plugins for Ultimate Usability
Expanding XPages with Bootstrap Plugins for Ultimate UsabilityTeamstudio
 
Top tips from what we've learned from our 10 years experience
Top tips from what we've learned from our 10 years experienceTop tips from what we've learned from our 10 years experience
Top tips from what we've learned from our 10 years experienceJoomlaDay Australia
 
Chicago Code Camp 2014 TFS Care and Feeding
Chicago Code Camp 2014   TFS Care and FeedingChicago Code Camp 2014   TFS Care and Feeding
Chicago Code Camp 2014 TFS Care and FeedingAngela Dugan
 
Migraine Drupal - syncing your staging and live sites
Migraine Drupal - syncing your staging and live sitesMigraine Drupal - syncing your staging and live sites
Migraine Drupal - syncing your staging and live sitesdrupalindia
 
Get the best out of Bootstrap with Bootstrap4XPages - Engage 2014
Get the best out of Bootstrap with Bootstrap4XPages - Engage 2014Get the best out of Bootstrap with Bootstrap4XPages - Engage 2014
Get the best out of Bootstrap with Bootstrap4XPages - Engage 2014Mark Leusink
 
Hosting Drupal on Amazon EC2
Hosting Drupal on Amazon EC2Hosting Drupal on Amazon EC2
Hosting Drupal on Amazon EC2Kornel Lugosi
 
Library System Implementation with JavaFx
Library System Implementation with JavaFxLibrary System Implementation with JavaFx
Library System Implementation with JavaFxJivan Nepali
 
Reproducibility in artificial intelligence
Reproducibility in artificial intelligenceReproducibility in artificial intelligence
Reproducibility in artificial intelligenceCarlos Toxtli
 
Performant Django - Ara Anjargolian
Performant Django - Ara AnjargolianPerformant Django - Ara Anjargolian
Performant Django - Ara AnjargolianHakka Labs
 
fuelOrigin.docx
fuelOrigin.docxfuelOrigin.docx
fuelOrigin.docxKanhaJi5
 
Jared Whitlock Open Source In The Enterprise Plone @ Novell
Jared Whitlock   Open Source In The Enterprise    Plone @ NovellJared Whitlock   Open Source In The Enterprise    Plone @ Novell
Jared Whitlock Open Source In The Enterprise Plone @ NovellVincenzo Barone
 
C++ Introduction brown bag
C++ Introduction brown bagC++ Introduction brown bag
C++ Introduction brown bagJacob Green
 
Clustered PHP - DC PHP 2009
Clustered PHP - DC PHP 2009Clustered PHP - DC PHP 2009
Clustered PHP - DC PHP 2009marcelesser
 
Extension Library - Viagra for XPages
Extension Library - Viagra for XPagesExtension Library - Viagra for XPages
Extension Library - Viagra for XPagesUlrich Krause
 

Similar to Design System in Figma A to Z.pdf (20)

IntelliJ IDEA Architecture and Performance
IntelliJ IDEA Architecture and PerformanceIntelliJ IDEA Architecture and Performance
IntelliJ IDEA Architecture and Performance
 
Strategies and Tools for Model Reuse with Capella
Strategies and Tools for Model Reuse with CapellaStrategies and Tools for Model Reuse with Capella
Strategies and Tools for Model Reuse with Capella
 
Introduction to Software Build Technology
Introduction to Software Build TechnologyIntroduction to Software Build Technology
Introduction to Software Build Technology
 
Exploring Android Studio
Exploring Android StudioExploring Android Studio
Exploring Android Studio
 
Don't Get Lost on the Cutting Room Floor: Organizing Your Assets for Content ...
Don't Get Lost on the Cutting Room Floor: Organizing Your Assets for Content ...Don't Get Lost on the Cutting Room Floor: Organizing Your Assets for Content ...
Don't Get Lost on the Cutting Room Floor: Organizing Your Assets for Content ...
 
Expanding XPages with Bootstrap Plugins for Ultimate Usability
Expanding XPages with Bootstrap Plugins for Ultimate UsabilityExpanding XPages with Bootstrap Plugins for Ultimate Usability
Expanding XPages with Bootstrap Plugins for Ultimate Usability
 
X page developer
X page developerX page developer
X page developer
 
Top tips from what we've learned from our 10 years experience
Top tips from what we've learned from our 10 years experienceTop tips from what we've learned from our 10 years experience
Top tips from what we've learned from our 10 years experience
 
Chicago Code Camp 2014 TFS Care and Feeding
Chicago Code Camp 2014   TFS Care and FeedingChicago Code Camp 2014   TFS Care and Feeding
Chicago Code Camp 2014 TFS Care and Feeding
 
Migraine Drupal - syncing your staging and live sites
Migraine Drupal - syncing your staging and live sitesMigraine Drupal - syncing your staging and live sites
Migraine Drupal - syncing your staging and live sites
 
Get the best out of Bootstrap with Bootstrap4XPages - Engage 2014
Get the best out of Bootstrap with Bootstrap4XPages - Engage 2014Get the best out of Bootstrap with Bootstrap4XPages - Engage 2014
Get the best out of Bootstrap with Bootstrap4XPages - Engage 2014
 
Hosting Drupal on Amazon EC2
Hosting Drupal on Amazon EC2Hosting Drupal on Amazon EC2
Hosting Drupal on Amazon EC2
 
Library System Implementation with JavaFx
Library System Implementation with JavaFxLibrary System Implementation with JavaFx
Library System Implementation with JavaFx
 
Reproducibility in artificial intelligence
Reproducibility in artificial intelligenceReproducibility in artificial intelligence
Reproducibility in artificial intelligence
 
Performant Django - Ara Anjargolian
Performant Django - Ara AnjargolianPerformant Django - Ara Anjargolian
Performant Django - Ara Anjargolian
 
fuelOrigin.docx
fuelOrigin.docxfuelOrigin.docx
fuelOrigin.docx
 
Jared Whitlock Open Source In The Enterprise Plone @ Novell
Jared Whitlock   Open Source In The Enterprise    Plone @ NovellJared Whitlock   Open Source In The Enterprise    Plone @ Novell
Jared Whitlock Open Source In The Enterprise Plone @ Novell
 
C++ Introduction brown bag
C++ Introduction brown bagC++ Introduction brown bag
C++ Introduction brown bag
 
Clustered PHP - DC PHP 2009
Clustered PHP - DC PHP 2009Clustered PHP - DC PHP 2009
Clustered PHP - DC PHP 2009
 
Extension Library - Viagra for XPages
Extension Library - Viagra for XPagesExtension Library - Viagra for XPages
Extension Library - Viagra for XPages
 

Recently uploaded

PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfPAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfssuser799b33
 
acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--characterschell
 
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptxAWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptxGopiNarahari1
 
Preposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese studentPreposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese studentThaoNguyenDang4
 
Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.JIT KUMAR GUPTA
 
Portfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaPortfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaJayeola Samuel
 
Options for Making Housing Affordable a distinct Reality
Options for Making Housing Affordable a distinct RealityOptions for Making Housing Affordable a distinct Reality
Options for Making Housing Affordable a distinct RealityJIT KUMAR GUPTA
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfLizShek
 
Studio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRStudio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRSurfaced - Designs By Meera Narula
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfLizShek
 
Amadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdfAmadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdfLizShek
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city JodhpurSreyaseeNath1
 
creating my own logo and icon.pptx
creating my own logo and icon.pptxcreating my own logo and icon.pptx
creating my own logo and icon.pptxChloeMeadows1
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfLizShek
 
October 2023 Issue - Fnewsmagazine SAIC.
October 2023 Issue - Fnewsmagazine SAIC.October 2023 Issue - Fnewsmagazine SAIC.
October 2023 Issue - Fnewsmagazine SAIC.aditisingh523288
 
Heathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfHeathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfLizShek
 
Presentation on "Gothic Architecher".pptx
Presentation on "Gothic Architecher".pptxPresentation on "Gothic Architecher".pptx
Presentation on "Gothic Architecher".pptxASHIQUR RAHMAN
 
Al-Aqsa Mosque History Thesis Defense by Slidesgo.pptx
Al-Aqsa Mosque History Thesis Defense by Slidesgo.pptxAl-Aqsa Mosque History Thesis Defense by Slidesgo.pptx
Al-Aqsa Mosque History Thesis Defense by Slidesgo.pptxBahaaRoshdy1
 
new Principle of design and the elements of design
new Principle of design and the elements of designnew Principle of design and the elements of design
new Principle of design and the elements of designbhamshu738
 

Recently uploaded (20)

PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfPAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
 
acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--character
 
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptxAWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
 
Preposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese studentPreposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese student
 
Maximize Your Brand Impact with a Box Truck Wrap Design
Maximize Your Brand Impact with a Box Truck Wrap DesignMaximize Your Brand Impact with a Box Truck Wrap Design
Maximize Your Brand Impact with a Box Truck Wrap Design
 
Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.
 
Portfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaPortfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel Jayeola
 
Options for Making Housing Affordable a distinct Reality
Options for Making Housing Affordable a distinct RealityOptions for Making Housing Affordable a distinct Reality
Options for Making Housing Affordable a distinct Reality
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdf
 
Studio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRStudio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCR
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdf
 
Amadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdfAmadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdf
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city Jodhpur
 
creating my own logo and icon.pptx
creating my own logo and icon.pptxcreating my own logo and icon.pptx
creating my own logo and icon.pptx
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdf
 
October 2023 Issue - Fnewsmagazine SAIC.
October 2023 Issue - Fnewsmagazine SAIC.October 2023 Issue - Fnewsmagazine SAIC.
October 2023 Issue - Fnewsmagazine SAIC.
 
Heathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfHeathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdf
 
Presentation on "Gothic Architecher".pptx
Presentation on "Gothic Architecher".pptxPresentation on "Gothic Architecher".pptx
Presentation on "Gothic Architecher".pptx
 
Al-Aqsa Mosque History Thesis Defense by Slidesgo.pptx
Al-Aqsa Mosque History Thesis Defense by Slidesgo.pptxAl-Aqsa Mosque History Thesis Defense by Slidesgo.pptx
Al-Aqsa Mosque History Thesis Defense by Slidesgo.pptx
 
new Principle of design and the elements of design
new Principle of design and the elements of designnew Principle of design and the elements of design
new Principle of design and the elements of design
 

Design System in Figma A to Z.pdf