Period: 1 hour 50 minutes | Classes: 13
On this free tutorial, you’ll study all the things that you must know to get began with utilizing Figma.
When you’ve accomplished the teachings, you’ll have a superb understanding of the instruments and options included in Figma in addition to learn how to create a sign-up type from scratch. Clocking in at just below two hours lengthy, we get right down to enterprise rapidly, so when you’re able to study, hold studying!
Introduction to Figma
1. Welcome to the Course
On this intro lesson, we’ll check out what the course as an entire will cowl. Straight away, will probably be clear to you that Figma shares similarities to different standard design instruments like Adobe XD and Sketch however has its personal set of distinctive options which are properly value a glance on their very own.
We’re going to have a look at 4 key areas:
- A normal introduction into Figma and what it’s
- An summary into learn how to get began, together with a dialogue of the interface and options obtainable
- A guided tutorial for utilizing Figma as a designer
- A guided tutorial for utilizing Figma as a developer
2. What’s Figma?
Figma is a design instrument, and with it, you possibly can create something you need for the net from consumer interfaces to illustrations to icons. So, you should use it to create a full-fledged on-line retailer, a smartwatch app, and all the things in between.
What makes Figma fairly particular is that it’s vector-based and browser-based, so you possibly can create absolutely anything from nearly wherever. And better of all? It’s free to get began.
From right here, we focus on learn how to set up and setup Figma to maneuver ahead with the tutorial.
Getting Began With Figma
3. Working With Tasks, Information, and Pages in Figma
Alright, with Figma put in and setup, it’s time to get our palms soiled! We dive proper in with this lesson, discussing all of the other ways to prepare your work. We discuss learn how to create initiatives, new recordsdata, and pages inside Figma. We additionally discuss learn how to entry your recordsdata.
4. Utilizing the Figma UI
Earlier than you possibly can actually get right down to enterprise, that you must have a radical understanding of learn how to use each button inside the Figma consumer interface. We dive into the small print right here so you possibly can transfer by way of the remainder of the tutorial with confidence. The UI is about up as follows:
- Residence Display: What you’re greeted with when opening Figma. This gives entry to your groups, initiatives, and choices for looking for recordsdata, viewing latest recordsdata, plugins, and drafts.
- Crew: This exhibits all of the initiatives assigned to this crew.
- Undertaking: A listing of all of the recordsdata related to the venture.
- Proper hand sidebar: Shows additional choices associated to which display you’re viewing.
- Prime nav bar: Shows file identify, sharing choices, zoom, menu, cursor, shapes, and extra instruments.
- Left facet bar: Reveals layers inside a file by default.
5. Working With Frames, Shapes, and Textual content in Figma
Getting began with frames inside Figma begins with a comparability: they’re identical to the artboards you’d encounter in Adobe XD. Frames offer you an ideal start line when engaged on a venture and there are tons constructed into Figma for issues like smartphones, browsers, social media websites, and extra.
You too can use the Form instrument in Figma to create customized designs. When you’ve used some other design software program prior to now, this instrument needs to be fairly acquainted, as you’ll have your alternative of rectangles, circles, traces and so forth and you’ve got full management of their thickness, measurement, and stroke.
And also you’ll study in regards to the Textual content instrument as properly.
6. Creating Vector Networks With the Pen Device
Vector Networks are fairly presumably essentially the most distinctive function in Figma. That’s as a result of most design instruments method the pen instrument as follows: you click on and create a number of factors then return to your start line to shut the trail. However it doesn’t work this manner in Figma.
As a substitute, Figma maintains open-ended paths, which makes it a lot simpler to create extra sophisticated shapes. On this lesson, we discover intimately learn how to make use of Figma’s distinctive pen instrument and vector networks.
7. Working With Grids in Figma
In Figma, grids are tremendous helpful for creating interface design however they can be used for making icons with ease. You may have full management over how grids seem, the field measurement, colour, and extra.
8. Utilizing Figma Plugins
Plugins add a variety of further options to your Figma expertise. And on this lesson, we dive deep into the number of plugins obtainable to you.
And we additionally present you learn how to set up plugins, set them up, and put them to work inside your workflow.
The best way to Use Figma as a Designer
9. Let’s Design a Signal-Up Kind in Figma
Figma makes it straightforward to create a variety of apps and web site varieties. And on this lesson, we’ll cowl learn how to create a sign-up type for a cell app utilizing all of the information you’ve amassed to this point. Nevertheless, we’ll additionally go into depth about new options not mentioned but, like parts, structure, colour, and kinds.
10. Let’s Create a Prototype
Watch video lesson [01:25:55] ↗
Figma can be used to create prototypes. We achieve this on this lesson through the use of the 2 screens created within the earlier lesson. On this case, we’ll create a prototype to attach these two screens when sure buttons are clicked.
11. Sharing Work and Getting Suggestions
Watch video lesson [01:30:02] ↗
An important a part of engaged on a design, is collaborating with others and getting different’s suggestions. That is straightforward to perform inside Figma, The truth is, at any level throughout your workflow, you possibly can share the venture with others and solicit suggestions. You too can present modifying permissions when you so select.
The best way to Use Figma as a Developer
12. Inspecting a Design File in Figma
Watch video lesson [01:41:39] ↗
When you’re a developer and have been given view-only entry to a Figma file, this lesson is for you. Right here, we delve into all the things that you must learn about developer entry to Figma recordsdata and how one can take a venture and switch it into an app, web site, or different dwell and interactive product.
13. Exporting Belongings
Watch video lesson [01:46:48] ↗
Within the final lesson of this tutorial, you’ll discover ways to export belongings in Figma. It’s tremendous easy to do and works in each view-only and in edit mode. So when you’re completed working in your venture, you possibly can export it with ease and transfer onto your subsequent process.
Be taught Extra About The best way to Put Figma to Use
If you wish to develop your Figma information even additional, contemplate trying out a few of the articles we’ve written on the topic prior to now. Right here, you’ll discover further tutorials, template roundups, and ideas and tips, that can assist you stage up your Figma expertise.
