Set up your design tokens.
Configuring design tokens should be the first step in building out any Nyla site, enabling you to have a consistent and comprehensive design system to use whilst building sections and templates.
This article walks you through the process of which identifying which design tokens to add and how to do so.
When configuring design tokens, be mindful to avoid concurrency issues.
Identify your list of design tokens
Before working in Nyla, we recommend defining the list of design tokens that are featured in the designs or on the site you are migrating to Nyla.
We recommend to:
- Identify the list of global design tokens in the designs
- We suggest to start by mapping the design styles to the global design tokens that come loaded into Nyla by default.
- Having comprehensive coverage of Nyla global design tokens enables you to have a future facing design system, as well as being able to preview Nyla templates and blocks in your brand.
- Any design tokens that are additional to the list of global design tokens should be added as custom design tokens.
- Name custom design tokens clearly in a user-friendly way
- When adding custom design tokens, they should be named in a way that will make sense to future users who will be building and editing designs in the tool.
Implement the design tokens in Nyla
Once you have outlined the list of design tokens that you are going to add, you can go into Nyla and configure each one. You can refer to each different help articles for the details on each design token.
All sites should have design tokens set up for the following:
- Fonts
- Typography
- Colors
- Spacing
- We recommend to maintain Nyla defaults if your designs don't require any changes to site margins and so on
- Call to Actions
- Product Options
- Ensure to configure all product option styles needed for the designs, as well as future use cases that the site users will need
- Swatches (if applicable)
- Forms
- At minimum you should add styles for input, checkbox, radio button and dropdown.
- Modals
- You should add at least one modal style (even if not explicitly shown on the designs) so that site users have the option of using on-brand modals easily in the future.
Optional design tokens:
- Animations
- Transitions
Use your design tokens in sections and templates:
Once you have configured and published your design tokens, you can then go ahead and use them to build out your sections and templates for the site.
You can always come back to add more at a later date, but by carefully adding your design tokens first, you can deliver a better user experience for future users of a Nyla site.
Next Step ➡️ App Activation