Discover the Evolved Shu Ha Ri Design System
How to Set Up a Shu Ha Ri System Font
Our design system uses SF Pro Display and SF Pro Text as the default typefaces. These fonts are highly versatile and designed specifically for optimal readability on screens.
SF Pro Display and SF Pro Text are part of the San Francisco typeface family developed by Apple. They offer a clean, modern look suitable for both personal and commercial projects. The typeface family includes a range of weights and styles, ensuring flexibility and consistency across various applications.
SF Pro Display is optimized for larger sizes, making it perfect for headlines and prominent text, while SF Pro Text is tailored for smaller sizes, ensuring readability in body copy.
https://developer.apple.com/fonts/
Publish your library
To create a library in Figma, begin by publishing this Figma document from the Team Library modal. This action will make all the main components and styles in the document accessible for use in other documents.
Here’s how to do it:
Open the Team Library modal and click on Publish.
Note that if it's your first time publishing a large library, it might take some time, possibly up to 30 minutes, as Figma organizes hundreds of components and variants.
If the process fails, just close the publish modal and try again.
Harnessing the power of Shu Ha Ri as your library
Figma lets you sprinkle the magic of your file's components and styles across the board! By publishing them, your file transforms into a library, granting you the power to embed instances of those components across various files and projects.
Light Up your projects
with your library!
Simply open the Team Library modal and add your library by clicking the button “Add to file”. It’s that easy!
That's a wrap!
When your library is activated in a project, the assets panel will immediately display all the assets from your library.
If any changes occur within the library, you'll receive a prompt to update it, ensuring everything stays synchronized.
Discover how to use libraries in Figma
Figma have some great resources on more advanced uses here: