What responsive design means for a business
A responsive layout describes how blocks, fonts and spacing change as the screen width changes. A menu collapses into a burger icon, three cards in a row become a single column, and a button stretches to full width. A designer working in Figma plans these transitions in advance, so the developer does not have to improvise them.
For an owner, this is a money question. A visitor arrives from an ad you paid for, cannot tap the Order button or read the price, and leaves. That lead is lost and the ad spend wasted. The mobile version deserves the same scrutiny as the desktop one.
Start with content and grid, not a pretty picture
A common beginner mistake is to draw an impressive desktop screen first and then squeeze it onto a phone. The reverse order works better. Decide what the visitor must see and do on the page, stack the blocks by importance in a single column, and only then expand the layout for larger screens.
In Figma, this is where Layout Grids come in. A phone usually gets fewer columns and tighter margins, a laptop gets more columns and more breathing room. Pick a small set of key screen widths for the project and stick to them throughout.
Auto Layout, constraints and components
Auto Layout is the core tool. It makes a container adapt to its content: if a product name in the catalog gets longer, the card grows and its neighbors shift. This matters a lot for sites in Russian and Uzbek, where the same sentence can differ noticeably in length between languages.
Constraints define how an element behaves when its frame is resized: pinned to an edge, centered or stretched. A header logo and a footer button need different rules, so set them explicitly.
Components and Variants keep the style consistent. One button with default, hover and disabled states, plus sizes for different screens, replaces dozens of copies. Colors and text styles stored as variables let you restyle the whole project in minutes.
Which screens you actually need to design
You cannot, and do not need to, draw every device size. A handful of anchor states is enough, and the site flexes between them according to the rules you set.
- A narrow smartphone screen, the main case for social media traffic.
- A tablet, including landscape orientation.
- A laptop as the base desktop version.
- A wide monitor, where capping the maximum content width matters.
- States of interactive elements: menus, filters, forms and pop-ups.
- Error pages and empty states, such as an empty cart.
Common mistakes in responsive layouts
Most problems show up the first time you open the design on a real phone. These are the ones we see most often:
- Tiny text and buttons that are hard to hit with a thumb.
- Headlines that fill half of a mobile screen.
- Heavy images with no lighter version for slow mobile connections.
- A lead form with too many fields that is tedious to fill in on a phone.
- No visible call button, Telegram link or Click and Payme payment option.
- A layout drawn with text in one language only, when the site will be bilingual.
Handing the design to a developer and checking the result
A good layout comes with notes: how the header behaves on scroll, what happens to a table on a narrow screen, which blocks are hidden and which wrap. Use Dev Mode and clear layer names so the developer does not have to guess which gap is intentional and which is accidental.
After the build, compare the live site with the design on several real devices, not only in a browser window. Check loading speed, readability and forms. That is where responsiveness either brings in leads or does not.
The layout is one stage of website development
Design in Figma is only one step. The purpose of the site drives everything else: whether you need inquiries, payments, bookings or just a business card page. Agree first on which action counts as success and set up analytics, otherwise you cannot tell whether the new design performs better than the old one.
At markdev, we build websites end to end, from prototype and Figma layout to front-end build, analytics setup and launch. If you would like to discuss your project, leave a request and we will suggest where to start.
FAQ
How many layouts do I need for a responsive website?
Usually a few anchor widths are enough: phone, tablet and desktop. Between them the site adapts through Auto Layout and grid rules, not through a separate layout for every device.
Should I design mobile first or desktop first?
If most of your traffic comes from social networks and messengers, start with mobile. It forces you to pick the essential content first, and you can then expand the layout for larger screens.
How is responsive design different from a mobile version of a site?
A mobile version is a separate site for phones. Responsive design is one site that adapts to any screen width, which is generally easier to maintain and update.
Can I build a site without Figma?
Yes, if you use a template-based website builder. For a custom site, though, a Figma layout saves time because changes are made before development, when they cost less.
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.