Design Kit Figma

You don’t need to have any special knowledge in design. You can build a website in a relatively simple way. However, we recommend that you have this knowledge to get the most out of Pilo’Press.

You’ll find Pilo’Press library, our tool that we used at Pilot’in for designing website. We released a free version of the library with pre built layouts and hundreds of components. Everything is fully customizable and easily editable thanks to a design system. Here is a list of the layouts you’ll find:

• Hero headers
• Checkerboard
• CTA
• Icons
• Key numbers
• Menu
• Logo
• Footer

To learn more about the Pilo’Press read this article what is Pilo’Press

We use the basic “Desktop” size given by Figma: 1440px. All our layouts are built upon that scale but since they work with auto-layout, you can easily adapt them to your needs

Here is a list of the plugin we mostly use:

• Batch Styler (update severals styles)
• Lorem Ipsum (generate text)
• Unsplash (free photos for placeholder)

To learn more about plugins, please read Useful presets

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. You can also edit the main component to apply changes once for all the instances

To learn more about editing layouts read this article

It’s pretty easy to edit the design of all the layouts. In this Figma file, you’ll find a Stylesheet page, this is where all the magic happens ?.
Thanks to a design system, every section are connected to the stylesheet, so the changes you make there are updated across every single element.

To learn more about customization and web design, read this article

Yes ! Because all layouts are built with auto-layout you can turn them responsive and adapt them to your device size. You can also directly use the mobile version (360px) of the pre-build sections

To use images or icons in your design you first need to do a simple action to display or activate images in components having one.

To do that go to Component page and find the “media” artboard. There are two kind of medias: Images and Icons. Select the master component. In the layers, find the hidden “image [replace image here] layer and turn it on.

To change the image inside, select the image layer and in the right pannel replace the fill with your new image.

You can use Unsplash plugin to help you find free images,

We use fontawesome for small pictograms and icons in the Pilo’Press library. To display and use it you have to download the font

• FontAwesome: This tool is not a plugin, but a font called Font awesome. Font Awesome allow us to add icons easily without charging them on the file, it is not SVG, nor JPG or neither PNG but glyphs. We use the Premium version, but you can start with the free one. Or replace the icon layer in components by your own icons set. If you are already using Fontawesome, good for you ?. For the other you’ll have to follow a few step:
  1. Install free (or Pro) version of the font : https://fontawesome.com/v6.0
  2. When opening the Pilo’Press Library file you’ll have a Missing Font notification
  3. Just select Font Awesome 5 Pro and replace it with the one you downloaded

To use and edit icons in a component, select the icon layer (it should be a text layer) and type the name of the icon you want. You can find all the shortcuts on this page (I guaranty that you will know them by heart very quickly ?) https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free

Because Pilo’Press is also a framework plugin for WordPress, we had to coordinate our tools so the thing you have and can do on the Figma library will be the same on the developers side. TailwindCSS allowed us to have a common base regarding colors, font, spacing…