How to create wireframes

Wireframes are really handy if you need to set up the structure of your website. It’s not a mandatory step but thanks to Pilo’Press library you can then turn them into webdesign in a few clicks.

Starting my project with wireframes

Once you’re all set up and have done the onboarding you can start creating you first project. It’s pretty easy but those few steps might help you getting through:

• Start on the wireframes page
• Create a new artboard (layouts work best with Desktop version (1440px width) but you can of course adapt it to your needs)
• Go to Assets panel to find all the components and layouts that are available.
• All the sections are listed in the Section tab and divided into sub categories
• You can than simply drag&drop your assets to your artboard

The assets panel

In the top left hand corner you’ll find the assets panel, this is where you’ll find all the layouts and components to use

They are divided into three main catégories: Sections, ❖ Components and Stylesheet

• Sections: This is where you can find the prebuilt layouts
• ❖ Components: Where all the atoms and molecules are ( Buttons, cards, badges, inputs…)
• Stylesheet: You’ll find one component: The logo. You can update it for you project

If you don’t know which component or layout you want you can search it buy typing in the top bar.

How can I edit those awesome layouts ?

The section you’re using are flexible, isn’t it amazing ? You can apply several changes within the section and your developer (if you’re working with that species ?) will have those options either

Figma variants

To create and manage the options, we used Variants. We simply built variations of sections so you can add/remove option, change constraints settings, proportions…

To swap between options, just select your layout and check the right panel. Underneath the section name you’ll fin properties with several option. This is where you can play with variants settings

Editing the main component

You can go a little further than just editing variants but for that you need to access the master component. Variants are always referring to a Master component which allow you to easily apply changes to all the variants of the section in one place.

Logo-simple-grid layout with the master at the left ruling the variants at the right. To access the master simply go to the Sections page or right-click on any instance and “Go to main component“

Master are very handy for updating easily numerous components. Take the button component for instance:

It’s made with 300 variants such as primary and secondary buttons, different sizes (Large, medium, small), different styles (Filled, outlined,…) If you want to change the border radius to round them up, it would be exhausting to do it 300 times. Thanks to master component you can do it on the higher level hierarchy and the changes will be reverberated in all the instances of this master. This also works on child components , a lower level, which creates another level of control. If you want to round outlines button but not filled ones, you can do it on a child level and it will affect only those variants.

This is pretty much the same for every components or sections. A master rules over the variants. if you want to make changes that are not variants options, make it there ?

Tips to use when creating your wireframes

• Autolayout: You can turn your main artboard (webpage) into an autolayout frame. Doing so, all the section you’ll drop will automatically align and well postioned. It’s also easier to switch places or remove/add elements without constantly change the frame height
• Components panel: By hitting ⬆️ +i you can open the component panel so you can quickly access layouts
• Filter your assets: In the standard assets panel, you can display it by name or with the layout preview by simply hitting the top right icon