To go further
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
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.
You can do it with this two solutions:
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.
Important: To edit those atoms, please edit the main components stored on the Component page. Do not edit on the stylesheet, you’ll only be affecting an iteration.
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 ?
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,
It’s ready and it’s free!