UI/UX designer (Figma) roadmap

Visual hierarchy means making the most important thing the most noticeable, using size, weight, colour and position. A good screen has one clear main action. Squint at a screen: whatever you still see is what stands out.

Use a spacing scale such as 4, 8, 16, 24 and 32 pixels instead of random numbers. A grid of columns helps you line things up on every screen size. Put related items close together and unrelated items further apart.

Typography is how you choose and arrange text. Use one or two fonts, a clear size scale, and line spacing of around 1.4 to 1.6 for body text. If your app supports Hindi or other Indian languages, choose fonts with good support for those scripts.

Start with a neutral palette (greys) plus one main brand colour and a few status colours for success, warning and error. Use colour to support meaning, not as the only signal. Always check that text has enough contrast with its background.

Frames are the screens and boxes you design in. Learn to draw shapes, add text, group layers and use the layers panel. Figma runs in the browser and has a free plan, so you can start today.

Auto layout makes a frame arrange its contents in a row or column with fixed gaps and padding. When text gets longer, the button grows by itself. Learning it early saves you hours of manual moving later.

A component is a reusable design element, like a button, that you can copy many times. When you change the main component, every copy updates. Variants group versions of one component, such as primary, secondary and disabled buttons.

Most teams follow steps like: understand the problem, research users, define the goal, design ideas, test and improve. You go round this loop many times. Each step should give you something you can show, like notes, flows or prototypes.

Ask open questions about past behaviour, like "Tell me about the last time you paid a bill online". Avoid leading questions such as "Would you like a faster app?". Five to eight good interviews usually reveal the main problems.

Surveys reach many people quickly; keep them short and clear. Also look at app reviews, support complaints and analytics if you can get them. Use interviews to learn why, and surveys and data to learn how many.

A persona is a short profile of a typical user built from your research, not from guesses. A problem statement says who has what problem and why it matters. Good ones make design decisions much easier.

A user flow is a diagram of screens and choices, from the start of a task to the end. Information architecture is how content is grouped and named, like the menu of an app. Draw flows in FigJam before you design any screen.

A wireframe is a simple black-and-white sketch of a screen showing layout and content, not colours. Start on paper, then move to Figma. Make several different ideas and pick the best one with feedback.

In Figma's prototype mode you link buttons to screens and add simple animations. Users can tap through it on a phone with the Figma app. Keep prototypes focused on the task you want to test.

Give a person a task, like "order a veg thali", and watch them use your prototype without helping. Ask them to think aloud. Note where they get stuck, then fix the biggest problems and test again.

Heuristics are well-known rules for good design, such as Jakob Nielsen's 10 usability heuristics. Go through your screens and check each rule, like "show the system status" or "help users recover from errors". This does not replace real users, but it catches easy mistakes.

Follow WCAG, the main web accessibility guidelines: enough colour contrast, text that can grow, tap targets of at least about 44 pixels, and clear labels. Never use colour alone to show meaning. Accessible design is also easier for older users and people on cheap phones in bright sunlight.

Google's Material Design and Apple's Human Interface Guidelines explain standard patterns for navigation, buttons and forms. Most Indian users are on Android, so know Material Design well. Follow the rules unless you have a strong reason not to.

Use short, plain labels like "Pay ₹250" instead of "Proceed". Write helpful error messages that say what went wrong and how to fix it. Think about users who read Hindi or other languages, and leave room for longer translated text.

Design empty states, loading states, errors and very long names, not just the happy path. Think about slow internet and failed payments. Developers will thank you, and users will trust the app more.

A design system is a library of components plus rules for colour, type, spacing and behaviour, used by designers and developers together. It keeps the product consistent and speeds up work. Study public systems like Material Design to see how they are organised.

Variables store values such as colours, spacing and text, and can be used across your designs. Modes let the same variable have different values, for example light and dark mode or different brands. They map well to design tokens that developers use in code.

Use clear names for layers and components, and mark which frames are ready to build. Figma's Dev Mode lets developers see sizes, colours and code hints. Talk to developers early, so you design things that can be built in the time available.

You do not need to code, but learn how layout, spacing and responsive screens work in CSS. This helps you design screens that work on every phone size. It also makes your conversations with developers much easier.

Learn the basic numbers teams watch, like sign-ups, conversion (how many people finish a task) and drop-off. Use them to choose what to design and to check if a change worked. Mix numbers with research so you understand both what and why.

A case study tells the story of a project: the problem, your research, ideas you tried, decisions, the final design and what you learned. Show your thinking, not just pretty screens. Two or three deep case studies beat ten shallow ones.

Explain your design by linking each choice to a user need or a test result. Listen to feedback calmly and ask questions to understand the real concern. Good designers change their minds when the evidence says so.