Exporting components for web development
A guide to help you and your team develop web components more easily.
Here at Pontte we always focus on what we learn from the users of our products. After identifying some problems on our institutional website, such as the inconsistency in the communication of our brand, we decided to redesign it.
During this project, Stargate was born, Pontte’s Design System, created in partnership with the Design team and the Development team and led by our senior front-end developer, Keit Oliveira, who showed us how the correct exportation is essential to make easier the development work and also to improve the performance of the website.
In the process, we learned a lot about good practices for exporting components and images and decided to put together a short guide to help not only us, but the design community as a whole.
Below you will learn how to export icons in SVG, export different image resolutions, without changing the size, and export complex backgrounds, all with images and GIFs to facilitate your understanding.
Exporting icons in SVG
To export linear vectors, such as icons created in Adobe Illustrator, for the development team, it is important that all lines are converted to curves:
Select all lines of the object> then go to object — expand> in the window that opens> check that fill and stroke are selected and click ok.
To export a curve, select it and go to object> compound path> make. Then export the file as svg, in file> export> export as…
It is important that all exported icons are 24px by 24px, if they have not been created in that proportion.
Activate the ruler inside Illustrator (ctrl + R) and with the right click on it, change it to measure in pixels. Select the icon to be resized and go to window> transform. If the height and width of the object are proportional, select the chain in the measurement box to maintain their proportion (it is important that it is already converted into a curve, otherwise it will not work), then change the size of the object to 24px by 24px.
To the artboard also be changed in the same proportion, press shift + O on your keyboard and select the artboard, and then change the height and width of the artboard to 24px.
Exporting different image resolutions without changing the size
When working with images for the web, it is necessary to export at 96 and 192 dpi, without changing the final image size. This is important, as it maintains the visual quality in the responsive mode without affecting the performance of the website. Despite exporting in 2x, the prototyping tools usually change the size of the image and, therefore, we use Adobe Photoshop to export.
Go to the image> option and select image size, which will open a settings box, and change to the desired size.
Then deselect the chain to be able to change the resolution without changing the size.
Finally, we changed the names of the images using the following pattern:
name-in-english-semantic-130x30 (image in 96 dpi)
name-in-english-semantic-130x30@2x (image ein 192 dpi)
An application example would be:
payoff-realestate-130x30 e payoff-realestate-130x30@2x
Exporting complex backgrounds
In our identity we use some backgrounds composed of floating geometric shapes, composed of lines and illustrations.
To export them, it was necessary to understand how the team develops them, alternating between SVG and vectors made via code.
It is necessary to use transparent masks in what would be the background of the SVG. After applying the mask, just export as a normal SVG and share it with your team.
We hope that this guide will assist you in the export process, but remember that this is a joint effort with the developers, so it is always better to call them to validate the formats and ensure that the nomenclatures are in accordance with the standard used by the team .
Did you have any questions? Leave your comment! Did you like the content? Like and share with your co-workers.
Sincerely, Pontte Design team,
