MacBook SVG in Figma: Compose a Desktop Hero
Choose a MacBook lid position, add the SVG to a Figma desktop hero, and balance the device with headline space.
A MacBook illustration can anchor a desktop product hero while leaving room for a headline and call to action.
Set the lid position in the model viewer first. The exported SVG carries that still pose into Figma.
Choose an open or closed pose
Use a closed position when the hero needs a compact silhouette or a quieter device image. Choose an open position when the screen and keyboard should both read clearly.
The MacBook Pro viewer offers 0°, 60°, 105°, and 120° lid positions. Select the pose and theme, then export SVG.
Place the SVG in the hero
- Drag the exported SVG file from your computer onto the Figma canvas. Figma converts an imported SVG into editable vector layers.
- Set up a wide desktop frame. Place the MacBook on one side and leave a clear text column on the other for the headline and primary action.
- Select the artwork and press K to use Figma’s Scale tool. Drag a corner to resize it proportionally; strokes and effects scale with the artwork. Leave breathing room around the screen and base, including the corners of the hero frame.
Balance the device and headline
An open pose has more height and detail. Give it enough width to keep the screen and keyboard legible. A closed pose can sit lower in the frame and leave more space for copy.
Use the Layers panel to select available vector layers. Enter vector edit mode on a vector layer to adjust its points or properties. Grouping and path boundaries depend on the imported SVG.
Keep the selected pose
The SVG is a static image of the exported lid position. To show another position, export a new SVG from the viewer. Use the standalone HTML viewer when you need its opening controls.
Questions
Which pose works best for a desktop hero?
Use an open pose when the screen and keyboard are part of the product story. Use a closed pose for a compact device image beside more copy.
Can I change the lid angle in Figma?
No. The SVG keeps the angle selected in the viewer. Export another still to use a different angle.