Skip to main content
All CollectionsTips & Tricks
Exporting grid layouts from design tools
Exporting grid layouts from design tools

Learn how to export grid layouts from Figma, Sketch, Adobe XD, and Photoshop to Zeplin

Tuba avatar
Written by Tuba
Updated over 5 months ago

Zeplin automatically displays your layout grids in screen details when you set them on Figma, Sketch, Adobe XD, or Photoshop and publish your designs into Zeplin.

You can enable layout grids and access their details from the "View grid properties" button at the bottom left in Zeplin while inspecting your designs.

Setting up layout grids

Figma

To set up layouts in Figma, click the + icon next to the "Layout grid" at the right panel. Zeplin supports both column and row layouts you set in your design file.

Sketch

You can set up layouts from the "View > Canvas > Layout Settings..." menu in Sketch. Zeplin supports both column and row layouts you set in your design file.

Adobe XD

It is sadly not possible to view grids on Zeplin with the latest Zeplin’s XD plugin.

Previously, you could set up layouts from the GRID section of the property inspector in Adobe XD and view column layouts on Zeplin. This is no longer possible due to a limitation with Adobe XD's plugin API, but we're in touch with their team to restore this functionality.

Photoshop

You can set up layouts from the menu "View > Guides > New Guide Layout..." in Photoshop. Zeplin supports only the column layouts you set in your design file.


Related articles

Did this answer your question?