Welcome designers, here you'll learn how to use Fluid Design System with Sketch.

Before designing

  1. Install the Fluid Design System Sketch library

    Why do you need to use a sketch library?

    Libraries are the best way to import and share symbols between your Sketch files. When you use a library, Sketch will synchronize the symbols automatically on all your files to make sure you are using the right system at any time. A real time saver for you ;).

    You don't have Sketch? Download it here Sketch

    Sketch preferences

    How to use it?

    Directly import the Fluid Design System library in Sketch and start using the symbols. Nothing complicated. If a symbol is modified it will automatically synchronize with the different sketch files in which you are using the library.

    Sketch symbols
  2. Download the sketch file

    This file is a documentation. Open it to discover all the rules and standards to design digital products at ENGIE.

    Download Sketch overview

    InvisionMake sure your are using the latest version of the file and that everything is installed correctly. Click on the following link to get an overview of the Sketch file on Invision.

    Fluid Design System on Invision
  3. Browse the sketch documentation

    Explore the different components. Everything is organized following the atomic design methodology.

    Examples of components rules
    Buttons type
    Palette color
  4. Update the library

    We regularly fix bugs and make adjustments.
    Make sure you have the last version of the Fluid Design System Library by updating through Sketch.
    *You may need to restart your software to be notified.

    Library update