Meet Fluid 5

A more robust, more accessible and more usable version of Fluid. Built for you with your feedback.
Oh, and of course we integrated the new ENGIE brand.

We're excited! Hope you are too.

New branding, updated components and plenty of other sexy new features

Built for you to design for all

Detailed Figma documentation

We know designers are creatures who question themselves too often, so we made a documentation directly on Figma that allows you to know everything about each component to use it in the best way (eg: Do's and don’t...).

Accessible color palette

Interfaces should be accessible to as many people as possible. That's why we made sure that our color palette complies with the accessibility standards of the RGAA, so that each component is as well.

fluid v4 components
fluid v4 components

Sharp tool to design

New UI: Simplicity. Made Clear.

Redesign of the components valuing flat design with squarer shapes, more horizontality, and a better harmonization of all the components.

Up-to-date with ENGIE rebranding

As you may know, ENGIE’s colors and guidelines have evolved: you obviously have the whole palette available on Fluid 5 (preview, hex codes, tokens, you have it all). You’ll notice the change of blue (and of course, it’s accessible now).

fluid v4 components

Get the most out of Figma

Variants & component properties

Have more control to tailor components to your needs by using the new component properties in the Figma Design panel. With these advanced component properties, your design experience is even more streamlined.

Interactive prototypes

You can now use interactive components to create prototypes with hover and click behaviours: this should help with communication between designers, developers and product owner. Nothing’s stopping you from testing your prototype with real users now!

fluid v4 components

At last, developer-friendly

Your design. Your code. Always in sync.

Each update of the Figma library is synchronized with an equivalent update of all code libraries. This way, designers, developers and stakeholders can work together seamlessly to build better products.

New Angular components

Thanks to your numerous feedback, we did it! You can use new Fluid components in Angular (eg: Tag, auto-complete, select...).

fluid v4 components

We get it. A picture is worth a thousand words

Slide the line left and right to see what's changed!

A set of Fluid 4 components A set of Fluid 5 components

Fluid 4 vs Fluid 5

Try our libraries of 35+ ready-to-use components

Whether you are a designer or a developer, we have curated resources to get started with your Fluid 5 migration. With Fluid 5 you'll be able to design responsive websites in no time.

See all the components

Release roadmap

Upcoming features

October 18th, 2022

Alignment with new ENGIE charter

  • New color system: More robust color and grey palette, with accessible contrasts for components.
  • Update of new user interface (UI) foundations (new border-radius, shadow, interactions)
  • UI harmonization of all components to better fit the new ENGIE charter (eg: tag, switch, card)

Mid-November 2022

Fully accessible version of Fluid 5

  • Additional accessible components (eg: focus, keyboard navigation, semantics, alternatives)
  • Delivery of new components (eg: Side panel, accordion)

End of December 2022

Release of batch 3: Refined version

  • Correction of eventual bugs.
  • Delivery of missing components to be synchronised in design and development in each library (figma/vanilla/react/angular)
  • Delivery of new components (eg: Dropdown menu, Notification, Button group, multi autocomplete/select)

Made for you by the Fluid team

David de Vicente's profile photo

Product manager

David De Vicente

Celine Bouillon's profile photo

Ux & Accessibility

Celine Bouillon

Cecile Onno's profile photo
Dorian Bonnaves's profile photo

Product Designers

Cécile Onno

& Dorian Bonnaves

Cecile Onno's profile photo
Dorian Bonnaves's profile photo

Front-end Developers

Massinissa Bouneffa

& Maxime Groff

Cecile Onno's profile photo
Dorian Bonnaves's profile photo

Growth Managers

Maxime Breynat

& Jean Lepeudry

Getting in touch

calendar_today

Jump in

We can help you get onboard Fluid

question_answer

Contact

Reach out to us with your questions and suggestions

thumb_up

Contribute

You worked on a component, feel free to share with us

supervisor_account

Be part of the community

Don't hesitate to reach out to us!

Just so you know, 14 Fluid components and 23 Fluid tokens have been used on this page :)