Design kit Pilo’Press: Quickstart guide

The Pilo’Press library is a library of components governed by a design system which is fully customizable for every project you’ll have in order to have a structurally reliable, editable and customizable system.

The structure of the document

The document is divided in pages (in the Layers pannel on the left). Each page has a function:

• Onboarding: One this page you’ll find a quick preview of the functionalities and how to use this library. You can follow it step by step and try to use it through tutorials
• Style sheet: It gathers all the elements (fonts, colors, spacing,…) and atoms that can be personalized for every project
• Wireframes & Webdesign: Those two pages allows you to to create your own webpages using the pre-built sections
• Components: Those are the molecules that are used across the sections. If you change one occurrence (main component) here, it will update through all your design
• Sections: Ready to use and customizable layouts with several options and configurations. You can find them in the Assets pannel and drag them into your design

Start your design

Go to Onboarding page to get familiarized with this Library, it will take you through every necessary steps and also help you set up the right working area

To learn more about the plugin that might help you go to Useful presets

After that you can jump straight into the Wireframes page and start dragging the layouts you want To do that simply go the assets pannel , go to Sections and just drag and drop it’s just easy as that.

If you want to know more about creating wireframes read: How to create wireframes ?

Customize the design system

Once your wireframes ar done, you can push your design to the Webdesign page (or just rename the Wireframes one) and then go to the Stylesheet to start playing with colors, fonts and atoms.

On this page you’ll find the sum up of all the styles used in your design. You can edit it and it will be updated across all your pages. You can also modify some atoms like buttons or input for example by editing the master component

To learn more about creating your webdesign please read this article Turn wireframes into webdesign in a blink of an eye ?