Enterprise
Design
System

Enterprise
Design
System

The NextEra Energy design system aims to help our internal development teams create optimized products for their customers, our employees.
Design GuidelinesDeveloper Components

Guiding principles

Principle 1

Visual consistency

By using a visual language that synthesizes the classic principles of good design with the innovation and possibility of technology and science, we are able to use these components and principles across our applications to give a consistent experience across the NextEra Energy family.

Principle 2

Scalability

Develop a single underlying system that allows all of our teams, regardless of the frameworks and tools they are using, to easily work with the design system to pull components, templates, and pages into their applications.

Principle 3

Reusability

By creating and governing a design system, we are able to minimize costly rework and improve our development cycles by removing the ambiguity of 'what should this look like?' from the team's workload.

Commonly used tools

Our design system uses the two most popular tools for building and distributing design systems today: Storybook and Invision Design System Manager.
Our organization utilizes Storybook, a developer favorite for building UI components. Storybook allows developers to pull components directly and place into their applications and customize. A video demo will be provided soon.
Our organization will be utilizing UXPin for designers in the near future. This tool has cross-compatibility with operating systems and contains all of the designed and branded UI elements necessary to build our applications. This makes it easy for UI designers to pull components and stylings for use.

Expected timeline

The enterprise UX team is focused on creating the visual design and guidelines for the EDS and working with an external vendor to assist with front end development of these items. Our expected timeline is as follows.

SPRING 2020 and beyond

Integration, governance and upkeep

In March, Storybook and the npm repository will be launched as a pilot. This will include live components for developers to use for React and Angular. It will mirror the design guidelines and be the source of truth for developers. It can act as a sandbox to develop the components in as well, prior to linking to data, to test functionality.

 

This will be deployed through UXPin (design guidelines and design components) and Storybook (React and Angular components and documentation) with training relative to these tools slated for Spring 2020.

The IT UX team will help teams to integrate the design system into their applications and oversee the upkeep and governance of the components. Developers and designers will be able to submit additional components to be approved and added into the system. This process is still in progress and will be defined at a later time.

 

Questions can be directed to DL-dt-ux-team@fpl.com.

How to use

Invision DSM

Navigating the design system

Basic styles
Atoms
Molecules
Organisms
Templates
Pages
Basic styles
Colors, typography, icons, elevation (shadow) styles, and layout/grid definitions sit outside of the atomic design concept. These sit in their own categories.
Atoms
Molecules
Organisms
Templates
Pages
Basic styles
Atoms
The items are the building blocks of an UI. Buttons, logos, links, inputs, search patterns, list items, and sliders live here.
Molecules
Organisms
Templates
Pages
Basic styles
Atoms
Molecules
These are groups of atoms grouped and can be used as parts of an UI. Tabs, accordions, cards, dialoges, snackbars, banners, lists, and navigation menus live here.
Organisms
Templates
Pages
Basic styles
Atoms
Molecules
Organisms
Groups of molecules that form a distinct part of the interface. App bars, headers, footers, navigation patterns, data tables live here.
Templates
Pages
Basic styles
Atoms
Molecules
Organisms
Templates
Groups of organisms that form a framework for the application. Grids paired with headers, navigations, and footers live her. (Coming soon)
Pages
Basic styles
Atoms
Molecules
Organisms
Templates
Pages
Fully designed page templates with placeholder imagery and content live here. (Coming soon)

Style and theme

Using CSS stylesheets

Three CSS stylesheets are required for the design system:

 

Colors/font variables: Link coming soon

 

Iconfont: https://fontawesome.com/start

 

Web fonts: https://fonts.googleapis.com/css?family=Open+Sans:400,800&display=swap

Design and UI Development

Accessing elements

Developers: For detailed instructions on how to install the component library, please visit Storybook. A video tutorial will be available in the near future.

 

Designers: New details on utilizing UXPin will be coming in late March/early April 2020.