Cookies. With your consent, Google cookies are used for audience measurement and targeted advertising. You can change your choice anytime at the bottom of the page.

Learn more

Strictly necessary, always on: your choice (void_consent cookie, 6 months) and the display theme (local storage).

Cookies that need your consent (none ticked by default)

Google Analytics 4: pages viewed, traffic sources, visit statistics (_ga cookies, up to 2 years).

Google Ads: measuring contact requests from our ads, and targeted advertising (_gcl_au cookie, 90 days; Google advertising identifiers).

Skip to content

Design system agency: from Figma file to production React component

VOID helps banks, insurers and large organisations in Morocco and Europe design, build and maintain their design system. The service covers the Figma library, React components documented in Storybook, design tokens and ongoing maintenance. Design and front-end development move forward in the same sprints, from the audit to day-to-day running.

For European companies, we work on a nearshore basis from Morocco.

Talk about your design systemRequest a design system audit

Who it is for

Who this service is for

Digital directors of European companies

Several products and a brand that drifts from one app to the next. You need nearshore design and front-end capacity that looks after the library over time.

CIOs and CDOs of banks and insurers

Corporate site, customer areas, mobile app, subsidiaries: you want group-wide consistency and built-in accessibility, with one partner who knows your constraints.

CTOs and front-end leads

Your React library grew without rules. You want clean tokens, tested components and documentation that both your developers and your coding assistants can read.

Diagnosis

Signs you need a design system

  • Every new screen reopens the same debates about buttons, colours and spacing.
  • Figma mock-ups and production code no longer look alike.
  • Brands, subsidiaries or apps each have their own style.
  • Accessibility gets fixed page by page, after go-live.
  • Your team's AI tools generate screens that ignore your brand rules.

If you have a single product and a small team, a component kit is often enough. We will tell you at the audit stage.

Deliverables

What we deliver

The design system audit

An inventory of production screens (button, colour and typeface variants), a review of Figma files and front-end code (duplicate components, detached styles, orphan CSS), an accessibility check of existing components and interviews with your teams. You get a report, a prioritised backlog and a roadmap. Duration: [TO PROVIDE: typical length of the audit, in weeks].

Design tokens

Tokens are design decisions written as variables: colours, typography, spacing. Three tiers (primitive, semantic, component), light and dark modes, per-brand or per-subsidiary variants.

They follow the Design Tokens Community Group format. The group is a community group hosted by the W3C, and its first stable version (2025.10) came out on 28 October 2025. It is not a W3C Standard, but Figma, Tokens Studio and Style Dictionary support it. The tokens then become CSS variables, a Tailwind theme and, when needed, iOS and Android resources.

The Figma and React component library

In Figma: components with variants, variables and auto layout. In code: React and TypeScript components documented in Storybook, tested (interactions, visual rendering) and published as a versioned package, then integrated into your Next.js apps or Drupal sites. See our React and Next.js expertise.

Accessibility in every component

WCAG 2.2 level AA criteria are handled in the component: visible focus, contrast, keyboard navigation, target size, ARIA. A fix benefits every page that uses it. For the European Accessibility Act, the reference standard is EN 301 549: its version 4.1.1, published in September 2026, adopts WCAG 2.2, while version 3.2.1 remains the legal reference until the new one is cited in the Official Journal. We only talk about conformance after a page audit: read our practical WCAG guide.

Level applied: [TO PROVIDE: WCAG level applied to delivered components and the team's accessibility certifications (RGAA, IAAP)].

Documentation and governance

A documentation site, usage rules (do and don't), a contribution process, semantic versioning, a deprecation policy and adoption metrics. Without them, the library starts drifting again within months.

AI

A design system your AI agents can use

Coding assistants now generate part of the screens. Without machine-readable rules, they make up colours and components.

Machine-readable tokens and documentation

Tokens in the DTCG format, semantic names and rules written in plain language: the coding agent knows which component to use, with which values, and when not to use it.

Figma and Storybook connected to coding assistants

The Figma MCP server passes variables, components and layout data to agents; Code Connect maps each Figma component to its code. The Storybook MCP server, still in preview, gives them component documentation and lets them run tests. We check compatibility with your framework at kick-off.

Components for AI interfaces

Generation states (in progress, partial, error), fallback answers, handover to a human, confidence cues. And the notice telling users they are talking to an AI, unless it is obvious: Article 50 of the EU AI Act has required it since 2 August 2026, according to the European Commission. Designing these journeys is the job of our Harnessed UX service.

The agent proposes, the team approves

Generated contributions go through the same reviews and tests as human ones. This is the approach we describe in our article on harness engineering.

VOID project: [TO PROVIDE: project or proof of concept where an AI agent consumes a design system (Figma or Storybook MCP, rules file) and what was measured].

Method

Our approach, from audit to run

  1. Audit

    Interface inventory, Figma files, front-end code, interviews with your teams.

  2. Scoping

    Scope of the first version, with components prioritised by actual use.

  3. Foundations

    Tokens and the first components, in Figma and React, documented in Storybook.

  4. Pilot product

    Roll-out on a first product, adoption tracking, adjustments.

  5. Scale and run

    Roll-out to the other products, then ongoing maintenance and improvements.

We work in two-week sprints, with regular demos of what has been delivered.

Run

After delivery: running the design system

A design system with no owner decays fast: detached components in Figma, local copies in code, forgotten rules. We maintain it like an application: shared backlog, regular releases, fixes, new components, and upgrades of Figma, React and Storybook.

The run follows the same rules as our application maintenance: service levels defined by severity, measured and reported. The library comes with a 30-day warranty against major defects after delivery (terms of sale). Design system commitments: [TO PROVIDE: release cadence, response and fix times by severity level].

Europe

Based in Europe? Work with our team nearshore

VOID has been operating since 2005. Our production teams are in Casablanca and Agadir, and we have a representative office in Paris. Casablanca is 1 hour behind Paris, Brussels and Berlin in winter and 2 hours behind in summer: Morocco returned to GMT on 20 September 2026 (Decree 2.26.530), while the EU applies summer time.

On-site workshops: [TO PROVIDE: terms and frequency of on-site workshops in Europe]. Data protection: [TO PROVIDE: contract clauses (GDPR, Moroccan law 09-08, standard contractual clauses) approved by legal]. Day rates: [TO PROVIDE: day rates excluding VAT in euros (UI designer, React developer, design system lead)]. Team: [TO PROVIDE: headcount, seniority and location of the designers and front-end developers].

For contracts, team set-up and ongoing maintenance, see our nearshore services in Morocco.

Case

Case: the Attijariwafa bank digital hub

VOID has worked with Attijariwafa bank since 2014. We designed and built the group's digital hub, which we have improved and maintained since 2018: a Design Thinking approach, navigation organised around user needs, and access to the group's subsidiaries, regional markets and services.

Scope: [TO PROVIDE: scope of the hub design system (components, tokens, themes, sites covered, tools), VOID's role, years, permission to cite, anonymised visual]. Second case: [TO PROVIDE: another delivered design system (named client, year, scope), ideally European]. Measured result: [TO PROVIDE: measured result on a delivered design system (screen production time, variants removed or adoption rate)].

See all our work on the projects page.

Budget

Engagement models and budget

Fixed-price audit

Inventory, Figma and code review, accessibility check, roadmap.

Price: [TO PROVIDE: price excluding VAT of the design system audit, in euros and dirhams].

Build

Fixed price on a defined scope, or a dedicated design and front-end squad.

Price: [TO PROVIDE: fixed-price build range and monthly cost of a squad, in euros and dirhams].

Run

As a subscription or within an existing maintenance contract.

Price: [TO PROVIDE: monthly run fee, in euros and dirhams].

What drives the budget: number of products and brands, the state of what exists, platforms (web, iOS, Android), documentation depth and run scope. We give a firm quote after the audit. We also resell Figma Organization licences (page in French), payable in Moroccan dirhams.

FAQ

Frequently asked questions

What is a design system and how is it different from a style guide or a UI kit?

A style guide sets the brand: logo, colours, typefaces. A UI kit is a set of mock-ups, usually in Figma only. A design system carries both into code: tokens, tested components, usage rules, documentation and governance.

How long does it take to build a design system?

It depends on the number of products, what already exists and the platforms; we commit to a schedule after the audit. Benchmarks: [TO PROVIDE: typical length of an audit and of a first version on a pilot product, in weeks].

How much does a design system cost?

The budget depends on the number of products and brands, what already exists, the platforms, the documentation and the run. Price ranges: [TO PROVIDE: price excluding VAT of the audit, the build and the monthly run, in euros and dirhams].

Can you start from our existing Figma files and React components?

Yes, and it is the most common case. The audit maps what exists and spots duplicates and gaps between Figma and code; we keep what works. Rebuilding the whole library is rarely the right call.

Can one design system serve several brands or subsidiaries?

Yes. Each brand or subsidiary gets its own set of tokens while components stay shared, so a colour change happens in one place.

How do you make a design system usable by AI coding agents?

Tokens in the DTCG format with explicit names, documentation that says when to use each component, and access through the Figma and Storybook MCP servers. The agent's proposals then go through the same reviews and tests as the team's code.

Who maintains the design system after delivery?

Your team, after a handover, or VOID under a maintenance contract: fixes, new components, version upgrades. Commitments: [TO PROVIDE: release cadence and fix times by severity].

How does working with a nearshore team in Morocco work?

Our production teams are in Casablanca and Agadir, 1 hour behind Paris, Brussels and Berlin in winter and 2 hours in summer; VOID has a representative office in Paris. On-site workshops: [TO PROVIDE: terms for on-site workshops in Europe].

Sources

Sources and further reading

For the full method, read our complete design system guide. For all our design services, see our UX/UI design agency. To connect a CMS to AI agents, see Drupal as an MCP server.

Official sources cited

Let's talk about your design system

Tell us about your products, your brands and the state of your Figma files and code. We reply within 24 business hours.

Talk about your design systemRead the complete design system guide