Figma and Storybook
We use Figma and Storybook to design and build WorkSafe's Vue.js design system and component library.
'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M18%2036C22.7739%2036%2027.3523%2034.1036%2030.7279%2030.7279C34.1036%2027.3523%2036%2022.7739%2036%2018C36%2013.2261%2034.1036%208.64773%2030.7279%205.27208C27.3523%201.89642%2022.7739%200%2018%200C13.2261%200%208.64773%201.89642%205.27208%205.27208C1.89642%208.64773%200%2013.2261%200%2018C0%2022.7739%201.89642%2027.3523%205.27208%2030.7279C8.64773%2034.1036%2013.2261%2036%2018%2036ZM20.0925%2014.823L14.94%2015.4688L14.7555%2016.3237L15.768%2016.5105C16.4295%2016.668%2016.56%2016.9065%2016.416%2017.5658L14.7555%2025.3687C14.319%2027.387%2014.9918%2028.3365%2016.5735%2028.3365C17.7998%2028.3365%2019.224%2027.7695%2019.8698%2026.991L20.0677%2026.055C19.6178%2026.451%2018.9607%2026.6085%2018.5243%2026.6085C17.9055%2026.6085%2017.6805%2026.1742%2017.8403%2025.4093L20.0925%2014.823ZM18%2012.375C18.5967%2012.375%2019.169%2012.1379%2019.591%2011.716C20.0129%2011.294%2020.25%2010.7217%2020.25%2010.125C20.25%209.52826%2020.0129%208.95597%2019.591%208.53401C19.169%208.11205%2018.5967%207.875%2018%207.875C17.4033%207.875%2016.831%208.11205%2016.409%208.53401C15.9871%208.95597%2015.75%209.52826%2015.75%2010.125C15.75%2010.7217%2015.9871%2011.294%2016.409%2011.716C16.831%2012.1379%2017.4033%2012.375%2018%2012.375Z'%20fill='black'/%3e%3c/g%3e%3c/mask%3e%3cg%20mask='url(%23mask0)'%3e%3crect%20x='-3'%20y='-3'%20width='42'%20height='42'%20fill='white'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0'%3e%3crect%20width='36'%20height='36'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
This guide is a work in progress
We're currently working hard to get this section of the playbook finished. Thanks for understanding, please check back soon.
Figma design system
If you're a designer working on a Vue.js application for WorkSafe, you can request access to Figma to create your own prototypes using the WorkSafe website design system. Contact the Digital Operations team for view or edit access.
Storybook component library
The latest version of the WorkSafe design system (also known as UI 2.0) is available to you in Storybook. Storybook is the source of truth because it exists in code - not just a static Figma design.