Guides
Design overview
NewsKit has everything you need to build scalable digital products, including Figma component libraries, theme libraries, plugins and guidance.
Why design products with NewsKit?
NewsKit improves consistency and efficiency across teams with considered, reusable solutions and shared best practices - creating more robust and innovative products.
Easy
NewsKit makes it simple to design beautiful, responsive, accessible experiences that align to the components in code - so you can concentrate on your users.
Flexible
NewsKit is fully customisable, with a powerful theming systemthat gives you the flexibility to apply a single brand or sub-brand, and Figma components that have variants and layer options.
What’s included?
NewsKit provides shared Figma libraries to help your product design process, including:
Theme library
A powerful theming system containing brand styles that you can use and sync across files, including palettes and colours, typography, shadows and grids.
View theme library (internal only)
Web components library
A collection of responsive components that you can theme to your brand.View web components library (internal only)
Icon library
A set of Material iconscontaining both filled and outlined styles, that you can customise or add to as required.
View icon library (internal only)
Utilities library
A host of utility components to improve your workflow and make delivery fast and consistent. Includes annotations, cursors, device mockups and accessibility labels.
View utilities library (internal only)
NewsKit Figma library architecture
Receive updates, contribute to the community and get the best out of NewsKit by linking your Figma libraries like this:
Custom Figma plugins
We've developed a range of custom Figma plugins to help improve your workflow, including:
Theme swapper plugin
Change themes across UI components and elements (e.g. switching between light and dark themes, sub-themes or different visual fidelities).View theme swapper plugin (internal only)
Text crop plugin
Remove unwanted whitespace around text boxes.
View text crop plugin
Theme exporter plugin
Export NewsKit design tokens in JSON format from Figma styles to use with the NewsKit codebase.
View theme exporter plugin (internal only)
Project template files
Kickstart your design process, and develop a consistent workflow, with NewsKit's template Figma files:
UX project template file
A template structure for UX-focussed projects. Includes personas, user journeys and competitor analysis.
View UX project template file (internal only)
UI project template file
A template structure for UI-focussed projects. Includes a playground, prototype and handoff.
View UI project template file (internal only)
Guidance
Get the best out of NewsKit with comprehensive, easy-to-follow documentation and guidelines, including:
Components guidance
Guidance for all web components. Includes details on anatomy, variants and usage.
View components guidance
Patterns guidance
Guidance for solving common problems (e.g. onboarding users to a product or feature).
View patterns guidance
Accessibility guidance
Guidance for designing inclusive experiences.
Handoff guidance
Guidance on how to communicate a design to the product team for engineers to build.
View handoff guidance (internal only)