Version 1.1
120 layouts
Tutorial

How to create
wireframes in Figma

Import

Just drag and drop the downloaded file to Figma workspace. After loading launch the file.

Combine blocks

Go to the page Desktop. There are all ready website blocks divided by categories. Let's start with them.

Select a block you like and copy and paste it on the empty area. Also, you can drag a block holding the Alt key. Combine several blocks to create a website page.

When you finished laying out blocks, select them all and set up the Auto layout by Shift+A shortcut. The spacing between items has to be zero, adjust it if necessary in the right sidebar.

You got a desktop version of the website page, you can easily reorder blocks. Repeat these steps on Tablet and Mobile pages to get adaptive versions.

Input content

When you set up the Auto layout you can easily input any content. Double click on a text block and type your text of any amount, the layout works like a developed website. Duplicate or delete elements, they will adapt saving spacings. Don't forget to insert images into mockups.

Customize

Go to the page Styles to see style changing. Edit styles in the right sidebar. Customize particular components. All changes apply to the blocks. If you made a mistake and broke something, make a backup in the version history.