Figma: What is Figma?

What is Figma?

Figma is a fully cloud-based digital interface design tool, accessible from a web browser or desktop application. Unlike traditional design tools that run locally, Figma allows multiple designers, developers and stakeholders to work simultaneously on the same file in real time, like Google Docs for design.

Launched in 2016, Figma revolutionised the interface design world by eliminating the friction of file sharing, competing versions and designer isolation. It covers the entire design workflow: wireframing, high-fidelity design, interactive prototyping, design system creation, developer handoff and asset management.

At Kern-IT, within the KERNWEB division, Figma is the central tool across the entire design chain. Every web project starts in Figma (wireframes and prototypes) and ends there (design specifications for developers). Integration with the Tailwind CSS development workflow is seamless: design tokens defined in Figma are transposed directly into the Tailwind configuration.

Why Figma matters

Figma has transformed the way design teams work and collaborate. Its impact extends well beyond the tool itself to influence processes and design culture.

• Real-time collaboration: multiple people can edit the same file simultaneously, with visible cursors and contextual comments. This eliminates file round-trips and version conflicts.
• Universal accessibility: Figma runs in a web browser with no local installation required. A client can view and comment on a design from any device, without a licence or specific software.
• Single source of truth: the Figma file is always up to date. There is no "v2_final_really_final.fig" circulating by email. Everyone works on the same version.
• Built-in prototyping: interactive prototyping is native to Figma, with no need to export to a third-party tool. Transitions, micro-interactions and user flows are defined directly in the design tool.
• Dev Mode: Figma's Dev Mode automatically provides developers with CSS specifications, measurements, colours and exportable assets, easing the transition from design to code.

How it works

Figma organises design work in a hierarchical structure: organisation, team, project, file, page, frame. Each file can contain multiple pages, and each page can contain numerous frames representing screens, components or work areas.

The component system is at the heart of Figma. A component is a reusable design element (button, form field, card, header) that can be instantiated throughout the project. When the main component is modified, all its instances are updated automatically. This mechanism is fundamental for maintaining design system consistency.

Variables and design tokens define centralised values (colours, spacing, border radii, typography) referenced across the entire project. At Kern-IT, these Figma tokens are aligned with the project's Tailwind CSS configuration, guaranteeing an exact match between design and code.

Prototyping in Figma works by connecting screens through interactions (click, hover, drag, timer). Each interaction can trigger an animated transition (fade, slide, dissolve) to a target screen. Prototypes are shareable via a simple link, facilitating user tests and client presentations.

Concrete example

The KERNWEB team at Kern-IT uses Figma to design the website for a Brussels-based edtech startup. The project comprises twelve distinct pages and a student login area.

The designer first creates a design system in a shared Figma library: colour palette (defined as variables), typographic scale, button components (four variants, five states each), course card components, navigation components and form components. This design system represents around thirty master components.

The twelve pages are then assembled from these components, ensuring total visual consistency. An interactive prototype links the pages together and simulates the primary journeys: catalogue discovery, course registration and student dashboard access.

The client reviews the prototype via the Figma link and leaves contextual comments directly on the screens. After sign-off, the developer uses Dev Mode to extract specifications and implements the pages in Wagtail CMS with Tailwind CSS, transposing Figma tokens into the tailwind.config.js file.

Implementation steps

1. Structure the project: create a Figma project with dedicated pages (wireframes, design system, mockups, prototype) and a clear naming convention.
2. Define design tokens: configure colour, typography and spacing variables that will serve as the foundation for the entire project.
3. Build the component library: create reusable components with their variants and states, organised in an atomic design structure.
4. Design the screens: assemble pages from the library components, respecting the defined grid and tokens.
5. Prototype the flows: connect screens through interactions to create navigable journeys testable by users and the client.
6. Prepare the handoff: verify that components are properly named, tokens are up to date and Dev Mode provides accurate information to developers.

Related technologies and tools

• Tailwind CSS: the utility-first CSS framework whose configuration (colours, spacing, typography) is aligned with Figma design tokens at Kern-IT, ensuring optimal design-to-code fidelity.
• Wagtail CMS: the Django-based CMS whose templates are developed from Figma mockups. StreamField blocks correspond to Figma library components.
• FigJam: Figma's collaborative whiteboard tool, used for scoping workshops, user journey maps and brainstorming sessions.

Conclusion

Figma is far more than a design tool: it is the collaboration platform that connects designers, developers and clients in a smooth, transparent workflow. At Kern-IT, the KERNWEB division has made Figma the pivot of its design chain: every web project is born in Figma as wireframes, evolves into high-fidelity design, is validated via interactive prototypes and is faithfully translated into Tailwind CSS code integrated with Wagtail CMS.