Based on our research and experience, we know that lack of design consistency constitutes a serious threat to the product development processes, so we’ve come up with a unified Enterprise solution – Design Systems.
Now you can collect your design guidelines and resources in a Design System at the early stages of the project to maintain the consistency and facilitate the processes for your entire team!
To start creating your Design System, first, open the Design Systems tab in the top bar of your Dashboard. Once you access the tab, you’ll be able to create a new Design System or view the existing ones.
Creating a Design System from scratch
Let’s start from using the empty Design System and filling it with the specifics – it’s enough to click Create from scratch button. Once you do it, the system will automatically create the corresponding Design System Library, so you’ll be able to use its elements directly in your prototypes.
The Library and the Design System will have the same name, so you can locate it easily.
Each Design System consists of 4 sections where you can add the resources for the given project: Colors, Typography, Assets and UI Patterns. You’ll be able to choose a section to start with using the navigation to the left. Additionally, you can also rearrange the sections by dragging them into desired places in the structure.
Now it’s time to add some content to the Design System structure.
To add colors, type their HEX codes and confirm by pressing Enter. You can rename each color by double-clicking its name. If you do so, the colors and their custom names will be displayed on Preview in the Spec Mode.
The text styles and formatting can be added to the Design System directly from the editor. Once you finish organizing other resources, open your prototype and choose the proper Design System Library from the list. Now it’s enough to select formatted text from the canvas and press “+Text Style”. The font along with its size and weight will be displayed both in the Library and in the corresponding Design System.
Design Systems allow you also to store assets such as images and icons (in .svg format). To upload your files, it’s enough to click Upload icons/Upload images button in the Assets section of your Design System and select your files. You’ll be also able to rename your assets if needed.
Similarly to Typography, the UI Patterns need to be included in the Design System from the editor level. Once you open your prototype, go to the Design System Libraries and locate the library attached to your Design System. Then simply select your symbols on the canvas and add them to the library by pressing “+ Symbol” on the UI Patterns panel – this way your templates will be incorporated in the Design System as well.
Also, while adding the resources, you’ll be able to create additional categories, rearrange them and sort your elements. This way you can achieve a neat and highly organized structure which, in the result, will make your Design System convenient to use.
Creating a Design System from the DS Library
As mentioned before, you can also use the existing UXPin or Sketch Design System Libraries to build a Design System quickly. It’s enough to choose a proper library from the drop-down and confirm it with the Select button – all the colors, typography, assets and UI Patterns added previously to the library will be now included in the corresponding sections of the Design System. Please note that this option is available only for users with permissions to edit a given library.
A single Design System Library can have only one corresponding Design System.
Adding documentation for the uploaded guidelines is the next step to creating a fully comprehensive Design System. You can do it right away as you upload your resources – it’s enough to place your cursor in the Add description here section and start typing! Or you can edit your Design System later on to provide more context for your team members.
You can conveniently edit your documentation using your keyboard: if you want to start a new paragraph, just press Enter. If you want to make some pieces of information stand out, you can simply select your text to add styling options or create a list as well as mark some part of your documentation as code. Or you can use the well-known keyboard shortcuts! When you are done, press Finish editing button in the top right corner.
There are a couple of levels for adding documentation – you can include further context for the whole section, category and in case of Typography and UI Patterns even for a single text style or element.
Additionally, the documentation added to the specific Symbols will be displayed on Preview as a separate part of the Spec Mode along with the name of the Design System.
As a creator of the Design System, you’ll be able to set unique viewing and editing permissions for your Design Systems. This way you can limit editing access to yourself or just to the specific project members or allow the whole team to use and edit the System freely.
Please note that Design System Libraries and corresponding Design Systems will have the same viewing and editing permissions.
In order to determine the permissions for the Design System, you’ll need to open the Design System tab in the Dashboard first. Once you hover over “More actions” icon for the chosen System, select the “Permissions” option from the dropdown to specify access for your team.
Viewing and editing a Design System
You can access all the created Design Systems in the Design Systems tab in the Dashboard – simply click the selected Design System to open it and view the resources along with the added documentation.
The colors visible for each Design System in the Dashboard match the first 4 colors added to the system.
In the Dashboard you can also delete the entire Design System, if you have proper edit permissions. Just hover over the specific Design System, select Delete option from the menu and it’s done!
Once you open a Design System, you’ll be able to edit it by clicking the Edit button in the top right corner. Please note that this option is available for logged UXPin users only.
Of course, you can also include additional materials to your Design System. It’s enough to add new colors or assets in the editing mode or open your prototype in the editor and update the resources added to the corresponding Design System Library – everything will be synced automatically.
Similarly, if you have proper permission, you’ll be able also to delete specific items from the Design System. Once you open the editing mode, select your resources and click “Delete selected items” button at the bottom of your page.
Additionally, if you create the categories in the DS Library and group your elements, the order will be kept in your Design System as well.
All the DS Libraries with the Design Systems are marked with a proper notification. If you want to open the specific Design System while working in the editor, you can simply click it and the matching System will be automatically opened in a new tab.
While editing your Design System, you’ll be able to decide on the specific display options for your colors and assets. Just click on the View menu in the right corner of each category and choose one of the options.
We’ve also prepared for you two ways of reviewing Typography in your Design System. They’re Typeface and Text Styles. Typeface is generated automatically on the basis of fonts that you’ve chosen. It shows the font with all its styles grouped neatly, an example you can interactively play with to see how your font behaves in action. Text Style, as we mentioned above, shows specific texts that you’ve added from the canvas and their detailed properties.
Sharing the Design System
Since the main point of UXPin Design Systems is to ensure design consistency across all the projects, the created Systems can be easily shared with both your team and external collaborators or stakeholders. Even when they don’t have an active UXPin account!
If you want to share your Design System, open it in the Dashboard and click “Settings” button. You’ll instantly see a modal with the public link that you’ll be able to copy and send to anyone you want.
Ready to try UXPin Design Systems? Log in to the app!