Figma Design Basics Flashcards

Question 1

What is the main purpose of the Figma canvas?

Accepted Answer

The canvas is the infinite, two-dimensional workspace where designers place frames, shapes, text, and other objects to build their designs. Designers can zoom and pan freely across it, and multiple screens or pages can sit side by side. Because the canvas has no fixed edges, you can arrange flows and notes in one place.

Question 2

What does the left sidebar in the Figma editor typically contain?

Accepted Answer

The left sidebar holds the Layers panel and the Assets panel, which list the structure of your file and the reusable items available to it. Use it to select objects, reorder layers, and find components quickly while you work on the canvas.

Question 3

How do you zoom to fit all objects on the canvas?

Accepted Answer

Press Shift plus 1 to zoom so that every object on the current page fits within your window. Shift plus 2 zooms to the current selection instead. You can also use the zoom controls in the corner of the editor, and holding Command or Control while scrolling zooms in and out.

Question 4

What is the difference between panning and zooming in Figma?

Accepted Answer

Zooming changes the magnification of the canvas, making objects appear larger or smaller. Panning moves your view across the canvas without changing the scale. In Figma, you can pan by holding the spacebar and dragging, or by scrolling with a trackpad or mouse wheel, while zoom uses pinch gestures or modifier keys.

Question 5

Which tool is used to select and move objects, and what is its shortcut?

Accepted Answer

The Move tool, which Figma labels as the default selection tool, lets you click, drag, and resize objects on the canvas. Its keyboard shortcut is V, so you can press it at any time to return after using another tool. Hold Shift while clicking to add or remove items from your selection.

Question 6

What is the purpose of the right-hand panel in the Figma editor?

Accepted Answer

The right-hand panel shows the settings for whatever you have selected, such as position, size, fills, strokes, effects, and text options. When nothing is selected, it shows page-level settings like the canvas color. Use it to change exact values instead of dragging objects by eye, which keeps spacing and sizing precise across a design.

Question 7

What is a page in a Figma file, and why would you use more than one?

Accepted Answer

A page is a separate canvas inside a single Figma file, used to group related work such as onboarding screens, a style exploration, or archived versions. Each page has its own layers, so objects on one page do not appear on another.

Question 8

How do you rename a layer so your file stays easy to navigate?

Accepted Answer

Double-click the layer name in the Layers panel, type the new name, and press Enter. Descriptive names such as Header, Button Primary, or Product Card make it faster to locate objects later. Clear naming also helps teammates understand how your frames and groups are structured without asking questions.

Question 9

What is a frame in Figma, and how does it differ from a group?

Accepted Answer

A frame is a container that works like an artboard, with its own size, background, and optional clipping of content that extends beyond its edges. A group only bundles selected objects together without adding a boundary or layout behavior. Frames suit screens, while groups organize parts of a design.

Question 10

What is a layer in the Figma Layers panel?

Accepted Answer

A layer is a single object in your design, such as a frame, rectangle, text box, or image, shown as an item in the Layers panel. Layers appear in a nested hierarchy that mirrors how objects contain one another. Selecting a layer in the panel selects the matching object on the canvas.

Question 11

How does the layer stacking order affect what you see on the canvas?

Accepted Answer

Objects higher in the Layers list appear in front of objects lower in the list, so they can cover the ones beneath them. Changing the order moves an object forward or backward in the visual stack. You can also use the bring to front and send to back commands in the context menu.

Question 12

What does a constraint control inside a Figma frame?

Accepted Answer

A constraint determines how a child object stays positioned and sized when its parent frame is resized. For example, an element pinned to the right edge keeps its distance from that edge as the frame widens. Constraints are set in the right-hand panel and help designs adapt to different screen sizes without manual adjustments.

Question 13

How do you select an object that is nested inside a group or frame?

Accepted Answer

Hold Command on a Mac or Control on Windows and click the object to select it directly, even when it sits inside a group. Double-clicking a group also steps into it, letting you reach nested layers one level at a time. Press Escape to leave the group and return to selecting top-level objects.

Question 14

What does the Clip content setting do for a frame?

Accepted Answer

Clip content hides any part of a child object that extends beyond the frame's boundaries, so only the area inside the frame is visible. Turning it off lets objects overflow visibly, which is useful for shadows or elements that intentionally break out of a card.

Question 15

Which keys move a selected object by one pixel, and what does Shift change?

Accepted Answer

The arrow keys nudge the selected object by one pixel in the direction pressed. Holding Shift while pressing an arrow key moves it by ten pixels instead, which is faster for larger adjustments. This keeps alignment precise without dragging, and it works on single objects as well as multiple selections.

Question 16

What does the Frame tool shortcut F let you do?

Accepted Answer

Pressing F activates the Frame tool, which lets you draw a new frame by clicking and dragging on the canvas. You can also choose a preset device size before drawing. Frames created this way can be resized, renamed, and given layout settings at any time.

Question 17

What are the basic shape tools available in Figma?

Accepted Answer

The basic shape tools are Rectangle, Ellipse, Polygon, and Star, found in the toolbar and reached with keyboard shortcuts such as R for rectangles and O for ellipses. Each tool creates an editable object whose corners, radius, or point count can be adjusted in the Properties panel.

Question 18

What does the Pen tool do in Figma?

Accepted Answer

The Pen tool, shortcut P, creates custom vector paths by placing anchor points and connecting them with straight or curved segments. Clicking places a corner point, while clicking and dragging creates a smooth curve with handles. It is useful for icons, illustrations, and any shape that the basic tools cannot produce.

Question 19

How do you convert a shape into an editable vector path?

Accepted Answer

Select the shape, then choose Flatten from the right-click menu to convert it into a single vector object. Once flattened, you can edit its individual anchor points directly. Duplicate the original first if you might need its rectangle or ellipse controls later.

Question 20

What is a fill, and how many can an object have?

Accepted Answer

A fill is the color, gradient, or image that covers the inside area of a shape, text, or frame. Figma allows multiple fills on one object, stacked in layers, so you can combine a solid color with a partially transparent overlay. Each fill can have its own opacity and blend mode.

Question 21

What is the difference between a fill and a stroke?

Accepted Answer

A fill colors the interior of an object, while a stroke is the outline drawn along its edge. Strokes have their own width, position, and style, such as dashed or solid, and can be aligned inside, centered on, or outside the boundary. Each can be styled independently.

Question 22

How do color styles differ from simply typing a hex value into a fill?

Accepted Answer

A color style is a saved, named color that you can apply across many objects from one place. If you update the style, every object linked to it changes automatically. A typed hex value stays fixed to that one object, so changing a brand color would require editing each object manually.

Question 23

What does the Corner radius setting affect on a rectangle?

Accepted Answer

Corner radius controls how rounded the corners of a rectangle appear, from sharp square corners at zero to fully rounded ends at larger values. You can set one value for all corners or adjust each corner separately. Rounded corners are commonly used for buttons, cards, and input fields.

Question 24

How do you apply a drop shadow effect to an object?

Accepted Answer

Select the object, open the Effects section in the Properties panel, and click the plus icon to add a new effect. Choose Drop shadow from the list, then adjust its color, offset, blur, and spread values. Effects stack with fills and strokes, so the shadow can be tuned without changing the object's base color.

Question 25

What is a component in Figma, and why do designers create one?

Accepted Answer

A component is a reusable master object that you create once and place as copies called instances throughout a file. Changes made to the main component can propagate to all its instances, which keeps repeated elements such as buttons and icons consistent. Instances can also override specific properties when a variation is needed.

Question 26

How do you create a component from an existing object?

Accepted Answer

Select the object or frame you want to reuse, then choose Create component from the right-click menu or the component option in the toolbar. Figma converts the selection into a main component, and the original location now shows an instance. Name the component clearly so teammates can find it in the Assets panel.

Question 27

What is a variant, and how does it relate to a component set?

Accepted Answer

A variant is one version of a component, such as a button in its hover, pressed, or disabled state. Variants are grouped together in a component set, which lets designers switch between states using properties in the instance panel. This keeps related states organized under one name instead of scattered components.

Question 28

What does auto layout do to a frame?

Accepted Answer

Auto layout automatically arranges the child objects inside a frame in a horizontal or vertical row or column. It sets spacing between items and padding around the edges, and it can resize the frame to fit its content. This removes much of the manual positioning needed for buttons, lists, and cards.

Question 29

What is the purpose of the padding setting in auto layout?

Accepted Answer

Padding sets the space between the edge of an auto layout frame and the objects inside it. Horizontal padding affects the left and right sides, while vertical padding affects the top and bottom. Consistent padding keeps buttons and cards evenly spaced, so the text never touches the edge of its container.

Question 30

What is the difference between Fixed and Hug sizing in auto layout?

Accepted Answer

Fixed sizing keeps a frame at a set width or height that does not change when its contents change. Hug sizing makes the frame shrink or grow to wrap tightly around its children plus padding. Fill sizing, a third option, stretches an object to occupy the available space inside its parent auto layout frame.

Question 31

How does the gap setting in auto layout differ from padding?

Accepted Answer

Gap, sometimes called item spacing, sets the distance between neighboring child objects inside the auto layout frame. Padding instead sets the distance between those children and the frame's outer edges. Together, gap and padding control the rhythm and breathing room of a layout without moving any object by hand.

Question 32

Why would you use an instance rather than copying and pasting a design element?

Accepted Answer

An instance stays linked to its main component, so updating the main component updates every instance at once. A pasted copy is independent and must be edited one by one when the design changes. Using instances therefore saves time and reduces the chance of inconsistent elements across screens.

Question 33

What is the difference between view and edit access for a shared Figma file?

Accepted Answer

View access lets people look at a file and open its prototypes without changing anything. Edit access lets collaborators move, create, and modify objects directly on the canvas. Owners choose the access level when they share a file, and they can change it later.

Question 34

What are comments in Figma, and how are they placed?

Accepted Answer

Comments are notes pinned to a specific spot on the canvas, used for feedback, questions, and discussion. Press C or choose the comment tool, then click where the note should appear. Teammates can reply in the thread, and resolved threads can be hidden to keep the canvas tidy.

Question 35

What is a prototype in Figma, and what are flows?

Accepted Answer

A prototype links frames together with interactions so viewers can click through a design as if it were a working product. A flow is a sequence of connected frames that represents one user path, such as signing up for an account in an app.

Question 36

What is the Smart Animate transition used for?

Accepted Answer

Smart Animate matches layers with the same name between two frames and animates their changes in position, size, color, and opacity. It is useful for making a button expand or a menu slide smoothly from one state to the next. Layers must share matching names to animate between frames.

Question 37

What does the Export setting let you do with a selected frame or layer?

Accepted Answer

The Export section lets you save the selected object as an image or other file format, such as PNG, JPG, SVG, or PDF. You can set a scale multiplier, such as 2x for high-resolution screens, to produce sharper assets. Export settings are saved with the layer, so the same output can be regenerated later.

Question 38

What is Figma's Dev Mode used for, and who is it designed for?

Accepted Answer

Dev Mode is a view of a Figma file designed for developers, showing measurements, spacing, colors, assets, and code snippets for each element. It helps engineers implement designs accurately without changing the original file. Designers can mark sections as ready for development to signal when handoff is complete.

Question 39

What is branching in Figma, and why would a team use it?

Accepted Answer

Branching creates a separate copy of a design file where a team can explore changes without affecting the main version. When the work is ready, the branch can be reviewed and merged back into the main file. This lets several people experiment in parallel while keeping the primary design stable for others.

Question 40

What is the Figma file's version history used for?

Accepted Answer

Version history records earlier saved states of a file, letting you see who changed what and when. You can restore a previous version if a change turns out to be a mistake. Named versions can also mark milestones such as a client review or a final handoff.

Figma Design Basics Flashcards

1Interface and Navigation

2Frames, Layers and Constraints

3Shapes, Vectors and Styling

4Components and Auto Layout

5Collaboration, Prototyping and Export

Learning Resources