In the early 2010s, PSD (Photoshop Document) files ruled the world of free design resources. Websites like FreebiesBooth, Dribbble, and Behance were teeming with downloadable PSDs for buttons, icons, landing pages, and full UI kits. But today, design workflows have shifted. With the rise of Figma as the go-to collaborative UI tool, many of those legacy assets are collecting digital dust.
The good news? You don’t have to throw them away. With a bit of strategy and smart conversion, you can breathe new life into these files—turning static Photoshop files into fully functional, component-based Figma UI kits that are modern, maintainable, and team-ready.
Here’s how to do it—and why it’s worth the effort.
Why Bother Converting Old PSDs?
You might wonder: why not just start from scratch? The truth is, many of those old PSDs contain great design elements, especially if they were made by skilled designers.
Benefits of converting:
- Reuse proven assets: Typography, iconography, and layout ideas often still hold value.
- Save time: You already have a visual base—just update the styling and structure.
- Practice design translation: A useful skill if you’re modernizing a brand or inheriting old design files.
Step 1: Evaluate the PSD
Before importing or rebuilding, open the PSD in Photoshop and review it critically.
Ask yourself:
- Is the design still visually relevant?
- Are the layers organized and named?
- Are key components (buttons, cards, navs) reusable?
- Is the resolution high enough?
If the file is chaotic, it might take longer to untangle than to rebuild. But if it’s relatively clean, you’ve got a good foundation.
Step 2: Export What You Can
Figma does not support PSD imports directly. You’ll need to extract usable assets first.
Export tips:
- Export icons, illustrations, and logos as SVG if possible. These maintain scalability and editability.
- For photos and backgrounds, use high-resolution PNG or JPG.
- Export text only if necessary; you’ll want to retype in Figma for better font control.
Keep a folder of exported assets organized by component (e.g., buttons, navbars, footers).
Step 3: Rebuild the Layout in Figma
Once you have the visuals, switch over to Figma and start recreating the UI structure.
Best practices:
- Set up a proper frame/grid system using Figma’s layout grids.
- Use auto layout to rebuild containers like navbars or card blocks.
- Create components for repeatable elements like buttons, form fields, or nav links.
- Reapply the original typography and color styles, but upgrade to Figma styles and variables.
You’re not just copying—you’re upgrading.
Step 4: Replace Static Elements With Real Components
This is where the transformation happens. Old PSDs are flat by nature. Modern UI kits need structure and behavior.
What to modernize:
- Turn grouped buttons into button components with different states (default, hover, disabled).
- Convert icon placeholders into swapable instances tied to an icon library.
- Replace text blocks with dynamic text fields using Figma’s content tools.
You can also implement interactive variants, like drop-downs or toggles, which didn’t exist in the original PSD.
Step 5: Apply Modern Design Tokens
Figma now supports variables for colors, spacing, typography, and even effects. This allows your converted kit to be scalable and easy to theme.
- Replace hardcoded colors with color tokens (primary, surface, error, etc.).
- Use spacing variables for padding and margins so layout adjusts consistently.
- Convert all shadow, blur, and border effects into Figma effect styles.
This step future-proofs your UI kit for scalable design systems.
Step 6: Organize the File
After the conversion, your Figma file should be usable by others (or future-you). Set up pages such as:
- Cover (showcase what’s inside)
- Getting Started (guide for use)
- Styles (colors, type, icons)
- Components (buttons, forms, navs)
- Templates (headers, modals, dashboards)
Label all layers, frames, and components clearly. Use naming conventions like button/primary/hover to stay organized.
Optional: Add Interactivity & Prototypes
Once your UI kit is live in Figma, go beyond static design. Add:
- Hover effects and variants to buttons and links.
- Flows between modals, screens, or pages.
- Interactive examples of dropdowns, switches, or tooltips.
This isn’t necessary for every use case, but it elevates your UI kit to product-ready.
Common Pitfalls
- Copy-pasting from Photoshop doesn’t preserve structure—avoid it.
- Don’t import rasterized text—always recreate type layers.
- Skip converting outdated styles (e.g., glassmorphism from 2012) unless they’re part of a nostalgic design choice.
- Don’t ignore accessibility—modernize contrast, font sizes, and interaction cues.
When to Start From Scratch Instead
Some PSDs are simply too outdated or disorganized to convert efficiently. If:
- The design feels outdated (e.g., skeuomorphic interfaces).
- The layers are flattened or merged.
- The original resolution is low.
- The style doesn’t match your current branding or platform.
Then it’s okay to use the PSD as inspiration and create a new file from scratch.
Final Thoughts
Converting old free PSD resources into modern Figma UI kits is part design archaeology, part craftsmanship. You’re not just updating visuals—you’re translating legacy formats into flexible, structured, interactive design systems.
Done right, these revamps can save you time, improve consistency, and preserve great design ideas that still hold value today. Whether you’re modernizing your archive or updating a client’s outdated assets, this process makes the past part of your future design system.
