Orchestra for Figma — a Design System Walkthrough
What’s Orchestra?
Orchestra UI is a new design system and component library made for Figma. Does the world need another UI kit? Probably not, but we believe this is not your ordinary design kit. We created it for ourselves initially to build an extensive design library that we’d want to use in our projects. Given how useful this has been, we decided to release it for public use.
Getting Started
First and foremost, welcome to Orchestra! We’re glad you’re here and want to show you around the most advanced design system ever created for Figma.
Now that you have or are thinking about getting your shiny new design system toy, we want to take some time to show you some of Orchestra’s features and best practices. We want you to get the most value from Orchestra by bringing out your best designer.
What’s included?
We broke Orchestra’s navigation into a few key areas — foundations, base components, overlays, web app components, UI examples, and markup capabilities. Here’s an overview of what you’ll get with Orchestra:
- Foundations are comprised of your tokens or styles, icons (including company and payment logos), emojis (interchangeable with the Orchestra icon library), and viewport setups with grid styles.
- Base Components are the building blocks of any digital interface. They are things like buttons, inputs, checkboxes, etc. These atomic-level components will often be used to build larger structures (organisms) such as menus, drop-downs, and similar items.
- Overlays include the most common modal and non-modal patterns, like dialog windows and slide-overs. These components make use of Slot Components, which will allow you to replace content without detaching components.
- Web App Components are web-app or digital product-specific components such as cards, charts, progress bars, navigation patterns, tables, etc.
- UI Examples are created for your usage. Feel free to grab them and customize them to fit your needs — we just wanted to get your creative juices flowing! We’ll continually be releasing UI examples made with Orchestra on our Twitter @tryorchestra.
Documentation and Editing
With complex design system files like Orchestra, it’s often easy to get lost in the sheer amount of components. Orchestra is built with an Atomic Design approach where components are nested, creating interdependence — where small changes you make show up throughout the entire system.
Even with this Atomic Design approach, we put a lot of emphasis on file structure and documentation. Orchestra helps you differentiate between states and variants, using annotation and organizing components into spreadsheet layouts.
Edit Guides will help you see what aspects of a component are controlled at a specific level. These guides share helpful tips, such as an input add-on is best edited in its master component rather than editing the instance inside an input field component, which would lead to you creating an override.
Changing Themes
Orchestra takes advantage of the Figma Tokens plugin to manage its styles. It’s optional to use this free extension, and you’ll be able to use Orchestra without any limitations if you don’t wish to use it. So if you’re looking to customize the look and feel of your product and not go crazy while doing it, we recommend you check it out. The Figma Tokens plugin is quite something!
When you get your purchase files, you’ll see that there is a Light and Dark theme. It’s up to you which one you want to start with. When it’s time to change the theme, you’ll be able to do that. By default, Orchestra is set up in Figma Tokens with a Light and Dark theme, but you can also create your own themes by customizing the ones provided. You can either:
- Re-skin your working file, or
- duplicate your file and re-skin it using a different theme.
Component Properties
Orchestra v1.0 takes full advantage of the latest Figma update to component properties. Some components are notoriously hard to pull off, especially if you want to have a lot of variants. In the past, when creating tables or input fields, for instance, you’d usually end up having to make substantial component matrixes to account for all the different variants — input field with a label, input field with an icon but no label, input field with helper text,… just typing this brings back bad memories.
With Component Properties, you’re able to reduce the number of variants to the necessary minimum. In the example of a table cell below, we use a single cell component that houses all the different element possibilities. With the help of booleans and instance swap properties, you’ll be able to customize the cell component to your needs. Variants then help drive the more stable properties, such as size and interactive states.
Content Slots
Content Slots let you embed your content within component instances without detaching them. They are a powerful tool if you want to maintain component dependencies and decrease your maintenance time.
Let’s say you want to design a modal dialog. Without using Slots, you’d usually have to either detach your dialog component (the housing element) to be able to drop in your content. Or you’d need to create a large variety of dialog components with different contents to encompass all possible use cases. What if you want to change the style of your dialog window then? You’d have to update all of those versions.
With Slot components, you can create a housing element (a content paradigm), such as a card or a modal, and swap the contents using Instance Swaps in Figma. This way, your housing component will remain unbroken, and updating it will be easy, given it is kept separate from the content within.
..and there’s more!
Dive into Orchestra and enjoy the most advanced design system created for Figma. We created a short video walkthrough to ensure you hit the ground running. Let us know if you have any questions. We are excited to see what you build with Orchestra!
If you ended up here by chance and have no idea what we’re talking about, check out getorchestra.com/designsystem to see what all the fuss is about.
