I’m used to working with Figma files where everything is easy to extract, but now I got handed some Photoshop files from a client’s designer. I’m completely lost on how to get all the design specs I need.
How do you guys extract things like exact color codes, typography details, spacing measurements, and effects like drop shadows from PSD files? Do you just eyeball everything or is there some proper method I’m missing?
Any tips on making this process less painful would be awesome. Right now I feel like I’m just making random guesses about measurements and styles.
oh man, this brings back memories! have you tried photoshop’s developer tools? you can inspect layers and grab exact values - basically browser dev tools for psd files. what version are you running? the newer ones have way better extraction features that’ll save you from guessing everything.
Navigating between Figma and Photoshop can indeed be challenging. A structured approach is essential. Begin by organizing your layers effectively with proper groupings and naming. This practice streamlines the asset extraction process significantly. For accurate color values, utilize the eyedropper tool in conjunction with the info panel. This allows you to quickly obtain hex codes for elements. Typography details can be accessed by selecting the text layer and reviewing the character panel for font information. A strategy that has proven invaluable is creating a style guide document beforehand. By compiling frequently used colors, fonts, and spacing values early, you prevent the back-and-forth between Photoshop and your code editor, ultimately saving time and improving efficiency.
i usually just export from photoshop too, like right-clicking the layer and choosing ‘export as’ for clean images. for distances, the ruler tool helps, or holding alt gives you the spacing, much quicker than just winging it!