Skip to content
HDC Consultancy.

Design

Figma

Where we design and prototype your site before we build it.

Figma is a collaborative, browser-based design tool used to create interface designs, prototypes and brand assets. Because it runs in the cloud, clients and the team can view and comment on the same file in real time. HDC designs and prototypes every site in Figma first, so clients see and approve the look and flow before a single line of code is written.

Ask us about Figma Official site

Where it shines

  • Browser-based and collaborative, clients view and comment on the real design live
  • Prototypes make the site clickable, so flow and layout are tested before any build
  • Reusable components and styles keep a design consistent across every page
  • Catches design problems early, when they cost a comment instead of a rebuild
  • Shared design tokens hand off cleanly into Tailwind for a faithful build
  • One source of truth for brand, colours, type and components live in one place

Trade-offs to weigh

  • A design tool, not a builder, the final site is still coded separately
  • A polished prototype isn't a working site; some interactions only prove out in code
  • Requires design skill to use well, the tool doesn't make the decisions
  • Heavy files can feel sluggish on older machines or weak connections

What Figma is

Figma is a collaborative, browser-based design tool used to create user-interface designs, brand assets and interactive prototypes. Because it runs in the cloud rather than on one designer’s machine, several people, including the client, can open the same file, see live changes and leave comments in real time. It has become the industry standard for designing websites and apps.

Two features make it particularly useful for client work. Prototypes let us link the designed screens together into something clickable, so a static mock-up becomes a site you can actually navigate. And reusable components and shared styles mean a button, colour or heading is defined once and used everywhere, keeping the whole design consistent, and giving us a clean set of design tokens to build from.

How HDC uses Figma

Figma is where every project takes shape before we write any code:

  • We design the homepage and key pages in Figma, working out layout, hierarchy, brand and the path to the call-to-action.
  • We turn those screens into a clickable prototype and share it, so the client experiences the real look and flow on their own device, not a description of it.
  • We collect feedback directly on the design: comments pinned to the exact button, section or page they refer to, so nothing gets lost in translation.
  • We refine until it’s signed off, then build the approved design faithfully, handing the shared styles and tokens straight into Tailwind CSS so the coded site matches the design.

Why we apply it

Designing first protects the client. Changing a layout in Figma costs a comment and a few minutes; changing it after the site is coded costs a rebuild. By getting the look, flow and brand agreed in the design, we remove the single biggest source of project stress, the “this isn’t what I pictured” moment at launch.

It also makes clients part of the process rather than spectators. Seeing and clicking a real prototype of their own site, and being able to mark it up themselves, turns an abstract brief into something concrete they can confidently approve. The result is a build with no surprises and a brand that stays consistent because it all flows from one agreed source.

How Figma fits our stack

Figma sits at the front of the build, the design stage that everything else flows from. Once a design is approved, its layout, colours and type carry over into Tailwind CSS, the styling layer we build the real pages with, on top of Astro for the framework and React for the interactive pieces the prototype previewed. TypeScript keeps that coded build consistent, and on the content side a tool like Claude helps draft the on-brand copy the design is built around. So the journey runs cleanly from designed-and-approved in Figma to fast, faithful and live.

When Figma isn’t the right tool

Figma designs and prototypes; it doesn’t build the live site, and a polished prototype is never a substitute for the real, coded thing, some interactions and performance realities only prove out in code, which is exactly why we build properly afterwards. For a tiny, single-page job where the design is obvious, a full Figma stage can be more process than the project needs, and we’ll keep it lean. And Figma is only as good as the design decisions put into it, the tool supports the thinking, it doesn’t replace it.

Worked example

Seeing your new site before a line of code is written

Imagine a landscaping firm nervous about committing to a rebuild sight unseen. Instead of asking them to trust a verbal description, we design the homepage and key pages in Figma and share a clickable prototype. They click through it on their own phone, see exactly how it looks and flows, and leave comments right on the design, "make the quote button bolder," "swap this photo." We refine until it's signed off, then build the approved design faithfully. No surprises at launch, no expensive changes after the code is written, because every decision was made and agreed in the design first. (Illustrative, every build is scoped to your goals.)

Better together

How Figma fits with the rest of our stack

Tailwind CSS

Where the approved design is faithfully built

Learn more

Astro

The framework the designed pages are built on

Learn more

React

Builds the interactive pieces a prototype previews

Learn more

TypeScript

Keeps the coded build of the design safe and consistent

Learn more

Claude

Helps draft the on-brand copy the design is built around

Learn more

Figma: your questions answered

What is Figma?

Figma is a collaborative design tool that runs in the browser. Designers use it to create interface layouts, brand assets and clickable prototypes, and because the files live in the cloud, multiple people, including clients, can view and comment on the same design at the same time.

How does HDC use Figma in a project?

We design and prototype your site in Figma before we build it. We lay out the homepage and key pages, turn them into a clickable prototype, and share it so you can see and approve the look and flow. Only once the design is signed off do we move to code, so what we build is what you agreed.

Will I get to see my website design before it's built?

Yes, that's exactly why we use Figma. You'll see a clickable prototype of your site and can comment directly on it, on your own device, before any code is written. It means no surprises at launch and no expensive changes once the build is underway.

Why does HDC use Figma?

Because deciding the design before building saves clients time, money and stress. Figma lets us get the look and flow right, and approved, while changes still cost a comment rather than a rebuild, and it keeps a single source of truth for your brand that we then build from faithfully.

Is the Figma prototype the actual website?

No, the prototype shows how the site will look and flow, but it isn't the live site. The real site is then coded separately, built faithfully from the approved design. Some interactions only fully prove out in code, which is part of why we build properly rather than ship a prototype.

Can I leave feedback on the design myself?

Yes. Figma lets you comment directly on the design, pin a note to a specific button, section or page, so feedback is clear and tied to exactly what you mean. We work through your comments together until you're happy to sign it off.

Want Figma working for your business?

Tell us what you're trying to achieve, we'll show you, honestly, whether it's the right tool and how we'd apply it.

Enquire now