Designers' Guide
Learn how to start designing using the Nulogy Design System (NDS).
Tools and assets
- Figma as our design tool for creating high-fidelity mockups, prototyping, version control, and team collaboration.
- IBM Plex as a Nulogy's sole typeface
- NDS UI kit as a library of Figma styles and components
- This website as a component reference guide
Understanding NDS visual language
To be effective at using the Nulogy Design System designers should familiarize themselves with the basics of NDS visual language. The following articles provide a good starting point:
Designing with NDS in Figma
NDS components
In Figma, the NDS components are available under the Assets
panel in Left Sidebar. The components are easily drag-and-dropped into the working frame and further customized through Layer
and Design
panels.
![Animation showing how to access NDS components in Figma](/static/figma-components-49a813d25d89f1f9b3ba6a5163a606f8.gif)
Using NDS components in Figma
NDS styles
By using available text, colours, shadows, and grid styles in the Layer
panel, designers ensure that their designs stay in line with NDS' visual style.
![Animation showing how to use NDS colour, and shadow styles in Figma](/static/figma-styles-939a62c2654f37287d44e2673834727e.gif)
Using NDS colour, and shadow styles in Figma
![Animation showing how to use NDS text styles in Figma](/static/figma-text-7be36a2f1a76fa08b8c8eefa54eac653.gif)
Using NDS text styles in Figma
![Animation showing how to use NDS grid and adjust nudge amount in Figma](/static/figma-grid-bf0c30e3142022de45a9831a949000c5.gif)
Using NDS grid styles and adjusting nudge amount in Figma
Default sreen sizes and Frame component
The NDS Frame component is created to help designers set the working canvas. It comes in different sizes that match breakpoints in NDS. Once imported the Frame component should be detached (Detach Instance) so that other elements can be nested inside.
![Animation showing how to access NDS components in Figma](/static/figma-frame-49ee4b57ad8c60d6a9ac733cb12986cc.gif)
Using NDS Frame component and setting the working canvas
Using version history
To leave a record of changes made throughout the design process and to be able to revert to desired revision designs should be regularelly saved to version history. Version history is available in
File
menu under Show Version History
![Animation showing how to save to version history](/static/figma-save-version-a6104c4fb8b83266f2e576f05e9b0566.gif)
Saving version history
![Animation showing how to view version history](/static/figma-version-515267ae00ebcf0d6b3d38300381d341.gif)
Viewing version history