Turn wireframes into webdesign in a blink of an eye ?

With the Pilo’Press Figma kit, you can easily turn your wireframes into webdesign or directly create your webdesign pages by editing the design system at your needs

The stylesheet

To edit styles of the file go to Stylesheet page. You’ll find every atoms you can edit for the project. This page is also a great exemple of what you need to handoff to your developers.

It’s divided in several frames gathering all the styles and atoms you can use in your design such as colors, fonts, shadows… In the right pannel, if you have nothing selected (simply click outside an artobard) you can find the sum up of all the styles an edit them directly from here

Tailwind CSS

Since the developement part of Pilo’Press is based on the Tailwind framework we created a design system matching values delivered by tailwindcss. It means that font-size, color gradation… are compatible with the solution your developers will use. You can change those values if you want but keep in mind that it’s made to ease developers tasks.

Editing styles

You can do it with this two solutions:

• One by one: Select the color or the font you want to edit. On the right pannel, click on the name of the color and by hovering the style you’ll find an “edit” icon. This will allow you to select a new tint or to directly type the hexadecimal

• Batch styling: Thanks to BatchStyler plugin you can edit several styles in one operation. Run the plugin and will open a new window with two tabs. If you want to edit the text styles you can select all the styles that are listed (or only the titles one, or the ones you want, it’s your design after all ? ). In the Family field, select the font you want to apply, hit “Update styles” et voilà
• 

If you interested with other plugins, please read

Editing atoms and molecules

On this stylesheet, in addition to styles, you’ll find atoms that are used in several components. Those atoms are the one that can be customized for you project, that’s why they are on the stylesheet so developers can know what the inputs looks like or the different states of your buttons.

To edit the main component, right-click on the component and you’ll be redirected to the Component page. You can edit the master (or child) component to make changes at the right level. For more information you can go to the section ” Editing the main component” on How to create wireframes ?

Adding images

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 Useful presets to help you find free images,