Link to Fluid's Microsoft Teams channel Link to the support page

What's new

Be sure to read our changes before updating the Figma library or a Node package.

We no longer publish updates on this page

However, we publish frequently updates for every library on the Fluid Teams channel

December 2020

Code library

First release of Fluid React library on npmjs.com with few components in alpha version.

Website

The experience index has been redesigned completely

November 2020

Code library

v4.2.0: fluid-design-tokens are now a dependency of fluid-design-system node package

October 2020

Website

New section: Data Visualization. All you need to know about pie, bar and line charts!

Code library

v4.1.0: New Tab component and fixes about colors.

September 2020

Website

New support page: you can now reach us through a contact form, report bug, request feature or share your work.

New Design Tokens page: the DNA of our design system with a tech-agnostic way to store variables

August 2020

Website

New autocomplete component documentation, Developer start guide is updated.

Templates are now available in Sketch!

Code library

v4.0.0: Dark mode, Tokens, autocomplete component, new builds ! migration guide

July 2020

Website

You can now globally toggle the dark mode for the Fluid design system pages!

Code library

v4.0.0-beta-3: A lot of css4 variables have appeared due to the Dark mode, please refer to the migration guide

Design Tokens are still work in progress. The goal is to have a tech-agnostic way to store variables of Fluid to ensure a better compatibility.

June 2020

Code library

New component: Header

Website

We finally updated the template page! You will find several examples of Fluid usage and newsletter!

There is also a new page called Layouts to help developers build faster web pages.

May 2020

The dark mode of Fluid is finally here! 🎉

Sketch and Figma library

Sketch and Figma files have now specific library with dark colors and components.

Code library

v4.0.0-alpha: Lot of changes, please refer to the changelog file Here are some insights:

  • Introduction of CSS4 variables to manage the dark mode
  • Initiate some design tokens with css4 variables
  • A new attribute used on the body tag to change from light to dark mode: data-theme="dark"

Website

A link to subscribe to the newsletter has been added on several pages.

April 2020

Fluid design system is now fully compliant with the new ENGIE brand identity! 🎉🎉 Please read the evolutions in each section.

Sketch and Figma library

Lot graphical evolution on components, please refer to the sketch changelog file

Code library

v3.4: Lot of changes, please refer to the changelog file

Here are some insights:

March 2020

Code library

  • v3.2: Removed border-radius for a lot of components

February 2020

We are slowly beginning to change the identity of Fluid to be more compliant with the brand (engie.com)! 🎉🎉

  • Some components no longer have border-radius (button, alert, card…).

January 2020

We are proud to announce the release of a Figma version for designers ! Both Sketch and Figma version will be maintained.

Code library

  • v3.1: Components can be dynamically injected into the DOM with Web Component approach, making it easier to use the library within popular frameworks and libraries, such as Angular, React or Vue.js

Website

  • Add links to join our different channels (Yammer, Teams, Slack)
  • Add links to use Fluid Design System (Sketch, Npm, Github)
  • Add links to install the Figma library

Sketch library

  • Fix several bugs (See changelog for more details)

Figma library

  • All components of the Sketch file have been transposed in Figma along with colors and styles. Enjoy !

December 2019

Code library

Website

  • Documentation page to use the Fluid Design System with VanillaJs, Angular, React and Vue.js have been updated
  • All the component documentation page have been updated for Fluid Design System
  • Migration guide available for the code library from v2.x to v3.x

November 2019

Code library

We worked on a complete library overhaul!

  • Available on Npmjs.com - Alpha version
  • New repository
  • New architecture, which allows the components to be used independently
  • Change Vanilla JS component files to TypeScript

Please be aware this is an alpha version and the documentation is not up to date (coming soon).

Sketch library

  • Colors have been updated according to ENGIE identity
  • Fix several bugs

Website

October 2019

Code library

3 components have been added:

  • Modal
  • Dropdown
  • Spinner

Sketch library

  • New component spinner with a gradient
  • Fix several bugs (navbar, cards…)

Website

We now provide documentation to start using the design system with VanillaJs, Angular and React and VueJs.

  • Documentation for new components (Dropdown, modal, spinner)
  • Update Roadmap page

June 2019

Code library

  • Lato is no more included into the node package, you have to import it in your project via google fonts
  • Inputs with icon and also input seach and input password have been added
  • Components are now tested with Jest library

Sketch library

  • Several components have been added:
    • Datepicker
    • Dropdown (unique and multiple selection)
    • Modal
    • Sidebar
    • Spinner (Progress)
    • Tabs

Website

  • New resource : Image pack (photography)
  • Form documentation page has been updated with input icon examples

May 2019

Components

  • Floating Action Button has been added with a menu

Sketch

  • Several bugs have been fixed
  • The library has moved to another server (More info upcoming)

Website

  • Select component documentation has been added
  • The contact us section has been updated with the add of the design system team
  • Introduction page has been simplified
  • Methodology section has arrived on the resource page. More to come…
  • All UI examples are now available in .sketch format

April 2019

Components

  • Tooltip component has been added
  • Slider component has been added

Sketch

  • Several bugs have been fixed
  • Text style have been standardized and cleaned
  • Icons : names are standardized

Library

  • Added the version of the library as a symbol

Website

  • Tools become Resources with a lot of new assets and links
  • Several bugs have been fixed
  • The getting started page for designers has been simplified
  • The getting started page for developers has been reviewed

March 2019

Components

  • Table component has been added
  • Pagination component has been added
  • Flux bar has been removed. It’s no more an ENGIE graphic chart element

Sketch

  • The color palette has been redefined to respect accessibility standards
  • Buttons has been redesigned
  • The navbar links are now in lowercase

Library

  • The library has been moved to a new repository. Please submit issues on this page
  • A lot of scss refactoring
  • Added new gradients mixins and css classes

Website

  • Bugs and issues have been fixed after user testing
  • The getting started page for designers has been simplified
  • Algolia search bar has been added on design system documentation