Enterprise
Design
System
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.
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.
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.
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
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.