Skip to main content

Main Content

As a Designer

Learn about the Decanter Design System

Decanter includes both the Decanter Design System in Figma, and the implementation of that system in as a frontend framework (see our\[ As a Developer](/page/use-decanter-as-a-developer/) pages.) The Decanter Design System in Figma has been implemented for two purposes.

  • To articulate new ideas and see them through the collaborative ideation process where requirements, functionality, UX, and UI are defined.
  • To become a rapid prototyping library for our communication and design teams across the University, where efficiencies can be made by using elements we all want to be sharing anyway, so we can spend our time where we want to—on other work, or on new and innovative ideas, instead of duplicative work.

The tools

We are currently build the living Decanter Design System in Figma. Figma is design software that our team at Stanford Web Services and University Communications specifically selected for the following reasons:

Collaboration

The software is cloud-based and allows for synchronized, multi-person editing in real time. All files are stored through Figma itself. No checking-in or checking-out files at any time.

Libraries

Type, color, and master components can be created as shared, master libraries. There is no limit to the number of libraries a team can make. You can also use elements in a library as a starting place, detach them from their master, and tweak as needed for your own projects (and further turn those new components into libraries in themselves). We’ve designed Decanter to be a starting place or fully functional design system.

Using Figma at Stanford

Please note: Figma does not currently have the single sign on functionality in place for the educational context that would allow us to move forward with an organizational license. We are continuing to work with them to add this functionality, but have no estimated time of delivery.

At this time, if you would like to use Figma, your individual team (or designer) will need to sign up independently. Figma is free to use for those in education. Unfortunately, this does mean that the Decanter Design System is not ready to be used as a shared library. Instead, the Decanter Design System can be copied and pasted to your team Figma libraries. This process may result in the need for future manual updates as the design library grows and evolves.

Please contact us on Slack if you would like more information.

Community contribution

Having a shared central starting point for all Stanford digital design provides us the opportunity to share our work quickly and easily. Though the Decanter Design System is intentionally meant to be a baseline framework—deliberately simple and succinct—that doesn’t mean that new custom libraries we create for other purposes cannot be shared between us as well.

Learn more about contributing design

Decanter Design System backlog

If you are interested in understanding what our priorities are for design development in Figma, you can find our backlog here. If you are in need of design that you do not see included in this backlog, please let us know.

Please contact us on Slack if you would like more information.