Why you need a Figma mockup before development
Figma is a browser-based interface editor. A designer draws the pages, chooses fonts, colors and buttons, and shows how everything looks on a laptop and on a phone. You open the mockup through a link and leave comments right on the screens, so feedback does not get lost in Telegram threads and email attachments.
The main benefit is saved money and time. Moving a block or changing a button in a mockup takes minutes; in finished code it becomes developer hours. Most visitors in Uzbekistan arrive from phones, usually through Instagram, Telegram or search, so the mobile layout should be designed first rather than squeezed in at the end.
How Figma website design works, step by step
A solid process starts with questions, not drawing: what do you sell, who buys it, and what should a visitor do on the site. Only then come structure and visuals.
- Brief: product, audience and the main action, such as a call, a Telegram message, a request form or a payment via Click or Payme.
- Structure: the list of pages and the order of blocks on each.
- Prototype: plain screens without colors or photos, used to discuss the logic.
- Visual design: colors, fonts, icons, imagery.
- Mobile and tablet versions of every page.
- Revisions based on your comments, within an agreed number of rounds.
- Handoff of the file to developers with clear notes.
What a finished mockup should contain
A polished picture of the home page is not yet a website design. Check the list below, otherwise the developer will guess the missing details and you will not get what you approved.
- Every key page, not just the home page: catalog, product card, contacts, request form.
- A mobile version of each page.
- Element states: button hover, form error, empty cart, success message after sending.
- A consistent system, with colors, fonts and buttons stored as styles and components instead of redrawn on each page.
- Fonts that display Cyrillic and Uzbek Latin correctly, including the o‘ and g‘ characters.
- Real copy instead of placeholder text, because Russian and Uzbek lines differ in length and the layout must cope with both.
- Exported images and icons in the formats developers need.
What drives the price
Naming a figure without a brief would be dishonest, but the structure of the price is clear. It depends on the number of pages and unique blocks, on whether the design is created from scratch or from a ready structure, and on how complex the animations and interactive parts are. A catalog with a cart, a personal account, several languages and a new brand identity are usually priced separately.
When comparing proposals, look at the scope rather than the total in sum: how many pages, whether mobile layouts are included, how many revision rounds, and whether the Figma file itself is handed over to you. Two offers that sound identical often describe very different amounts of work.
How to review and accept the mockup
Open the prototype on your own phone and walk through the customer journey from the first screen to the request form. If you stumble, a visitor will too. Show the mockup to the managers who talk to customers every day; they quickly notice what is missing, such as delivery terms or payment options.
Agree on the number of revision rounds in advance and put in writing that you receive the file with access rights. Without that, switching contractors half a year later means redrawing everything.
Common mistakes
The most expensive mistake is judging design by taste instead of by the task. A site exists to bring in requests, and the mockup should lead visitors there without extra steps.
The second mistake is ignoring measurement. If the mockup lacks clear buttons and forms, it is hard to set up goals later, such as phone taps, Telegram clicks and form submissions. Without that data you cannot tell whether the site pays off or which ad channel works. The third is keeping the designer and the developer apart until the mockup is already delivered.
Design and development in one team
When one studio draws the mockup and another builds the site, details get lost at the handoff. At markdev, Figma design, front-end build, analytics setup and ad launch are handled by one team, so the mockup is tied to real business goals from the start.
If you want to discuss a website for your company, describe the task in a request and we will suggest where to begin and how much work you actually need.
FAQ
Does a business owner need to know Figma?
No. You only open the link and leave comments on the screens. Nothing needs to be edited by you.
Can I order only the design without development?
Yes. Just agree in advance that you receive the full file with mobile layouts, styles and components, so any developer can pick it up later.
How is a Figma mockup different from a finished website?
A mockup shows the look and logic of the pages but does not work: forms do not send and the catalog does not update. The real site is built from it.
How many revision rounds should be planned?
There is no universal number, but it should be fixed in your agreement. The clearer the brief and structure, the fewer rounds the visual stage needs.
Let’s look at your task for free
Leave your contact — in a 15-minute call we’ll show where leads get lost and what to fix first.