Lessons / Software

Perspective in Figma and Canva: What Exists, What Works, and the Grid Workaround

Neither Figma nor Canva has a native perspective or skew transform. What each can do, the plugins and apps that add it, and the grid workflow that needs none.

Figma and Canva both come up in searches for perspective tools, and both give the same answer: nothing native. This guide says exactly what each can do, which plugins and apps fill the gap, and the workflow that avoids them entirely by doing the perspective in the browser tools here and bringing in a flat result, which is how most people end up working anyway.

Figma

Figma's transform set is move, scale, rotate and flip. There is no skew, no distort, no 3D rotation of a layer, and no perspective camera; the feature request for 3D transforms has been open on the Figma forum for years without a response. Whatever perspective appears in a Figma file was made by a plugin or imported as an image.

Plugins. The Community tag for perspective lists a dozen options. Perspective (Square One) applies isometric, dimetric and cabinet axonometric transforms and outputs vectors, which is what most Figma "perspective" illustration is: parallel projection, no vanishing points. Perspective Toolkit and Isometric & Perspective Toolkit are similar. Skew and SkewIt add the missing skew transform. Perspective Distort, Perspective Transform and Freeform Transform move four corners independently, which is the true projective transform, usually producing a bitmap. i3D and Mockuper wrap devices and mockups. Read each plugin's page for whether the output stays vector; the four-corner ones generally do not, and every plugin bakes the result, so the original flat frame should be kept.

The grid workflow. For illustration in perspective, the cleanest route needs no plugin. Set the camera on the 2-point grid or 3-point grid, export SVG, and paste it into Figma: it arrives as real vector lines, so the horizon and vanishing points are geometry you can snap to with the pen tool. Lock the grid layer and draw above it. For isometric work, the isometric grid generator exports the matching 30°, dimetric or pixel-art grid as SVG, and the plugins' projections land on it exactly.

For UI mockups on a receding screen, the perspective warp tool does what the four-corner plugins do: drag the corners of the exported screenshot onto the device in the photo and export the PNG. And when the target is the web rather than an image, the CSS perspective generator produces the perspective and rotate values that put the real element in perspective in the browser, with no image at all.

Canva

Canva's element transforms are flip (horizontal, vertical) and rotate; there is no skew, distort or perspective control on any element. Two things come close. Mockups (Elements > Mockups, or Edit image > Apps > Mockups) maps a design onto product and screen photographs whose perspective is fixed by Canva, with Fill, Fit and Smart Crop as the only adjustments; if one of the stock mockups has the angle you want, it is the quickest answer. Third-party apps in Canva's directory, Skew Image and Transform Image among them, apply a skew or a four-corner perspective transform to an image you upload.

Otherwise the image has to arrive already in perspective. Export the design from Canva as PNG, put it in perspective in the perspective warp, and upload the result: Canva treats it as a flat picture with transparent corners, and it composes with everything else. For a perspective grid to draw or lay out over, Canva takes PNG, not SVG as vectors, so export a transparent PNG from the grid tool at the design's pixel size, upload it, place it, lower its transparency, and lock it.

Set the view, then export SVG for Figma or a transparent PNG for Canva.open in the full tool →

Choosing between them

If the job is an isometric illustration, Figma plus a projection plugin is a good tool and the isometric grid here is its base layer. If the job is a device mockup, either app plus the perspective warp, or Canva's own mockups. If the job is true perspective drawing with vanishing points, neither app is the place; draw on the grid in a painting app with snapping (Krita, Clip Studio, Sketchbook) and bring the result into Figma or Canva as an image.

Related

CSS perspective generator · perspective warp · isometric grid generator · Illustrator perspective grid tool · perspective drawing tools compared

Questions

Does Figma have a perspective or skew tool?

No. Figma's native transforms are move, scale, rotate and flip; there is no skew, no distort and no 3D rotation, and the request for 3D transforms has been open on the Figma forum for years. Perspective comes from Community plugins, which rebuild the shape as new vectors or bitmaps.

Which Figma plugins add perspective?

Plugins on the Figma Community tagged perspective include Perspective (isometric, dimetric and cabinet axonometric transforms with vector output), Perspective Toolkit, Isometric & Perspective Toolkit, Skew, SkewIt, Perspective Distort, Perspective Transform, i3D, Mockuper and Freeform Transform. Most produce parallel (isometric) projections rather than true vanishing-point perspective; check the plugin page for which.

Does Canva have a perspective, skew or 3D effect?

No native one. Elements can be flipped and rotated only. Canva's Mockups feature places a design onto product and screen photographs at fixed perspectives, and third-party apps in Canva's app directory such as Skew Image and Transform Image apply a perspective transform to an uploaded image.

How do I put a design in perspective for a mockup in Figma or Canva?

Export the design as a PNG, put it in perspective with the perspective warp tool here by dragging its four corners onto the plane in your mockup photo, and import the result. Both apps then handle it as a flat image. This is the same operation the plugins perform.

How do I draw on a perspective grid in Figma?

Export a grid from this site as SVG and paste it into Figma: it arrives as editable vectors you can lock on their own layer and draw over with the pen. SVG keeps the vanishing points and horizon as real geometry; a PNG at reduced opacity works too and is what Canva needs.

Can I make isometric illustrations in Figma?

Yes, and it is what the Figma perspective plugins mostly do: apply a 30° isometric or a dimetric projection to flat artwork. The isometric grid generator here exports the matching grid as SVG for the base layer.

Newsletter

A new lesson and a new grid, about once a month.

Each lesson arrives by email before it goes on the site, with the grid it was drawn on and the link to open it. Subscribers also get both free starter packs and the subscriber price on the paid ones. Never more than two emails a month; one click to leave.

Handled by Kit on our behalf. Your address is used for this letter and nothing else — see the privacy page.