Computer Exam

Computer Exam

Figma

popular online design tool used by designers all over the world, allowing you to create, share, and collaborate on designs in real-time.

Menu

Appears when you click the figma logo in the corner, think of it as your control center

Collaboration & View Options

Found on the top-right corner, this is where teamwork and screen control happen

Layers

This helps organize your work, located on the left sidebar

Canvas

A big workspace in the middle where you create your design

Toolbar

Provides quick access to tools for moving objects, creating frames, adding shapes and text, drawing, and more, acting as the building blocks for creating a design.

Properties

Located on the right side of the canvas, this is where you edit your selected object

Position

Used for placing objects exactly where you want them

Size

Controls how big or small your object is

Rotation

Rotates object left or right

Corner Radius

Rounds the corners of rectangles or frames

Fill

Change the inside color of the object

Stroke

Adds an outline or border around the object

Effects

Used to add special visual effects

Opacity

Controls how transparent the object is

Constraints

Used in UI design to control how an object behaves when the frame is resized

Auto Layout

Used for buttons, cards, menus, and UI components. Makes objects automatically adjust and fit cleanly.

Layout Grid

Adds grid lines to your frame

Text Properties

Font family, size, text color, Bold, Italic, Underline, Line Height

Prototype Properties

Used when desigining intereactive screens

Export

Used to save or export object as PNG, JPG, SVG, etc. Also chosoe export size

Move Tools

Primary tool for selecting and moving objects on the canvas

Move

default tool for selecting, moving, and generally interacting with objects and layers on the canvas

Scale

Used to resize selected objects proportionally, maintaining their aspect ratio by default

Hand Tool

Allows you to pan and move your view around the canvas without accidentally selecting any design elements

Region and Shape Creation Tools

The tools in this section are fundamental building blocks for any user interface or graphid design project in Figma

Frame

The most critical "region" tool. Frames act as artboards or viewports for specific screens and are essential for applying layout grids, constraints, and prototyping linkages.

Section

Used for grouping related frames and elements into larger, named areas on your infinite canvas, primarily for organizational purposes and managing developer handoff status.

Slice

A tool for defining a specific, exportable area of the canvas. Anything within the boundaries of a slice can be exported as an image file, regardless of whether it's contained within a frame or not.

Shape Tools

allows you to quickly draw basic vector graphics that serve as visual elements in your designs.

Rectangle

Creates squares and rectangles, which can be customized with rounded corners.

Line

Draws straight lines used for dividers, borders, or simple accents.

Arrow

Similar to the line tool, but automatically adds an arrow tip, useful for diagrams or flow indicators.

Ellipse

Creates circles and ovals.

Polygon

Creates triangles by default, but can be adjusted to have any number of sides in the properties panel.

Star

Creates a five-pointed star by default, with adjustable points, ratio, and corner radius.

Drawing Tools

These tools let you draw elements that are not automatically generated components.

Pen

Draws custom vector lines and shapes.

Pencil Tool

draws free-hand lines — more natural and less precise than Pen Tool.

Text

Adds text layers to your design. Once placed, the properties panel on the right allows for extensive styling, including font selection, size, color, and alignment.

Typography

controls how text looks and reads in a design. It’s important because it affects readability, hierarchy, and overall style.

Typeface

is a set of letterforms and glyphs with similar design features

Font

is a file containing the visual details that make up the design of each glyph or letter in that typeface.

Font Family

Is the collection of styles that make up a typeface. For example: Helvetica, Times New Roman and Roboto are all font families.

Font Style

Defines how thick or thin characters appear. A typeface can have any number of styles or weights. Every font family will come with its own selection of styles. Some of the styles for the Roboto font family are: thin, light, regular, and medium.

Font Size

controls the scale of your text. Figma represents it in points (pt). Points are a standard measurement in typography for length, leading, font size, and other units.

Comment

lets users leave contextual feedback directly on designs, enabling threaded discussions, tagging teammates (@mention), and marking issues as resolved to streamline collaboration and iteration without leaving the file.

Component Libraries

You can create reusable elements like buttons, icons, and UI kits. Any changes made to a component are automatically updated across all instances, ensuring design consistency and saving time.

Vector Editing

Figma provides advanced vector editing capabilities, enabling designers to create and modify shapes, paths, and text with ease. This is particularly useful for creating scalable graphics that look great on any screen size

Prototyping Tools

You can create interactive prototypes with animations, transitions, and gestures, allowing stakeholders to experience how the final product will feel and function.

Collaborative Environment

Figma’s real-time collaboration feature allows multiple team members to work together on the same design. Changes are instantly visible to everyone, and team members can leave comments directly on the design to provide feedback or suggest improvements.