Introducing Sector Design Systems using the Figma Sector UI / UX Toolbox

Design systems can streamline your design and build processes. Adding Figma into the mix will foster collaboration and turn your design system into an indispensable tool in creating exceptional products.

Why a design system 

We have always seen Sector as more than code. Adding a minimal and re-usable design system to the Sector Ecosystem just makes sense. The design system will provide a consistent framework of design principles and guidelines as well as a catalogue of re-usable building blocks and cohesive visual elements for your project. The design system will also allow the Sector product team to validate our UX approach and support our design and build processes.

Why Figma 

We believe that using Figma—the industry leading online collaboration framework—will invite collaboration and add efficiency to the workflows between discovery, design, frontend and site building.

Principles

The Design System inherits its principles from the principles for the Sector Ecosystem as a whole. 

• Deliver sites faster with less risk using a consistent build approach and tried and tested tools.
• Provide an efficient framework for design and build processes. 
• Content first approach with a focus on the editorial experience.
• Modular building blocks that allow you to start small, grow bigger. 
• Accessible design is good design. 
• More than technology.  
• Open and inclusive. 

Touchstones

Based on these principles we want to ...

• Deliver a Sector Starter Discovery Kit that can be used as part of the Sector design and build process. 
• Stick to a less is more approach.  

To do so, the Design System should ... 

• Deliver a minimal and maintainable set of useful and reusable tools 
• Provide a Starter UI Kit of re-usable wireframes with the standard UX patterns delivered by the Sector Starter Kit and the Sector Starter Theme
• Provide a starter set of accessible, visual designs built from design patterns using variables and design tokens.
• Work well with Tailwind by using variables and semantic design tokens hooked into the Sector Starter Theme 

Also considered are

• Jam boards that support our design and build strategy

What is included 

We are currently planning to provide patterns for 

• Alert banners
• Branding elements
• Main menus
• Hero regions with variations based on the Sector 10 display settings
• Breadcrumbs
• Custom blocks and view blocks delivered with the Starter Kit
• Default archive listings
• Footer regions 

We also plan to provide components for

• WYSIWYG design elements delivered with the Starter Kit
• Webform fields delivered with the Sector Webform add-on 

When will the MVP be available?

We are currently aiming for the first quarter of 2024.