Introduction to Figma
By Arturo Servín , Web Designer
Learn to use Figma, one of the most efficient and versatile prototyping tools from scratch, and discover a world of possibilities for web development
Learn to use Figma, one of the most efficient and versatile prototyping tools from scratch, and discover a world of possibilities for web development
Domestika Basics · 6 courses included
-
Course 2: Applying Text and Color
By Arturo Servín
Learn to insert and edit text and color styles to create reusable elements for your design systems
-
Course 3: Design Elements
By Arturo Servín
Insert images into your project and use layout grids to create cards
-
Course 4: Components: Uses and Benefits
By Arturo Servín
Learn to build a simple system with master components, Booleans, and variants
-
Course 5: Design Systems
By Arturo Servín
Discover the importance of design systems in the prototyping process
-
Course 6: Building a Prototype
By Arturo Servín
Learn how to connect different screens and add interactions and animations to your prototype
In today's tech-driven world, websites and mobile apps are the perfect places for connecting brands with their clients. According to web designer Arturo Servín, better known as Monky, Figma is the most efficient and versatile prototyping tool for designing graphical UI. Discover the creative freedom of working without technical restrictions and take your web development to the next level.
In this six-course Domestika Basics, Arturo Servín teaches you how to use Figma from scratch. If you'd like to learn more about web development alongside Arturo, check out his other courses: Responsive Web Design with Adobe Muse, Adobe Photoshop for Web Design, Introduction to Adobe XD for Cell Phone Apps, and Responsive Web Design with Adobe Dreamweaver.
In the first course, your teacher introduces you to the program's interface, plug-ins, and basic features like layers and shapes. He also teaches you how to create icons.
Continue by learning how to insert and edit texts. Then, explore colors and visual effects to enhance the look of your future projects and give them personality.
The third course is all about images. Arturo shows you how to insert them, use masks, and apply layout grids. See how to create basic cards as well as more advanced ones.
Immerse yourself in components in the fourth course and learn how to build, edit, and implement several kinds using the concepts of master components, Boolean operations, and variants.
In the fifth course, discover the importance of design systems. Arturo gives you a step-by-step explanation of how to design a style guide for text, another for color, and create a component library.
In the sixth and final course, learn what a prototype is and how to create one with interactions and animations. To tie everything together, Arturo walks you through working on a collaborative project with a team and clients.
Technical requirements
⦁ A computer with Windows 8.1 (or later) or MacOS Sierra (or later).
⦁ A web browser such as Chrome 64 or later, Firefox 78 or later, or Safari 11.1 or later.
⦁ A video card with at least 1 GB of GPU memory.
⦁ At least 4 GB of RAM.
⦁ A Figma account, you can use the free version or download the desktop version.
⦁ A minimum 20 MB internet connection.
- 99% positive reviews (280)
- 11,668 students
- 53 lessons (6h 53m)
- 6 courses
- 27 downloads (13 files)
- Online and at your own pace
- Available on the app
- Audio: Spanish
- Spanish · English · Portuguese · German · French · Italian · Polish · Dutch
- Level: Beginner
- Unlimited access forever
Recommended software for this course
FigmaReviews
Arturo Servín is a graphic designer specializing in web design and has been a web designer for a! Design, in addition to Community Professional for Adobe Systems for two years, and professor at different universities in Mexico, including Miami Ad School Mexico City. Guest instructor of different educational institutions, such as the Universidad Iberoamericana, Universidad Anáhuac campus Cancún, Tecnológico de Monterrey, Universidad de las Américas in Puebla, Universidad Autónoma de Guadalajara, among others. Founder of his own studio focused on ecommerce , web design and branding.
Content
Course 1: Figma Basics
-
U1
Welcome
-
Welcome
-
-
U2
Introduction to figma
-
Introduction to figma
-
-
U3
Get to know the interface of Figma
-
Get to know the interface of Figma
-
-
U4
Install plugin
-
Install plugin
-
-
U5
The work tables
-
The work tables
-
-
U6
Use of Layers
-
Use of Layers
-
-
U7
Use the basic shapes
-
Use the basic shapes
-
-
U8
Align and distribute elements
-
Align and distribute elements
-
-
U9
Edit and combine shapes
-
Edit and combine shapes
-
-
U10
Practice: create simple icons
-
Practice: create simple icons
-
Course 2: Applying Text and Color
-
U1
Create and edit textual content
-
Create and edit textual content
-
-
U2
Text styles
-
Text styles
-
-
U3
Use and edit colors
-
Use and edit colors
-
-
U4
Color Styles: Fill
-
Color Styles: Fill
-
-
U5
Color Styles: Stroke
-
Color Styles: Stroke
-
-
U6
Visual effects
-
Visual effects
-
-
U7
Practice: Create Styles
-
Practice: Create Styles
-
Course 3: Design Elements
-
U1
Work with images
-
Work with images
-
-
U2
Wear masks
-
Wear masks
-
-
U3
The layout grids
-
The layout grids
-
-
U4
Create a basic card
-
Create a basic card
-
-
U5
Element Composition Plugins
-
Element Composition Plugins
-
-
U6
Create an advanced card
-
Create an advanced card
-
-
U7
Practice: user card
-
Practice: user card
-
Course 4: Components: Uses and Benefits
-
U1
The components
-
The components
-
-
U2
Create a component
-
Create a component
-
-
U3
Create multiple components
-
Create multiple components
-
-
U4
The master components
-
The master components
-
-
U5
Boolean components
-
Boolean components
-
-
U6
Variable components
-
Variable components
-
-
U7
Practice: component system
-
Practice: component system 1
-
Practice: component system 2
-
Practice: 3 component system
-
Course 5: Design Systems
-
U1
Design systems
-
Design systems
-
-
U2
Examples of design systems
-
Examples of design systems
-
-
U3
Basic elements of a design system
-
Basic elements of a design system
-
-
U4
Set typographic style guide
-
Set typographic style guide
-
-
U5
Set the color guide
-
Set the color guide
-
-
U6
Create a component library
-
Create a component library
-
-
U7
Practice: design system
-
Practice: design system 1
-
Practice: design system 2
-
Course 6: Building a Prototype
-
U1
Prototype description
-
Prototype description
-
-
U2
Prototyping tools in Figma
-
Prototyping tools in Figma
-
-
U3
Vertical and horizontal displacements
-
Vertical and horizontal displacements
-
-
U4
Prototype
-
Prototype
-
-
U5
Employ interactions
-
Employ interactions
-
-
U6
Use smart animations
-
Use smart animations
-
-
U7
Do a collaborative project
-
Do a collaborative project
-
-
U8
Practice: build a prototype
-
Practice: build a prototype 1
-
Practice: build a prototype 2
-
Practice: build a prototype 3
-
Practice: build a prototype 4
-
Practice: build a prototype 5
-
See the content of the 6 courses
About Domestika Basics
Domestika Basics is a series of courses focused on teaching the most commonly used software by creative professionals worldwide.
The content has been meticulously curated and is intended for both students going into a new creative field and more experienced professionals who want to polish their skills.
Learn with the best Domestika teachers through practical lessons, tons of resources, and a progressive difficulty that'll allow you to see results from day one.
Domestika Basics will allow you to step up your professional game and be prepared to score better projects.
-
Without prior knowledge.
Domestika Basics gives you everything you need to get started in a new creative field and become an expert in it.
-
Focused on the tool.
Discover its main components, techniques, and the tried-and-true methods you need to master it.
-
Learn fast
With a straightforward, step-by-step approach, our outstanding professionals will teach you how to get the most out of the program.
-
Certificates Plus
If you're a Plus member, get a custom certificate signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Figma
sebaurbina
Muy buen curso! Te da una buena base.
View translation
Hide translation
ferrantidg
Muy bueno para aprender las bases de este programa!
View translation
Hide translation
comocrispi
Muy recomendado el curso para iniciarte en Figma.
View translation
Hide translation
mariomoreno
Excelente curso!
View translation
Hide translation
nat.otranto
Muy buen curso para empezar, super claras las explicaciones, como se va sumando contenido y conocimiento y las prácticas de cada unidad. Muy conforme.
View translation
Hide translation