{"id":11476,"date":"2026-11-04T15:15:46","date_gmt":"2026-11-04T14:15:46","guid":{"rendered":"https:\/\/figabyiga.com\/?p=11476"},"modified":"2026-11-10T06:26:45","modified_gmt":"2026-11-10T05:26:45","slug":"website-design-in-figma","status":"publish","type":"post","link":"https:\/\/figabyiga.com\/en\/website-design-in-figma\/","title":{"rendered":"Website Design in Figma \u2013 How the Process Works Step by Step"},"content":{"rendered":"

Website design in Figma<\/strong> lets you see how a site will look and work before anyone starts programming it. Changes at this stage are much faster and cheaper than changes to finished code, so it is worth carrying it out carefully, following the principles of UX and UI design.<\/p>\n\n\n\n

A website can be prepared in two ways: you can buy a ready-made template and implement it, for example in WordPress, or design the site from scratch according to the needs of the company and its customers, and then implement it in the chosen technology. For companies that care about an effective website, the second option is usually the better choice. It offers complete flexibility and makes it possible to apply solutions that genuinely respond to users' needs.<\/p>\n\n\n\n

Below we describe how this process works step by step and what is worth preparing on the client's side. We accompany you at every stage: from the first questions about the goals of the site to checking that the finished website has been implemented in line with the design.<\/p>\n\n\n\n

Stage 1: Website goals and page structure<\/h2>\n\n\n\n

We begin with the key questions. What is the site meant to do, who uses it, and what action should a visitor take? The answers determine the number of subpages and their layout.<\/p>\n\n\n\n

Next we create a sitemap, that is, a hierarchical list of subpages, for example: home page, services, case studies, blog and contact. At this stage we also define the page URLs.<\/p>\n\n\n\n

Stage 2: SEO strategy and keywords<\/h2>\n\n\n\n

Before the wireframe is created, we determine which phrases users search for, so that the structure of the site answers their questions. Together with the SEO agency your company works with, we choose the keywords most important for the brand, and for each subpage we prepare a meta title, a meta description and secondary keywords.<\/p>\n\n\n\n

We base our decisions on data. Google Search Console shows the phrases for which the site already appears in search results. Google Analytics shows how users move around the site and which subpages attract traffic. Google Ads Keyword Planner tells us how many people search for a given phrase. Thanks to this, we choose page names, headings and URLs deliberately, not on the basis of guesswork.<\/p>\n\n\n\n

Stage 3: UX wireframe<\/h2>\n\n\n\n

A UX wireframe is a sketch of the page layout, still without colours and photos. It shows the order of sections, the placement of buttons and the expected length of the content. It lets you check how the site will work, what path a customer will take and whether they will quickly find the information they need. That is why it is the best moment to change the concept.<\/p>\n\n\n\n

Stage 4: Copywriting<\/h2>\n\n\n\n

Before the visual design, we prepare the content. The texts are consistent with the brand voice, based on the keywords established earlier and matched to the wireframe layout. Thanks to this, the visual design is created with real texts, not placeholders, so the length of headings and paragraphs is realistic from the start.<\/p>\n\n\n\n

Stage 5: Website design in Figma \u2013 the visual layer<\/h2>\n\n\n\n

If the company has a brand book, we use it to create a design system, that is, a set of established rules: colours, fonts, spacing, corner radii, buttons and components. It is what guarantees consistency across all views.<\/p>\n\n\n\n

If there is no brand book, we start with a moodboard. After you approve it, we propose colour palettes and font selections, and then build an extensive design system.<\/p>\n\n\n\n

The next step is the visual design of one to three selected subpages. In them we design the successive sections in the agreed character and style.<\/p>\n\n\n\n

We work in Figma, which enables teamwork: you can leave comments and remarks directly on a specific element of the design. Thanks to this, the work runs smoothly, in constant contact with you, rather than through long email messages.<\/p>\n\n\n\n

After this stage is approved, we design all the remaining views, for example:<\/p>\n\n\n\n