Dubai · Web Design
PSD to Figma conversion — rebuilt as components, not imported as a picture.
A PSD, AI, Sketch, XD or PDF source rebuilt in Figma as named layers, editable text, reusable components and shared styles — so what you open is a file your team can work in and hand to a developer, rather than a flat picture of the old one.
- Rebuilt by hand, not plugin output
- Figma file in your account
- Fixed price, agreed before we start
What's included
Six things that get rebuilt, not imported.
Plugins move pixels between two formats. Everything below is what they flatten, guess at, or leave for somebody to redo by hand.
Every source format
PSD, Illustrator, Sketch, XD and PDF, plus the JPEGs and screenshots that always turn up alongside them. Each loses something different on the way across, so the audit says which parts of your file are data we can move and which parts are artwork somebody has to redraw.
Rebuilt as a component library
Repeated elements collapse into one component with its variants, and every instance points back at it. Type, colour and effect styles are named for what they are used for rather than what they look like. That is the difference between changing something once and changing it eighty times.
Text that is still text
Each text layer is rebuilt as a Figma text layer in the identified typeface, carrying its size, weight, tracking and line height. PDFs are the awkward case: type saved as outlines contains no characters at all, so it is retyped and then proofread against the original.
Vectors, effects and images
Shapes are redrawn as editable vectors rather than pasted in as pictures of themselves. Shadows, gradients, blurs and strokes are reproduced with Figma's own effects, and raster assets are pulled out of the source at full resolution instead of cropped off a screenshot.
Auto layout and constraints
No source format carries resize behaviour Figma can read — Sketch constraints and Smart Layout both fall away on import, and Photoshop never had any. So it is authored: auto layout where content stacks, constraints where it pins, at the breakpoints the design actually has.
Arabic and right-to-left sources
Arabic that has been outlined or exported carelessly usually arrives with the letters disconnected or the word order reversed. It is retyped in a face drawn for Arabic instead of a system fallback, and the direction is set properly in the file rather than faked with right alignment.
Who it's for
Three ways a design ends up in the wrong file.
All three are format problems rather than design problems. If what is bothering you is the design itself, this is the wrong page, and we would rather say that now than in a proposal.
A file nobody can open any more
The design lives in Sketch and the Mac it needs has gone, or in XD, which nobody on the team has opened in years, or in a Photoshop file behind a subscription nobody still pays for. The work is not lost. It is standing behind a tool the company has stopped using.
Opening your own design file needs a licence nobody on the team has.
Developers working from a picture
Somebody handed the build team flat exports — a PDF, a folder of JPEGs, a PSD they cannot open — and spacing, colour and states are now being measured off an image. Every value guessed at becomes a difference between the design and the site that nobody agreed to.
A developer asked what the padding is and nobody could answer from the file.
A back catalogue that keeps being rebuilt
The team works in Figma now, but everything shipped before the switch sits in the old format. Each new project starts by redrawing something the company already paid for, and the two copies then drift, because only one of them is ever maintained.
Your newest work and your best work are in two different tools.
How we deliver it
Five stages, ending with the file held against the original.
What the source cannot give us is written down in stage one, not discovered in stage four.
01
Audit the source
Every file is opened before anything is quoted: artboard count, linked assets that are missing, fonts that are not on the machine, text saved as outlines, smart objects with no editable original. Whatever cannot be reproduced is recorded here rather than found halfway through.
02
Agree the structure
What becomes a component, how pages and frames are named, which breakpoints exist, and how far to take it. A faithful copy with no structure is only a slower screenshot, and this short conversation is what decides whether the file is usable afterwards.
03
Rebuild
Layer by layer, in Figma. Vectors redrawn as vectors, text retyped in the identified face, effects reproduced with Figma's own, images extracted from the source at full resolution. Nothing is traced over a flattened export.
04
Componentise and style
Repeated elements collapse into components with variants, shared styles replace repeated values, and auto layout and constraints go on the frames that have to resize. This is the stage no importer can do for you, because none of it is present in the source to be read.
05
Check and hand over
Rebuilt frames are compared against the source at full size, and every deliberate difference is listed in writing. The file already sits in your Figma team, so handover is a walkthrough rather than a transfer.
Deliverables
One file, and everything that makes it usable.
The Figma file is created inside your team from the start, so there is nothing to transfer at the end and nothing that stops working if you never speak to us again.
- One Figma file, organised into pages with frames named by what they are rather than by artboard number
- Repeated elements as components with their variants, placed as instances rather than pasted copies
- Shared styles for type, colour and effects, named for their role instead of their hex value
- Auto layout and constraints on every frame that has to resize, at the breakpoints the source design has
- Text as editable text layers with every typeface identified by name — including anything that arrived as outlines
- Images and vectors extracted from the source at full resolution, never re-captured from a flattened export
- A written fidelity note listing anything that could not be reproduced from the source, and why
- Your original files returned untouched, alongside the rebuild
Nothing is redesigned on the way through. Where the source contains a misaligned grid, two greys three per cent apart, or a button that exists in four sizes for no reason, it goes into the fidelity note and is rebuilt as it is. Quietly correcting a design while claiming to reproduce it leaves you with a file that no longer matches the site it was drawn for.
Pricing
What a file conversion costs.
Quoted per file
fixed price
Conversion does not sit in the website tiers — Launch from AED 16,000 buys a site designed and built, which is a different piece of work entirely. A conversion is priced on the number of screens, the source format and how much structure you want in the result, and both the price and the timing are fixed before anything starts. Prices exclude 5% VAT.
What changes the priceWhat that covers
- Every artboard or page in the source, not a selected sample
- Vectors redrawn, raster assets extracted at source resolution
- Text rebuilt as editable layers, with the typefaces named
- Components, variants and shared styles
- Auto layout and constraints on the frames that resize
- A side-by-side fidelity check and a written note before handover
Design and marketing agencies
A decade of client work sits in whichever tool was current when it shipped, and the client who commissioned it may now want it back, or want another studio to continue it. Files have to leave in a state somebody else can pick up, which is a different standard from a file that only ever had to satisfy its own author.
Software and product teams
Where the design came from an agency or a contractor who has since moved on, nothing new can be drawn until the existing screens exist as components rather than pictures. What matters here is that the file is structured for engineering — named states, real text, predictable resize behaviour — rather than arranged to present well in a review.
File conversion is the narrowest of the five services in the web design pillar and the only one that makes no design decision at all. If the design in the file is what is wrong, rather than the format it is stuck in, UI/UX design is where that gets questioned — and if the site it describes is live, dated and already ranking, start from the redesign page instead.
Questions
Asked before a file goes into Figma.
No. Dropping a PSD onto the Figma canvas gives you a flattened image, because Figma has no native Photoshop importer. Third-party plugins do better — the good ones recover layer names, text and images — but effects, masks and smart objects are commonly flattened, and structure is where they stop: components, styles and auto layout are decisions rather than data sitting in the file to be read. Plugins change quickly, so test the current one on your own file rather than on a feature list.
Do, when the file is simple and disposable. A plugin is fine for a one-off mockup you will throw away next week. It stops being fine once the file becomes the source of truth for a build: what lands is a flat pile of layers with generated names, no components and no resize behaviour. Past a certain size, tidying that is work of the same order as rebuilding it — and it ends without the structure a rebuild would have given you.
Yes, wherever the source stores it as text. PSD, AI, Sketch and XD text layers are rebuilt as Figma text layers in the same typeface, assuming that font is available to you. PDF is the exception — type saved as outlines carries no characters at all, so it has to be retyped by hand and proofread. We tell you which pages that affects before starting.
Every typeface in the source is identified by name and reported back to you, because a licence for a font that stays live in the file is yours to hold rather than ours. Where a font cannot be identified, or its licence has lapsed, we propose the closest available substitute and record it in the fidelity note rather than swapping it silently.
No — a conversion reproduces the source, including its mistakes. Anything odd we find is written into the fidelity note and then rebuilt exactly as it stands. Deciding whether those things should change is design work with a different scope and a different price, so it is quoted separately rather than folded in and charged as a surprise.
Broadly, but each loses something different. Sketch symbols map onto Figma components reasonably well, while Sketch constraints and Smart Layout do not survive the import and are re-authored. XD carries almost no structure across. Illustrator and PDF are vector artwork with no interface structure in them at all, so components there are built from scratch rather than translated.
Per file, fixed before anything starts, based on the number of screens, the source format and how much structure you want in the result. It sits outside the website tiers — AED 16,000 buys a site designed and built, which is a different job. Timing is quoted with the price, because a twelve-screen PSD set and a 200-page PDF are not comparable. Prices exclude 5% VAT.
The source files in their original format rather than an export, plus any linked images and the font list. Photoshop files that reference missing links or absent fonts convert badly, and finding them now costs less than guessing later. Tell us if a screen exists only as a JPEG — it can still be rebuilt, but it is redrawn from scratch rather than converted.
Ready to build something that lasts?
Tell us what you need. You will get a scoped response with an indicative price — from an engineer, not a salesperson.