Design
Using the SDS Core Figma library in design projects.
Last updated
Using the SDS Core Figma library in design projects.
Last updated
Before working with this file, it is crucial to review the Getting Started – Designing section to ensure proper setup and usage.
The majority of projects using Sipster should center around the use of the SDS Components Figma library, not this SDS Core library. This Core library can be thought of as the foundations upon which the other design libraries and packages are built.
Unless you are a member of the 2600Hz Design Systems team, it is strongly recommended to not edit this core file itself. Doing so will impact the other Sipster design libraries.
Once you have the SDS Core library added in a working design file, it is important to familiarize yourself with the library and what it provides so that you can use it to its full potential.
The file is divided into the following pages:
The pages between the horizontal lines contain the shared components and styles that are used throughout the entirety of Sipster Design System, including the other design libraries. You can learn more about each of these pages, the options they provide, and how to use them in the dedicated Styles and Layout System sections of this documentation.
SDS Core currently contains raw variables for every color from the palette, all units of the spacing scale, and the breakpoint values from the Layout System. These variables are presented in Figma controls where relevant, ie color variables are available in color selection menus, and dimension based variables are available in controls like width, height, padding, spacing etc.
All of the available Sipster typesets are included as reusable Figma Text styles. These Text styles already contain the proper size and line-height ratios—just select your working text layer and then select which Text style you want to apply.
Currently, there are two system components provided in SDS Core: the Spacing component, and the Grid component. Learn more about each of these on their respective pages.
There are a few shared styles provided in the SDS Core library. Raw Grid styles are provided, which are based on Sipster's Breakpoints & Grid system. These are used to build the Grid component mentioned above.
There are also a couple Effect styles, which provide the default shadow styles in Sipster.
There are also a couple of "Utility" components to help with communicating various details and nuances throughout designs. At the time of writing, there are currently two of these utility components: Callout and Cursor.
The Callout component can be used to draw attention to a specific element or section in designs, allowing designers to provide additional insight for project stakeholders. This is commonly used in handoff or redline file scenarios. There are a few component properties available to control what Type of Callout is presented, the Position of the callout, and to provide a label/value when relevant.
Often times designers need to communicate a specific interaction or user input. SDS Core provides a flexible Cursor component that allow for this. Once added to your working design file, you can change the Type of cursor to match your specific needs.
