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, and3on 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.