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.
Launch Now

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.

34%

utilize Storybook, a developer favorite for building UI components. Our system uses Storybook to provide components for all languages. Storybook is compatible with the Invision Design System manager, making them the perfect pair.
Source

32%

utilize Invision Design System manager, primarily the favorite tool for designers. Invision Design System manager pairs with the key design tool for creating UIs, Sketch. This makes it easy for UI designers to pull components and stylings for use as well.
Source

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.
Q3

End of Q3 2019

Introduction of the NextEra Enterprise Design System (EDS)

September 19, 2019 marks the official introduction of the design system to NextEra Energy's IT leaders. In the current state, the design system hosts basic CSS styling and an icon font for developer use.

 

In Q4, all first iteration components were designed and available for UX designers to use in mock-ups. Front-end code development began in Angular and React with around 20% of atoms and molecules being coded by the end of Q4.

Next
Q1

FEBRUARY 2020

MVP launched

In February, our Storybook DSM will be launched in its early state. This will include live components for developers to use for React and Angular. It will mirror the Invision DSM 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 Invision DSM and Storybook with training relative to these tools slated for Spring 2020.

NextNext
2020

SPRING 2020 and beyond

Integration, governance and upkeep

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.

 

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

Next

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: https://fpl.invisionapp.com/dsm-export/florida-power-light-company/nee-enterprise-dsm/_style-params.css?key=HkwRPUJGS

 

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

Development specifications are currently in development and slated for launch by February 2020.

 

Each element will contain development specs and copyable code from Storybook and a link to the Storybook components in Bitbucket. These can be deployed to applications using Angular and React.

 

More simplistic HTML and CSS code specs will be coming for all other frameworks.