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!
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.
NewsKit provides shared Figma libraries to assist the product design process, these include:
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
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
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
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
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
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
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 Accessibility guidance
Guidance for designing inclusive experiences.
Want to use NewsKit for your next product? Follow the next steps belows to learn more: