Do frontend have to know Design tools like Adobe Xd, Figma, sketch to get colors, spacing, fonts, animation and so on? I'm really confuse, how frontend developer can get spacing, width, height, and sizes from UI design parts? Please elaborate
Mario Giambanco
Director of User Experience Development
In the beginning all we had was photoshop.
You'd go through a PSD and cut it up any crazy colors or backgrounds or etc... and save them all to photos and rebuild the grid so to speak using a table with 0 for all spacing or borders or etc... If you were fancy, you'd do it with slices which allowed you to name each slice and save them in 1 shot.
Option 2 if you didn't have fancy backgrounds or fancy menu bars - you'd just use the tools you had. Click on a line of text - get the font size, weight, color - into css all that goes. Click on the ruler tool - 18 px from the left, 20 px from the top - into the css all that goes.
If someone sent me a PSD now a days, i'd do option 2 - if the site called for it, option 1 also probably.
We use Figma - it's nice. Click a design element, get its properties - into the css file it goes.
I personally don't let any tool export css for me - I want to pick and choose the properties and build the css file as I think is appropriate - making classes as generic as possible to be re-used elsewhere - so if Figma does that - news to me lol...
Not much has changed though - use the tools you have access to, get your measurements and properties and build the html / css appropriately.