Skip to content

Commit

Permalink
docs(docs): update figma instructions for external users
Browse files Browse the repository at this point in the history
Modify figma.mdx to inform external users how to contribute
  • Loading branch information
GCHQ-Developer-299 committed Sep 12, 2023
1 parent ddc1390 commit d61105d
Showing 1 changed file with 65 additions and 15 deletions.
80 changes: 65 additions & 15 deletions src/content/structured/get-started/figma.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,27 @@ path: "/get-started/figma"

navPriority: 5

date: "2022-11-15"
date: "2023-09-07"

title: "Get the Figma kit"

subTitle: "Reusable and flexible Figma components used to design, prototype and hand-off designs for apps and services."
subTitle: "Reusable and flexible Figma components used to design, prototype and hand-off designs for apps and digital products."

contribute: "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/figma.mdx"
---

import { IcAlert } from "@ukic/react";
import figmaFig1 from "./images/assets2x.png";
import figmaFig2 from "./images/libraries2x.png";

## About the Figma UI Kit

We've built a Figma UI Kit to use alongside the guidance and code you'll find on this website. It'll make it easier to prototype and build things quickly.

All Figma resources have been built with our users in mind, with a strong focus on making sure accessibility is embedded from the start. That way what we can provide an amazing experience, usable for everyone
All Figma resources have been built with our users in mind, with a strong focus on making sure accessibility is embedded from the start. That way what we can provide an amazing experience that is usable for everyone.

## Accessing the library
## Accessing the library for internal users

<IcAlert
title="Need to know"
message="The Figma UI Kit is currently only available to internal users, but we will be sharing it publicly soon."
variant="info"
/>

The UI Kit is turned on by default for all projects within our Figma organisation.
The UI Kit is turned on by default for all projects within our community. Check that you are using the latest version.

1. In a new or existing Figma design file, click 'Assets' from the left-hand side panel then click the 'Team library' icon (the book).

Expand All @@ -52,6 +45,63 @@ The UI Kit is turned on by default for all projects within our Figma organisatio
/>
</DoubleDoDontCaution>

## How to use the Figma UI Kit components

Find the details on the internal system to get started with Figma.
## Not part of the Intelligence Community?

<p>
We've published our{" "}
<ic-link
target="_blank"
href="https://www.figma.com/community/file/1283021660431259186"
rel="noreferer noopener nofollow"
>
Figma UI Kit
</ic-link>{" "}
to the Figma Community, so that everyone can use our resources.
</p>
<p>
You can make a copy of it in your local files and use the components in your
designs. This is a static version and you won't automatically receive
component updates. Check Figma Community regularly for new updates and
versions.
</p>

<ol>
<li>
Navigate to the{" "}
<ic-link
target="_blank"
href="https://www.figma.com/community/file/1283021660431259186"
rel="noreferer noopener nofollow"
>
Intelligence Community UI Kit on Figma Community
</ic-link>
.
</li>
<li>
Duplicate the library into your drafts and connect your project files.
</li>
<li>
Use the{" "}
<ic-link
target="_blank"
href="https://help.figma.com/hc/en-us/articles/360039150413-Swap-components-and-instances"
rel="noreferer noopener nofollow"
>
swap libraries
</ic-link>
function in Figma to quickly swap your components from one version to the next.
</li>
</ol>
<p>
If you want to request a new feature or if you notice any issues, you can{" "}
<ic-link
target="_blank"
href="https://github.com/mi6/ic-design-system/issues"
rel="noreferer noopener nofollow"
>
raise it on GitHub issues
</ic-link>
. For more information read <ic-link href="/community/contribute#contribute-to-the-figma-ui-kit">
how to contribute to the Figma UI Kit
</ic-link>.
</p>

0 comments on commit d61105d

Please sign in to comment.