Newskit Logo
Newskit Logo
View Github

Guides

Design overview

NewsKit has everything you need to efficiently build scalable digital products, including Figma toolkits such as web UI components, theme libraries, plugins, and guidance.

Why use NewsKit for design?

Systems thinking is at the core of digital product design. NewsKit improves design consistency and developer efficiency across teams with considered, reusable solutions, and shared best practices. The result is more robust products and more time for innovation.

Design made easy

NewsKit makes it simple to design experiences that are not only aesthetically pleasing, but that are fully responsive, promote accessibility and align to the components in code. NewsKit allows designers to free up time to concentrate on the important stuff - like the end user experience!

Complete flexibility

NewsKit is fully customisable, with the flexibility to apply a single brand, or sub-brands style, with an extensive theming system. Additionally the Figma components have a range of variants and layer options to allow for further cutomisation.

What’s included?

NewsKit provides shared Figma libraries to assist the product design process, these include:

Theme library

An advanced full-featured theming system containing brand styles that can be used and synced across files, including palettes and colours, typography, shadows and grids.

View theme library in Figma (internal only)

Web components library

A collection of high-quality responsive components that can be themed to align to any brand.

View Web components library in Figma (internal only)

Icon library

An extensive set of categorised icons that contain both filled and outlined styles, which can be customised or added to as required. The icon libraries in the design system use Material Icons.

View Icon library in Figma (internal only)

Utilities library

A host of utility components to aid in the speed and consistency of design deliverables and to improve workflow, including annotations, cursors, device mockups, accessibility labelling, and more.

View Utilities library in Figma (internal only)

NewsKit Figma library architecture

Below is an example of how it is recommended to link Figma libraries to get the best out of the NewsKit Design System. This ensures that whenever the NewsKit Design System is updated, designs utilising this can automatically receive updates and enables contributing to the NewsKit Design System.

Custom Figma plugins

NewsKit provides custom Figma plugins to improve the design process workflow, these include:

Theme Swapper plugin

A Figma plugin that provides functionality to change themes across UI components and elements. For example, switching between light and dark themes, sub-themes, or different visual fidelities.

View Theme Swapper Figma plugin (internal only)

Text Crop plugin

A Figma plugin that removes the whitespace around text boxes, removing extra leading (space) above and below your text. This ensures consistent and predictable layout designs.

View Text Crop Figma plugin

Theme Exporter plugin

A Figma plugin that provides functionality to export NewsKit design tokens in JSON format from Figma styles to use with the NewsKit codebase.

View Theme Exporter Figma plugin (internal only)

Project template files

NewsKit provides template Figma files to kickstart design processes, helping to develop a consistent workflow, these include:

UX project template file

A Figma file that provides a template structure for UX-focused projects. This template includes personas, user journeys, competitor analysis, and more.

View the UX project template file in Figma (internal only)

UI project template file

A Figma file that provides a template structure for UI-focused projects. This template includes a playground, prototype, handoff, and more.

View the UI project template file in Figma (internal only)

Guidance

NewsKit provides comprehensive documentation and guidelines covering a variety of areas for a better understanding of how to get the best out of the NewsKit design system, these include:

NewsKit Patterns guidance

Guidance for solving common user problems in a consistent, considered way. For example, best practices for onboarding to a product or feature.

View NewsKit Patterns guidance

NewsKit Accessibility guidance

Guidance for designing inclusive experiences.

NewsKit Handoff guidance

Guidance on how to communicate a design to the product team for engineers to build.

View NewsKit Handoff guidance (internal only)

What’s next?

Want to use NewsKit for your next product? Follow the next steps belows to learn more:

Design quickstart guide

A step by step guide to get you up and running using NewsKit.

Need help?

Can’t find what you’re looking for?

Need help?

Can’t find what you’re looking for?