Newskit Logo
View Github

Guides

Design quickstart

This page describes how to get started designing a digital product with NewsKit.

The following guidance is compatible with Figma version 104.1 and earlier.

Step 1
3+ mins

Access to Figma

News UK Designers are given access to the News UK Figma account when onboarding to the company. To access a Figma account, follow these simple steps:

1. Download the Figma desktop app.

2. Go to the Figma login page.

3. Select the “Log in with SAML SSO” link at the bottom of the form.

4. Enter a work email address in the form e.g. Joe.Bloggs@news.co.uk.

5. Press “Log in” button - you will be taken to OKTA (account management). If you have not already been assigned the app in OKTA, contact the service desk to gain access.

6. Enter OKTA credentials for work email address (you may be asked to authenticate via your phone).

7. Once Figma has opened in the browser, open the Figma desktop app.

8. In the Figma desktop app, press “Log in with browser” - a new browser window will open.

9. In the newly opened browser window, press “Open the desktop app”. A browser dialog screen will appear, check the “Always allow Figma to open links of this type in the associated app”

10. You will now be taken to the Figma desktop app - enjoy!

For other NewsCorp teams, please get in touch with the design systems team via Slack: #newskit
If you are not part of NewsCorp but require access, please contact us via this form.

Step 2
<1 min

Joining a team workspace

To join a team workspace, follow these simple steps:

2. Find your team(s), and press “Request to join” or “Join” button(s) to get access to a team workspace.

3. Once you have access to a team(s), you will see the structure of project files and associated libraries on the main Figma screen. News UK Figma workspaces are structured in a particular way, learn more about News UK Figma workspaces.

Tip - to see projects in a team in the left-hand navigation on the main Figma screen, be sure to “star” them in the team view screen.

Having trouble joining a team? Get in touch with the design systems team via Slack: #newskit

Step 3
5+ mins

Installing & setting up Figma plugins

NewsKit provides custom Figma plugins to improve the design process workflow, follow these simple steps to install and set up:

In addition to the above, view a list of optional recommended Figma plugins from the Figma Community to improve the design workflow.

Step 4
<1 min

Starting a Figma project

To start a Figma project, follow these simple steps:

1. In your team area, hover over the team name, and press the “+” icon (labeled “New project” on hover) to add a new project.

2. Give your new project a clear and distinctive name [Product/Brand Name], with an emoji to identify the project’s purpose (optional).

3. You will also see permissions options for the new project - everyone in the team can edit, everyone in the team can view, or via invite-only.

4. In your newly created project, hover over the project name, and press the “+” icon (New file) to add a new project.

5. You will see options to add a design file, FigJam file, or to import a file locally.

6. Select the “Design file” option to create a new file, and the new file will open in a tab.

Using the NewsKit project template files

NewsKit provides template Figma files to kickstart design processes, helping to develop a consistent workflow.

To use a UX Project Template file, or UI Project Template file, follow these simple steps:

1. Select “Duplicate” from the dropdown of options next to the file name.

2. At the bottom of the screen, a notification telling you that the file was duplicated will appear. Press “Open”, and the newly duplicated project template file will open in a new tab.

3. Select “Move to project…” from the dropdown of options next to the file name, and you will be given the option of selecting a project from a list, or you can search for a project name to move the file to.

Step 5
<1 min

Linking NewsKit Figma libraries

To link a NewsKit Figma library to a project, follow these simple steps:

1. In your design file, select the “Assets” tab in the left-hand panel.

2. Press the “book” icon (labeled “Team library” on hover), to bring up a list of libraries in a modal dialog.

3. In the list, you will see the available libraries available to link to your design file, categorised by teams.

4. The libraries that are already enabled are indicated in the list with a switch on the left-hand side of each library set to “Enabled”.

5. The NK-Web Gallery, & NK-UtilitiesFigma libraries are automatically linked when you add a new design file or duplicate one of the NewsKit project template files.

6. To link your design file to one of your team’s libraries, or the available NewsKit Design Systems libraries simply enable the library you want to link to via the corresponding switch on the left-hand side.

Note - Any library that you link to your design file will give you access to all the components in that library. If your team has its own local library, you should be linking to that local library as it will contain all of the components available that are specific to your brand.

If your team has its own local library, you should be linking to that local library as it will contain all of the components available that are specific to your brand.

Follow the News UK Figma design community to stay up to date with community resources.

What’s next?

To link a NewsKit Figma library to a project, follow these simple steps:

  • For an overview of the design working process, getting started, Figma setup and toolkits, resources, and more view the ways of working guidance.

Need help?

Can’t find what you’re looking for?

Need help?

Can’t find what you’re looking for?