Figma Figma Exporting and Developer Handoff 2 — Questions and Answers
Question 1: What is Figma Dev Mode primarily designed to provide?
- Tools for creating animations and micro-interactions
- A focused interface giving developers design specs, code snippets, and asset downloads (Correct answer)
- A dashboard for managing team billing and seat assignments
- A workspace for running moderated usability testing sessions
Correct answer: A focused interface giving developers design specs, code snippets, and asset downloads
Dev Mode gives developers a streamlined interface focused on inspecting designs, copying code, and downloading assets without the distraction of design tools.
Question 2: What must be true before you can export multiple selected layers as individual files in Figma?
- All layers must be grouped inside a single frame
- Each layer must have its own export settings individually configured (Correct answer)
- The file must be saved to a team library first
- Only components can be batch exported, not regular layers
Correct answer: Each layer must have its own export settings individually configured
Each layer needs export settings added to it individually; once configured, you can select multiple layers and export them all simultaneously.
Question 3: 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)
- Overrides the file extension for the exported asset
- Sets the image compression quality level for the export
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 4: When a developer inspects a text layer in Figma's Inspect panel, which of the following properties is NOT displayed?
- Font family name
- Font size in pixels
- Font license and usage rights (Correct answer)
- Line height value
Correct answer: Font license and usage rights
The Inspect panel shows implementation-relevant properties like font family, size, weight, line height, and letter spacing, but not licensing information.
Question 5: Which export file format produces the smallest file size when exporting photographic images from Figma?
- PNG
- SVG
- JPG (Correct answer)
Correct answer: JPG
JPG uses lossy compression which significantly reduces file size for photographs compared to lossless PNG, at the cost of some quality.
Question 6: What is the main advantage of exporting a Figma design as a PDF?
- PDF supports embedded animations and transitions
- PDF preserves vector graphics and is resolution-independent, ideal for print (Correct answer)
- PDF produces the smallest file size of all export formats
- PDF is the only export format fully supported across all web browsers
Correct answer: PDF preserves vector graphics and is resolution-independent, ideal for print
PDF preserves vector data and is resolution-independent, making it the best choice for print materials and shareable documentation.
Question 7: In Figma's Inspect panel, what does clicking 'Copy as CSS' do?
- Copies the selected layer's CSS properties to the clipboard (Correct answer)
- Downloads a CSS stylesheet file for the entire page
- Converts the vector layer into an HTML DOM element
- Applies the layer's styles to all sibling layers on the canvas
Correct answer: Copies the selected layer's CSS properties to the clipboard
'Copy as CSS' copies the CSS representation of the selected layer's properties directly to the clipboard for immediate use in code.
Figma Figma Exporting and Developer Handoff 2
What is Figma Dev Mode primarily designed to provide?