A Figma designer in Dubai whose files are made to be built

A good Figma file is a specification, not a picture. Pages are organised so anyone can find the screen they need, layouts use auto layout so they resize the way the built page will, and every repeated element is a component, so changing a button once changes it everywhere. Colours, type sizes and spacing are saved as styles and variables rather than typed in by hand on each frame.

Above all, the file shows the states a developer would otherwise have to invent: hover and focus, error and success on forms, empty and loading screens, long names that wrap, and the breakpoints between phone, tablet and desktop. When those are missing, the built site resembles the design rather than matching it, and that gap is where quality goes.

Decisions here often involve several people: an owner, a sales director, a marketing manager, sometimes a consultant for the developer. A static mockup invites each of them to picture the site differently. A clickable Figma prototype removes the guessing. Everyone taps through the same flow on their own phone, from the ad's landing page to the thank-you screen, and comments directly on the frame they mean.

Changing a decision in a prototype takes minutes. Changing it after the build takes days and usually breaks something else. So sign-off happens on the prototype, with the comments resolved in the file, and the build starts from an agreed design rather than from a conversation people remember differently.

For anything that will grow, a website with many page types, an app, a family of landing pages, the file is built on a small design system: variables for colour, type and spacing, components with variants for each size and state, and a shared library other files can use. An Arabic version gets right-to-left variants designed rather than mirrored at the last moment.

The system is scaled to the job. A single campaign landing page does not need a library, and building one would be time you pay for and never use. The test is simple: if a second designer, or you in a year, will need to add a page that looks like it belongs, the components earn their keep.

Figma to website is where many good designs lose their quality, because the person building has to interpret the file. I build from my own files, and from other designers', with the components mapped one to one: Figma components become WordPress blocks or React components, variables become CSS variables or Tailwind tokens, and spacing comes across as designed rather than eyeballed.

WordPress is the choice where your team will edit the site every week, covered on WordPress development. Next.js is the choice where speed, custom functionality or a connection to your CRM matters more, covered on custom web development. Either way, the build is checked against the file at every breakpoint before launch, and assets are exported at the sizes the page actually uses.

Because I also run the campaigns, landing page design in Figma starts from the ad, not from a blank frame. The first screen repeats the ad's promise, the form is drawn at its real length on a phone, and the events the page has to track, such as a form submission, a WhatsApp click or a brochure download, are marked in the file so the build includes them and GA4 and the Meta Pixel can record them.

Variants for testing are designed together, so a headline test or a shorter form can go live without a second design round. This page is about the file and the handover. What a site should say and do is on web design, and how a product is used, screen by screen, is on UI/UX design.

Not every project needs a Figma stage, and paying for one you do not need delays the launch. A quick campaign landing page that follows an existing brand and an existing page layout can be built straight in code, or in a CMS template your team already uses, and changed in the browser where everyone can see it. The same goes for small edits to a live site and for pages that reuse components already in a design system.

In those cases I skip the file and build the page directly, on WordPress or in Next.js, with the tracking and lead form set up the same way. A Figma file earns its cost when several people have to agree on a new design before it is built, when the work is a new site or app, or when the design will be handed to another developer.