All Collections
Integrations
Figma Import
Figma Import – Best Practices
Figma Import – Best Practices

Learn the best practices while importing static Figma designs into Vev sites

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

This best practices guide provides definitive information about using the Figma import feature in the best possible way.

#1 Design well-structured frames

  • Design your frames for an ideal web page with a header, sections, and a footer.

  • The frames from Figma will be imported as individual sections into Vev along with the given names. So, use well-defined names like Home, About … and so on.

  • A well-structured Figma project prevents further manual work on Vev. Your webpage looks visually appealing and enhances browser performance.

#2 Designing your webpage for desktop, tablet & mobile view saves you a lot of time

Figma import can only import one breakpoint into the Vev project. The main breakpoint will depend upon the width of the Figma frame.

Especially, the components like the navigation bar look different at each breakpoint. Therefore explicitly designing for a specific view saves time while importing into Vev.

  • 1024px for desktop view

  • 600px to 1023px for tablet view

  • < 600px for mobile view

The widths of all the imported components are represented as percentages in Vev. This helps the user to adapt to different breakpoints quickly.

#3 Use the latest version of the Figma layouts to import assets along with the set Auto-layouts

Vev supports all the Auto-layout features within the latest version of Figma.

You can just continue working with the same Auto-layouts from your Figma project even after importing into Vev.

#4 It is time to make your project publication-ready.

  • After you have imported the Figma designs, ensure that all the assets are correctly imported into Vev. Adjust your project to the necessary breakpoints.

    Tip: If necessary, ungroup the elements to align them as you want.

  • Use 1, 2, and 3 on your keyboard as shortcuts for switching between Desktop, Tablet, and mobile view respectively.
    While making your project for other breakpoints, use the options like “Resize to fill horizontally”, “Resize to fill vertically”, and “Resize to fit” to build a responsive webpage easily.

Related articles

Did this answer your question?