Why the mobile layout deserves its own design
For most small businesses in Uzbekistan, the bulk of visits comes from a smartphone: someone taps a link in Instagram, a Telegram post or an OLX listing. If the menu is awkward, the text is tiny and the main button sits out of thumb reach, the enquiry never happens.
So the order is simple: phone first, everything else later. When space is tight, you have to decide what matters: what you sell, roughly what it costs, how to contact you and how to pay. Those answers expand easily onto a wide screen. The reverse rarely works.
Setting up your Figma file
Start with page structure and real copy, not button colours. Even a rough list of blocks (offer, benefits, prices, reviews, enquiry form) prevents rework. Then create frames for common phone widths, pick one as your main working size and check the others on copies.
Set up the foundations once and everything after goes faster:
- Layout grid and margins: a simple grid with equal side padding across screens.
- Text styles: heading, subheading, body, caption. Avoid setting sizes by hand in each block.
- Colour styles or variables: primary, accent, background, error.
- Components: button, input field, product card, header, footer.
- Auto Layout and constraints: so blocks stretch with the text and the screen.
What matters on a small screen
Buttons and links need to be large enough for a finger, with space between them. Turn the phone number and Telegram handle into «call» and «message» buttons rather than plain text. If you take payment through Click or Payme, show that next to the order form; it removes last-minute doubt.
Check copy in both languages separately. Uzbek and Russian words differ in length, and a button that looks neat with one word breaks on a longer translation. Build component variants for both languages in Figma instead of leaving it to the coding stage.
Think about weight, too. Connections in the regions can be unstable, so heavy full-screen images and piles of animation are better left out of the design. A designer who thinks about page weight saves optimisation budget later.
Prototype and test on a real phone
Build a clickable prototype for at least the main journey: first screen, choosing a product or service, the form, the confirmation. Open it in the Figma mobile app on an ordinary phone and walk through it like a buyer. Problems invisible on a monitor show up at once: text is hard to read, the keyboard covers a field, the form is too long.
Show the prototype to two or three people from your target audience and ask them to complete a task without hints. That costs far less than fixing a finished website.
Handing the design over to developers
A good handoff starts with order in the file: clear layer names, labelled components, and a separate page for states such as hover, error and loading. In Dev Mode a developer sees spacing, fonts and colours without guessing, but cannot see what you never drew.
Agree in advance how the page behaves between widths, and what happens to the menu, long headings and tables. If that is left to the coder's judgement, the result often drifts from the idea.
Common mistakes to avoid
The usual ones: designing for a single screen size, using «Lorem ipsum» instead of real headlines, ignoring empty and error states, and forgetting analytics. The last is the most costly: without goals and events you cannot tell whether the site pays for itself.
If you need a turnkey website where the Figma design is built around mobile traffic and tied to measurable goals, the markdev team can take the project end to end. Tell us what you sell and where your customers come from, and we will talk through where to begin.
FAQ
Do I need a mobile design if my site is on a website builder?
Yes, at least for the key screens. A layout lets you settle block order and copy first, and the builder then simply implements it, which means fewer revisions.
Which frame width should I use for phones in Figma?
Pick one popular width as your main size and test the design on a narrower and a wider phone. Auto Layout and constraints help blocks adapt correctly.
Should I design mobile or desktop first?
Mobile first if customers arrive from social networks and messengers. Limited space forces you to keep only what matters, and blocks are easier to expand afterwards.
How do I hand a design to developers without confusion?
Prepare components and styles, name your layers, draw element states and describe behaviour between widths. A developer should open the file and not have to guess.
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.