Introducing the Figma Sector Design System

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 built approach and tried and tested tools.
• Content first approach with a strong focus on the editorial experience.
• Modular building blocks that allow to start small, grow bigger. 
• Accessible design is good design. 
• More than technology.  
• Open and inclusive. 
• Less is more.

Touchstones

Based on these principles we want to ...

• deliver a minimal and maintainable set of useful and reusable tools 
• provide a Tailwind integration via variables and semantic design tokens hooked into the Sector Starter Theme
• Jam boards that support our design and build strategy
• provide a starter set of re-usable Low-fi 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.
• Less is more!

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 setting,
• breadcrumbs, 
• custom blocks and view blocks delivered with the Starter KIT,
• default archive listings, 
• and footer regions. 

and components

• for the WYSIWYG design elements delivered with the Starter KIT,
• Webform fields delivered with the Starter KIT,

When will the MVP be available?

We are currently aiming for the end of September 2023.