Figma Professional Practice Test — Questions and Answers

Question 1: What is FigJam in the context of Figma collaboration?

An online whiteboard tool integrated with Figma for brainstorming and workshops (Correct answer)
Figma's prototyping mode
A plugin marketplace
A code handoff feature

Correct answer: An online whiteboard tool integrated with Figma for brainstorming and workshops

FigJam is Figma's collaborative whiteboard product, designed for brainstorming, diagrams, and team workshops alongside design files.

Question 2: What does pressing Shift+2 do when an object is selected?

Zoom to fit the selection (Correct answer)
Lock the layer
Duplicate the object
Hide the layer

Correct answer: Zoom to fit the selection

Shift+2 zooms the canvas to fit the currently selected object.

Question 3: What is the purpose of Figma's 'Dev Mode' when sharing with developers?

It hides prototype interactions
It converts Figma files to React code
It provides a code-focused view with CSS, iOS, and Android specs plus asset export (Correct answer)
It lets developers edit design layers

Correct answer: It provides a code-focused view with CSS, iOS, and Android specs plus asset export

Dev Mode gives developers a read-only, code-focused interface showing CSS/Swift/Kotlin specs, measurements, and downloadable assets without exposing edit controls.

Question 4: How can a Figma file owner restrict a shared link so that only people within their organization can access it?

By setting the link to 'Only invited people' (Correct answer)
By exporting it as a password-protected PDF
By moving it to a private folder
By using Dev Mode only

Correct answer: By setting the link to 'Only invited people'

Changing the link-sharing setting to 'Only invited people' or 'Anyone at [org]' in the Share dialog restricts access to specific users or organization members.

Question 5: Which resizing setting in Auto Layout makes text grow only horizontally?

Fixed width
Fill container vertically
Hug contents with fixed height / horizontal resizing (Correct answer)
Clip content

Correct answer: Hug contents with fixed height / horizontal resizing

Setting horizontal resizing to hug or auto-width lets text expand sideways.

Question 6: What does the Figma 'Unsplash' plugin allow designers to do?

Generate AI images from text prompts
Apply photo filters to existing images
Convert photos to vector illustrations
Insert free high-quality photos from Unsplash directly into Figma frames and shapes (Correct answer)

Correct answer: Insert free high-quality photos from Unsplash directly into Figma frames and shapes

The Unsplash plugin lets you search and insert royalty-free Unsplash photos directly into selected Figma layers without leaving the editor.

Question 7: What is the purpose of the Assets panel?

Adjust canvas zoom level
Manage team permissions
View comment threads
Access reusable components and libraries (Correct answer)

Correct answer: Access reusable components and libraries

The Assets panel lets you browse and insert components and library assets.

Question 8: What does the 'Multiplayer' cursor feature in Figma show?

A list of recently moved elements
The history of cursor movements
The real-time cursor positions and names of all collaborators viewing the same file (Correct answer)
An animation of cursor effects

Correct answer: The real-time cursor positions and names of all collaborators viewing the same file

Multiplayer cursors show every active collaborator's named cursor in real time, allowing teams to see where each person is working.

Question 9: What does 'Go to Main Component' do when selected on a Figma instance?

Detaches the instance
Opens the component in a new file
Exports the component as SVG
Navigates and selects the main component on its origin canvas location (Correct answer)

Correct answer: Navigates and selects the main component on its origin canvas location

'Go to Main Component' jumps your viewport to the main component's location on the canvas so you can edit the source directly.

Question 10: What is the benefit of using a "Set Variable" action in advanced prototyping?

It permanently edits the design file
It stores and updates dynamic values to drive conditional logic (Correct answer)
It locks the prototype
It exports variables to CSS

Correct answer: It stores and updates dynamic values to drive conditional logic

Set Variable updates stored values that can power conditional and dynamic prototype behavior.

Question 11: Which device option in the Prototype panel sets the viewport size for presentation mode?

Device frame / model (Correct answer)
Auto layout
Constraints
Layout grid

Correct answer: Device frame / model

Choosing a device model sets the presentation viewport and surrounding frame.

Question 12: How does the Figma + Jira integration help product teams?

It generates Jira tickets automatically from Figma comments
It embeds Figma designs directly in Jira issues and links issues to Figma frames for traceability (Correct answer)
It syncs Jira sprint timelines to Figma timelines
It exports Figma files as Jira project templates

Correct answer: It embeds Figma designs directly in Jira issues and links issues to Figma frames for traceability

The Figma-Jira integration lets teams embed live Figma designs inside Jira issues and link Figma frames to specific tickets, keeping design and development work connected.

Question 13: Which feature lets multiple designers edit the same file simultaneously?

Version locking
Real-time multiplayer collaboration (Correct answer)
Offline export
Single-user mode

Correct answer: Real-time multiplayer collaboration

Figma's multiplayer allows several people to edit one file live at once.

Question 14: How do you apply a published team library style to a layer in your Figma file?

Click the four-dot style icon next to fill/text/effect and select the style from the library (Correct answer)
Drag the style from the Assets panel onto the layer
Import the library file and copy the style
Use Plugins > Apply Library Style

Correct answer: Click the four-dot style icon next to fill/text/effect and select the style from the library

Clicking the style selector icon next to any design property opens a panel listing all local and enabled library styles for you to apply.

Question 15: What does the Figma-to-Storybook integration (via the Storybook plugin) allow teams to do?

Link Figma components to their corresponding Storybook component stories for design-code parity (Correct answer)
Auto-generate React code from Figma components
Export Figma frames as Storybook stories in JSON
Import Storybook components into Figma as editable layers

Correct answer: Link Figma components to their corresponding Storybook component stories for design-code parity

The Storybook plugin links Figma components to their live Storybook counterpart stories, helping teams verify that design and code components stay in sync.

Question 16: What does the Dev Mode toggle change about the interface?

Locks the canvas
Exports the whole file
Switches to a view optimized for inspecting and handing off designs (Correct answer)
Hides all layers

Correct answer: Switches to a view optimized for inspecting and handing off designs

Dev Mode presents a developer-focused view with inspection and handoff tools.

Question 17: Which alignment option in Figma Auto Layout aligns children to the top-left of the frame?

Baseline
Bottom Right
Top Left (Correct answer)
Center Center

Correct answer: Top Left

The nine-point alignment grid in Auto Layout's Design panel lets you choose Top Left to pin all children to that corner.

Question 18: When using Figma's component swap feature, what determines which components appear in the swap suggestions?

Components from the same library or file with similar names (Correct answer)
Components with identical sizes
Only components in the same frame
The most recently used components

Correct answer: Components from the same library or file with similar names

Figma's swap suggestions show components from the same library or file, prioritizing those with similar names to the current component.

Question 19: In Figma, what is a 'component set'?

A set of components shared across teams
A group of variants combined into a single container (Correct answer)
A folder of unrelated components
A published component library

Correct answer: A group of variants combined into a single container

A component set is a special container that holds all variants of a component, enabling designers to switch between them in the Design panel.

Question 20: What does the Layers panel on the left display?

Only the selected frame's export settings
The version history of the file
A list of installed plugins
The hierarchy of all objects on the current page (Correct answer)

Correct answer: The hierarchy of all objects on the current page

The Layers panel lists every object on the page in a nested hierarchy.

Question 21: What does the 'Can view' permission allow a collaborator to do in Figma?

Publish libraries
Invite other members
View, comment, and export assets but not edit (Correct answer)
Edit layers and components

Correct answer: View, comment, and export assets but not edit

'Can view' permission lets collaborators inspect designs, leave comments, and export assets without the ability to edit any layers.

Question 22: What is the purpose of the rulers in Figma?

Run plugins
Add comments
Help measure and position elements precisely (Correct answer)
Change the color theme

Correct answer: Help measure and position elements precisely

Rulers display measurements to help align and position elements.

Question 23: In a Figma design system, what is the role of a 'grid style'?

To align layers using the grid tool
To export grid templates as CSS
To save reusable layout grids and column/row configurations for consistent layout structure (Correct answer)
To apply a background grid image to frames

Correct answer: To save reusable layout grids and column/row configurations for consistent layout structure

Grid styles save layout grid configurations (column count, gutter, margin) so every screen frame applies the same consistent grid.

Question 24: What programming language are Figma plugins written in?

Swift
JavaScript or TypeScript (Correct answer)
Python
Dart

Correct answer: JavaScript or TypeScript

Figma plugins are built with JavaScript or TypeScript using the Figma Plugin API, enabling interaction with the canvas and file structure.

Question 25: What is Figma's 'Widget' feature (as opposed to a plugin)?

An interactive, persistent object placed directly on the canvas that collaborators can interact with (Correct answer)
A Figma variable type
A prototype interaction component
A mini-app embedded in the plugin panel

Correct answer: An interactive, persistent object placed directly on the canvas that collaborators can interact with

Widgets are interactive objects placed on the Figma or FigJam canvas — like voting dots or Kanban boards — that persist and that all collaborators can interact with in real time.

Question 26: What is the primary use case for the Figma 'Autoflow' plugin?

Drawing flow arrows between frames to create user flow diagrams (Correct answer)
Syncing prototype flows to Jira
Generating Auto Layout frames automatically
Automating component variant creation

Correct answer: Drawing flow arrows between frames to create user flow diagrams

Autoflow draws connecting arrows between selected frames, helping designers create clear user flow diagrams and screen maps within Figma.

Question 27: What does the Figma REST API endpoint GET /v1/files/:file_key return?

A list of all team files
Only the file metadata like name and last modified
The full document tree of a Figma file including pages, frames, and layers (Correct answer)
A list of published components

Correct answer: The full document tree of a Figma file including pages, frames, and layers

The GET /v1/files/:file_key endpoint returns the complete JSON document tree of a Figma file, including all pages, frames, components, and layer properties.

Question 28: What does setting "Fixed position when scrolling" on a layer accomplish?

It keeps the layer pinned while the rest of the frame scrolls (Correct answer)
It deletes the layer on scroll
It hides the layer during scroll
It animates the layer offscreen

Correct answer: It keeps the layer pinned while the rest of the frame scrolls

Fixed layers stay in place (like a sticky header) while other content scrolls.

Question 29: What does 'Follow' mode do in Figma when you click another collaborator's avatar?

Grants them edit access
Sends them a message
Copies their layers to your canvas
Syncs your viewport to follow their navigation in real time (Correct answer)

Correct answer: Syncs your viewport to follow their navigation in real time

Clicking a collaborator's avatar enters Follow mode, mirroring their viewport so you see exactly what they see as they navigate the file.

Question 30: Which Figma Auto Layout property controls the order in which children are stacked on the Z-axis when they overlap?

Canvas stacking order shown in the Layers panel (Correct answer)
Gap setting
Padding setting
Alignment grid

Correct answer: Canvas stacking order shown in the Layers panel

The Z-axis stacking order for Auto Layout children is determined by their order in the Layers panel — items higher in the list appear on top.

Question 31: In Figma's branching workflow, what does 'merging' a branch do?

Deletes the branch file
Creates a new team project
Copies all branch changes back into the main file (Correct answer)
Publishes the branch as a library

Correct answer: Copies all branch changes back into the main file

Merging a branch applies all design changes made in the branch back to the main file, integrating the work into the primary source of truth.

Question 32: What are 'Styles' in Figma used for?

Exporting design tokens to code
Defining canvas background colors only
Automating prototype flows
Saving reusable properties like colors, typography, effects, and grids for consistent use (Correct answer)

Correct answer: Saving reusable properties like colors, typography, effects, and grids for consistent use

Figma Styles let you save and reuse color, text, effect, and grid definitions across your design, ensuring consistency and easy global updates.

Question 33: When a team library component is updated by its owner, what notification do file users receive in Figma?

The update applies automatically with no notification
A Slack message via integration
A banner in the file asking if they want to accept the library updates (Correct answer)
An email notification only

Correct answer: A banner in the file asking if they want to accept the library updates

Figma shows a banner notification inside files that use the library, offering users the choice to review and accept the component updates.

Question 34: What does the comment tool (shortcut C) add to the interface?

Pinned feedback notes on the design (Correct answer)
New vector layers
Export presets
Color styles

Correct answer: Pinned feedback notes on the design

The comment tool places pinned notes for feedback on the canvas.

Question 35: Where do you see the exact X and Y position of a selected object?

In the version history
In the comment tool
In the Pages list
In the Design panel's position fields (Correct answer)

Correct answer: In the Design panel's position fields

The Design panel shows X and Y coordinates for the selected object.

Question 36: Which connection appears in the canvas to show a prototype interaction between two frames?

A red constraint marker
A dashed grid line
A blue arrow/noodle (Correct answer)
A green auto-layout badge

Correct answer: A blue arrow/noodle

Prototype connections are shown as blue arrows ("noodles") linking elements to destinations.

Question 37: What does 'Can edit' permission allow a collaborator to do in Figma that 'Can view' does not?

Leave comments
Modify layers, components, and styles within the file (Correct answer)
Export assets
Access the file offline

Correct answer: Modify layers, components, and styles within the file

'Can edit' grants full design editing rights — creating, moving, and modifying layers, components, and styles — which 'Can view' does not allow.

Question 38: The function and interaction of this prototype are generally constrained.

Low Fidelity Prototyping (Correct answer)
High Fidelity Prototyping
Evolutionary Prototyping
Throw Away Prototyping

Correct answer: Low Fidelity Prototyping

Low-fidelity prototypes are basic, often hand-drawn or digitally sketched, representations of a design. They focus on core functionality and layout rather than visual details, meaning their interactions are typically limited and constrained. Their purpose is to quickly test concepts and user flows without investing much time in visual polish.

Question 39: Let's say you're developing an app for students in the third grade. Who in your social circle would make the best test subjects?

Your grandma's church choir's three tenors
Three eighth-graders from the scout group of your neighbor (Correct answer)
Men from your book club—three of them
Three female bowling league members

Correct answer: Three eighth-graders from the scout group of your neighbor

While ideally, you'd test with actual third-graders, the best available option from the choices are eighth-graders. They are still within a relevant age range (children/young adolescents) and would likely provide more accurate feedback on an app designed for younger students than adults. They can offer insights into child-friendly interfaces and engagement, even if not the exact target demographic.

Question 40: What does the 'Scale' tool (K) do that the resize handles do not?

Detaches a component
Scales strokes, effects, and corner radii proportionally (Correct answer)
Adds Auto Layout
Changes the layer color

Correct answer: Scales strokes, effects, and corner radii proportionally

The Scale tool resizes an object along with its strokes, effects, and radii.

Question 41: In Figma, what is the purpose of the 'Observers' list shown at the top of a file?

It shows users who have commented
It lists users who have edit access
It lists users who exported the file
It shows users currently viewing the file in real time (Correct answer)

Correct answer: It shows users currently viewing the file in real time

The observer avatars at the top of a Figma file show everyone currently viewing or editing the file at that moment.

Question 42: How does Figma handle simultaneous edits to the same layer by two users?

Figma locks the layer for one user at a time
The last change made takes precedence (Correct answer)
Both changes are merged automatically
The first user's change wins and the second is discarded

Correct answer: The last change made takes precedence

When two users edit the same element simultaneously, Figma uses last-write-wins — the most recent change overwrites the earlier one.

Question 43: What is the keyboard shortcut to create a component from a selected frame or object in Figma?

Alt+K
Ctrl+Alt+K (Correct answer)
Ctrl+K
Ctrl+Shift+K

Correct answer: Ctrl+Alt+K

Press Ctrl+Alt+K (Cmd+Option+K on Mac) to instantly create a component from a selected element.

Question 44: What does the Inspect (Dev Mode) panel provide to developers?

Team billing
Comment moderation
Plugin installation
CSS, measurements, and asset export details (Correct answer)

Correct answer: CSS, measurements, and asset export details

Inspect/Dev Mode surfaces code snippets, spacing, and exportable assets for handoff.

Question 45: Which popular plugin is commonly used in Figma to generate realistic dummy text for designs?

Content Reel or Lorem Ipsum plugins (Correct answer)
Lottie Files
Unsplash
Autoflow

Correct answer: Content Reel or Lorem Ipsum plugins

Plugins like Content Reel and Lorem Ipsum generators are widely used in Figma to fill text layers with realistic placeholder content.

Question 46: Which Figma feature lets you reuse a design element across multiple files and keep them in sync?

Frame templates
Local layer groups
Published library components (Correct answer)
Pinned layers

Correct answer: Published library components

Publishing components to a team library lets them be reused and updated across files.

Question 47: Where can developers find CSS code snippets and spacing values for a selected layer in Figma?

Assets panel
Inspect panel (Correct answer)
Layers panel
Design panel

Correct answer: Inspect panel

The Inspect panel displays CSS, iOS, and Android code snippets along with design specs for developers to reference.

Question 48: Where do you toggle the visibility of a layer in the interface?

The Prototype tab
The lock icon in the toolbar
The eye icon next to the layer in the Layers panel (Correct answer)
The Design panel's Fill section

Correct answer: The eye icon next to the layer in the Layers panel

Clicking the eye icon beside a layer hides or shows it.

Question 49: Which blend mode is the default for a newly added layer?

Multiply
Screen
Overlay
Normal (Pass through for groups) (Correct answer)

Correct answer: Normal (Pass through for groups)

New layers use Normal blending by default; groups use Pass Through.

Question 50: What does the 'Suffix' field do when configuring export settings in Figma?

Adds text to the beginning of the exported filename as a prefix
Appends text to the end of the exported filename (Correct answer)
Sets the image compression quality level for the export
Overrides the file extension for the exported asset

Correct answer: Appends text to the end of the exported filename

The Suffix field appends specified text to the filename, which is commonly used to indicate scale factors like '@2x' or '@3x'.

Question 51: What may be characterized as a study technique used to check whether users of a product or service can do so without difficulty?

Wireframing
Usability Testing (Correct answer)
Strep Testing
Network Testing

Correct answer: Usability Testing

Usability testing is a research method where real users interact with a product or service to identify usability problems, collect qualitative and quantitative data, and determine the participant's satisfaction. Its core purpose is to evaluate how easy and intuitive a product is to use, ensuring users can achieve their goals efficiently and effectively.

Question 52: In Figma's Prototype panel, which interaction trigger fires when the cursor enters and stays over an element?

Mouse Down
On Drag
After Delay
While Hovering (Correct answer)

Correct answer: While Hovering

"While Hovering" keeps the action active only as long as the pointer remains over the element.

Question 53: How do you share a specific frame from a Figma file as a link that opens directly to that frame?

Export it as a PDF and share the file
Right-click the frame and choose 'Copy link' (Correct answer)
Use the Share button and select 'Frame link'
Send the file URL with a page number appended

Correct answer: Right-click the frame and choose 'Copy link'

Right-clicking a frame and choosing 'Copy link' generates a direct URL that opens Figma centered on that specific frame.

Question 54: What is a 'branch' in Figma, and what plan is it available on?

A linked external file, available on all plans
An isolated version of a file for experimenting, available on Professional and above (Correct answer)
A copy of a page, available on Starter
A read-only snapshot, available on Starter

Correct answer: An isolated version of a file for experimenting, available on Professional and above

Branches let team members work on isolated versions of a file and merge changes back — available on Figma's Professional, Organization, and Enterprise plans.

Question 55: What does the toolbar's Move tool (V) allow you to do?

Create a new frame
Add text
Select and reposition objects (Correct answer)
Draw vector paths

Correct answer: Select and reposition objects

The Move tool, shortcut V, selects and moves objects on the canvas.

Question 56: What is the default size of the web in Figma?

1080 x 720
1440 x 1024 (Correct answer)
1024 x 768
1024 x 1440

Correct answer: 1440 x 1024

When you select a 'Desktop' frame in Figma, the default size provided for a standard web design is 1440x1024 pixels. This dimension is a common starting point for web layouts, offering a good balance for modern desktop screens and providing ample space for content while maintaining a manageable aspect ratio.

Question 57: What property in Figma variants lets you define multiple visual states such as Default, Hover, and Pressed?

Prototype trigger
Frame property
Layer property
State variant property (Correct answer)

Correct answer: State variant property

A 'State' variant property allows you to define different visual states like Default, Hover, and Pressed within a single component set.

Question 58: When resolving a comment in Figma, what happens to it?

It is converted to a sticky note
It is permanently deleted
It is emailed to the file owner
It is marked as resolved and hidden from the default view but can be shown again (Correct answer)

Correct answer: It is marked as resolved and hidden from the default view but can be shown again

Resolving a comment archives it from the active comment list — it's not deleted and can be viewed again by toggling 'Show resolved comments'.

Question 59: When sharing a Figma prototype link, how can a designer control which frame a viewer sees first?

By selecting the desired starting frame before generating the share link in the prototype share dialog (Correct answer)
By deleting all other frames except the intended starting frame before sharing
By naming the frame 'Start' so Figma automatically detects it
By placing the desired starting frame in the top-left corner of the canvas

Correct answer: By selecting the desired starting frame before generating the share link in the prototype share dialog

The prototype sharing dialog lets you choose a specific starting frame, which determines the entry point when someone opens the shared link.

Question 60: What happens when you detach an instance from its main component?

It converts to a variant
It deletes the main component
It publishes a new library
It becomes a normal group no longer linked to updates (Correct answer)

Correct answer: It becomes a normal group no longer linked to updates

Detaching breaks the link so the instance stops receiving component updates.

Question 61: What does 'absolute position' mean for a child layer inside a Figma Auto Layout frame?

The child cannot be moved
The child is fixed to the frame's center
The child is locked to the canvas origin
The child is excluded from the Auto Layout flow and positioned freely (Correct answer)

Correct answer: The child is excluded from the Auto Layout flow and positioned freely

Enabling absolute position on a child layer removes it from the Auto Layout flow, allowing it to be placed freely overlapping other elements like a floating badge.

Figma Professional Practice Test

Assesses proficiency in Figma's core design and collaboration features, including interface navigation, auto layout, components and variants, prototyping, teamwork workflows, and plugin integrations used by UI/UX designers.

Questions

90 min

Time Limit

70%

To Pass

Checking for saved progress...

Exam Rules

You can skip questions and return to them later
Flag questions for review before submitting
No feedback shown until you submit the entire exam
Unanswered questions count as wrong — answer everything
10 pretest questions are mixed in and don't affect your score
Timer auto-submits when time runs out
Your progress is auto-saved every 30 seconds