Is there something wrong with this page?
More blog posts
Getting started with the Sector UI / UX Toolbox
Sector Ecosystem
Sector 10
Sector Design System
The Sector UX Design Toolbox Starter Kit is coming! This post is a work in progress and will grow while we develop the toolset in Figma.
New here?
Our post Introducing the Figma Sector Design System explains the underlying principles and goals for the Sector UX Design Toolbox and what we aim to include in the Starter Kit.
An Introduction to Design Systems in Figma
The Figma course 'Introduction to Design Systems' is the place to start—"Design systems are a vast and ever-evolving concept, it can be difficult even for an experienced designer to know where to begin! Whether you’re about to build your first design system or just curious about them, check out Figma’s new course, Introduction to Design Systems!"
Getting started with Figma
Best way to get started is to head over to the Figma YouTube channel. If you have already used Figma with design tokens and variables you should be good to go! If not, have a look at the video resources below.
Our approach is inspired by Figma's The future of design systems is semantic—a must read for everybody looking to manage flexible and modular design systems.
Figma variables
Figma introduced variables in 2032, and the Sector Design system uses both variables based on Tailwind CSS defaults and design tokens referencing the variables. Have a look at The Figma tutorial: Intro to variables to learn more about the whys and hows of variables and tokens.
Figma auto layout
Auto layouts are a powerful tool to create structure layouts that can adapt to content changes and screen width. The Sector Design system uses auto layouts display content in various contexts. Learn more about auto layouts watching Figma for Education: Learning Auto layout
Getting started with the Sector design system
Coming soon!
Collection