Figma is the hottest design tool right now. It’s similar to Sketch and Adobe XD in a
lot of ways but slightly different and better. Check the comparison video if you want to
learn more about the similarities and differences in design tools. In this video, you will find all the things
you need to create your first design in Figma. Let’s get started. Let’s begin with Account creation. Go to Figma.com. You can access Figma from browser but for
best experience, I recommend using Desktop App. You can find it under resources or in the
footer. Next thing you need to decide is Right plan
for you. In the free plan you can create 3 Projects
and as many files as you need but you will miss some important features like Team Libraries,
Unlimited Projects and Version History. If you are studying in college or universities,
I have good news for you. You can get PRO Features by signing up for
Student Account. Once you decide the plan, Install & open the
Desktop App. Click on Create Account if you’re new. As I already have account, I’ll directly
login. This is the landing page that you can see
by default. Let’s understand how our design files are
organised. You can create any number of files in Drafts
for practice. You have to create a TEAM before creating
a project. You can do that by clicking ‘New Team’
. Once added, select the team and Add new projects. Under project you can Add a new file or you
can import you Sketch file. Things are slightly rearranged in latest Community
Beta Update. New Team is moved from Bottom to Top Right. You also have a new Community tab. Community is excellent and fastest way to
learn Figma. If this tab is not visible to you, it’s
probably because it’s still under beta. You can Signup to Community using the link
the the description below. You can find UI Kits, Components, Design files
and Plugin in this tab. I’ll cover this in detail in upcoming videos. The editor interface has 4 main areas. Big grey area in the middle in Canvas where
we will do our design work. Then we have toolbar on the Top. Then we have Left hand Panel or Layers Panel
and finally Right hand side panel or Properties Panel. Let’s learn about those in detail. We have infinite grey canvas to begin with. You can add anything on this canvas. Add images, draw shapes or even write . I
use this collect my ideas & inspirations for the project. You can also change the background color of
the Canvas. I like to keep it dark as designs stand out
well on that. To prototype or preview anything on canvas
we must add frames. Lets see how we can do that in next section. Toolbar has all the tools that we need to
design, review and share. To begin with you have searchable Menu. You can search for rulers, grid or anything
you have in mind. Then we have Move and Scale tools. They behave exactly like their names. Next, we have Frames. Frames are just like art-boards where you
can start designing for a specific device or sizes. Once you click on frames, you can see lots
of default sizes. Pick the of your choice. Let’s add some iPhone X frames on Canvas. You can also create custom frame size by selecting
Frame or Keyboard shortcut F and dragging frame area on canvas . Third way of adding
frame is by selecting the object, Right click and click on Frame Selection. And now frame will wrap the object. After Frames, We have our Design tools. Using this we can create all standard vector
shapes like Rectangle, Lines, Arrows, Circle Polygon & Paste Image. Let’s add them one by one. Looks perfect. If basic shapes are not enough, we have pen
tool where we can draw custom vector shapes. Vector tools In Figma are way advanced than
competition. Apart from creating basic shapes and curves,
we can create something called ‘Vector Network’ where you can connect One Node to Multiple
Nodes. To add curves, Select the node first then
select bend tool or use keyboard shortcut Command on Mac or Control on Windows. By default curves will be symmetric. If you need different angles, then hold Option
key on Mac or Alt key on Windows and drag the handle. You will be using these tools a lot. Pencil tool is used for freehand drawings
which is converted into vector path. Next one is Text tool. Just select and click inside a frame to create
Point Text. Point text is free flowing text which just
goes on and on. This is perfect for short titles, labels etc. If you need text inside limited area then
select text tool and instead of clicking drag the area in which you want to write. Text now respects the boundaries. You can also choose Auto Height to make it
dynamic. You can use hand tool to pan around the canvas. You can do the same by holding a spacebar
and dragging canvas with Mouse. Last one in the toolbar is Comment section. We will use this a lot for reviews, collaboration
and tracking changes. Will check this in details later. Middle section of toolbar is dynamic. When nothing is selected, you can see the
filename & Project name. Use dropdown to save file, add versions and
so much more. On Top Right, You can see
all collaborators actively working on File. Use share button to share design file with
Designers, Stakeholders & developers. Last in the toolbar section are preview options. Use Dropdown to change zoom settings, Toggle
layout grids, rules, outlines view etc. This is truly dynamic panel. These properties change depending upon the
element selected on canvas. Some properties are common for all such as
Alignment options, XY positions, Width and Height, Rotation & constrains. Let’s see some common properties in detail. Lets select this Rectangle here and try different
alignment options. You should note that objects are aligned within
the Container Frame. Lets check this behaviour again by moving
this entire frame inside a bigger frame. Rectangle still aligns itself as per Frame
in which it is placed. This is super useful in designs. I’ll share some tips about this in upcoming
videos. Fill Properties. This is probably the most widely used property. We have various Fill options here in Figma. We have image Fill, Solid color fill and various
gradient fill options. Selecting desired color from color wheel or
its Hex value is so easy. To add Stroke or borders, click on this +
icon. You can now decide color and thickness. A quicker way to change thickness is by dragging
mouse when you see this resize cursor. You can also change Border position as Inside,
Outside or Center. Effects section. We have 4 effects in Figma. Drop shadow, Inner shadow, Layer Blur and
Background Blur. Drop shadow gives a feeling as if the object
is floating in the air. Inner shadow gives a feeling as object is
pressed. Let’s try Blur effects now. Layer blur blurs the selected layer. You can change the Intensity. Background blur work in opposite way. Its blurs the background layer. To see that in action we have reduce the opacity
to around 50%. Let’s adjust the blur value to get desired
effect. This left side panel or Layers panel helps
us organise our designs even more. You can organise designs in pages. This keeps our canvas clean and structured. I usually create different pages for different
modules or different devices. On top we can toggle between layers and asset. Assets panel hosts all components. For those who don’t know what Symbols or
Component are, here’s explanation. Components are reusable groups in the design. Let’s see it in action by creating a navigation
bar for our screens. Once our icons are placed, we can add them
inside a frame. Now magic happens as you as you click on “Create
Component”. Now this component is visible in Assets panel. Drag this tab bar to other 2 screens. You can override some properties in these
components like fill colors. Now try rearranging icons, as we created a
component, design changes in all three screens. How cool is that ?
This component feature alone increased efficiency by 10 times. Nowadays, designing just the screens is not
enough. We should be able to test to designs with
users. To test designs, Prototyping is important
step. Adding interactions to designs is very easy. Toggle from Design to Prototype from Properties
panel. All you have to do is select a Layer where
you want to add interaction and link it to destination screen. Do it couple of more times to make interaction
complete. Additionally you can also select device for
a prototype. To Preview prototype, you have to hit little
Play icon on Top Right. Let’s try our interaction. If you’re following this, Congratulations. You just created your 1st interaction on Figma
😆 Your design is now ready to share other designers
& stakeholders for review. Once you share your designs with team members
or client for a review, they can use comment section to provide feedbacks on your designs. You can reply to those comments and mark them
as resolved once task is done. Advanced Design tools, Collaborating with
team, Prototyping, Version controlling and sharing options are present in same Figma
App & this thing makes Figma so so so special. I hope this tutorial helped you understand
all the basics of Figma Interface & features. Lets dive deep in upcoming videos. That’s all for today. If you like this video, Like, Share, Subscribe
& don’t forget to hit the bell icon . If you want to know more about specific feature
or have feedback for me, let me know in comments below. Thanks for watching. See you in the next one.
