is a web-based graphics editing and user interface

design app. You can use it to do all kinds of graphic

design work from wireframing websites, designing
mobile app interfaces, prototyping designs, crafting
social media posts, and everything in between.
 How to get started
1. Create your account. Head over to figma.com and create your free account.
Then select Design File + from the right-side menu.
 Interface
TOOLS:
• Main menu
• Move tools
• Region tools
• Shape tools
• Drawing tools
• Text
• Hand tool
• Add comment
Inspect panel
• Design
• Prototype
• Inspect
 Frames
Frames are Figma’s artboards, if you’re
familiar with those from Adobe’s
Creative Cloud apps. To create a
frame, select F on your keyboard or
head over to the Tools menu and click
on the Frame icon. Select from a wide
range of presets:
• Phone
• Tablet
• Desktop
• Watch
• Presentation
• Paper
• Social media
• Figma Community
 Vector shapes & and Colors
You can select among the default shapes available in the Tools
menu:
• Rectangle
• Line
• Arrow
• Ellipse
• Polygon
• Star
• Images
Tip: Hold shift to keep proportions in place.
Pen Tool - If you want to get creative or you have a complex shape
to draw, you can use the pen tool (P).
Colors- Select the color of the shape from the right menu,
under Fill.
 Layers
They automatically appear once an element is created. You can access them in the left
menu.
 Images
If you want to use images, you can easily drag and drop them into the canvas.
Figma allows adjustments if you click on the image icon in the Inspect
panel like exposure, contrast, saturation, etc.
 Typography
Press T or search for the icon in the Tools menu and start writing. Figma has all the Google
Fonts installed already, but if you want to use other fonts you can install Figma Font
Helper and work with your own desktop fonts. You can play with the text properties in
the Inspect panel, such as size, color, letter spacing, etc.
 Styles
Styles are a super cool Figma
feature that allows you to save
repeatable properties.

To define a color style, pick your hue, head over to the Inspect
panel under Fill, click on the icon with the four dots (Styles), and then on + to
name and save your color.
 Constraints
Constraints define how objects behave when a frame is
resized. The constraints are set by default to Top and Left. You
can edit these in the Inspect panel under Constraints by
selecting the elements in your frame. You can apply them on
both the x (horizontal) and y (vertical) axis
Prototypes
• Connections are made between frames and elements
within the frames. Make sure to click
on Prototype from the Inspect panel to create the
connections. Click on your element/frame and you’ll
see a circle appearing. Click and hold to direct your
connection to a new frame.
• Interactions and animations: Once you’ve created your
connection, the Interaction details will appear. Choose
from a wide range of interactions and animations.
• Prototypes: When you’re ready to play with your
prototype, click on the ▶ button on the top-right of
your screen.
 Collaborating in Real-Time
• You can work on the same project with your team in real-time. Here are some handy tools to
make that easier:
• Comments: Comments are great for sharing feedback with your team. You can access them
in the top left menu or simply by pressing C.
• View mode: When you share your design, make sure you know in which mode it is. From the
drop-down menu after you click on the
• Share button, select either can view or can edit. The view mode is great for sharing with
developers.
• Edit mode: To share your designs with your design team, make sure you have the edit
mode set on.
 Exporting Files
• When it comes to exporting files in Figma, you’ll see several options. Keep the following in mind:
• SVG – for vector files
• PNG – for images and graphics with transparent background
• JPG – for all images
• PDF – for high-quality pages
In terms of sizing, 1x is the actual size. You can export assets at 2x (twice the original size), 3x, 4x, or
you can type out other multipliers.
Tip: To export a document as PDF with frames as pages, click on the Figma icon in the Tool
Menu > File >Export Frames to PDF.