import { storiesOf } from '@storybook/react';
import Page from '../Page';
import Button from '../../components/Button';
import Link from '../../components/Link';
import { iconAddGlyph } from '@wfp/icons-react';

<Meta
  title="Getting started/Design resources"
  subTitle="How to use the UI Kit"
  parameters={{
    componentSubtitle: 'Getting started',
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

> February 2021
>
> Please note that the UI Kit libraries previously available for Sketch and AdobeXD are no longer maintained.

### UI Kit library for Figma

The Kit is available as a Figma library, for rapid prototyping of web based applications.
It contains all the resources you need to get started, and consists of three interconnected libraries (Foundations, Components and Templates) for a better scalability.

**Components** and **Templates** consume the design specs included in **Foundations** (e.g. colours, typography styles, etc.), and this does not include any component of its own.
Thus, components and templates will be the elements that you will find under the Assets panel within Figma. Icons and logos are also available as components.

Every **component** in the Kit has been built using the **Variants** feature, meaning that you can quickly switch among different states or types. Most components support the **Auto Layout** feature,
so they grow or shrink as you edit their content.

All **templates** come with four different resolutions, based on the breakpoints in the code: 500px, 792px, 992px and 1200px. Grids are available at all resolutions, and for the larger one,
you can choose between two grids: 12 cols/32px gutter or 12 cols/20px gutter.

The library is currently available **under invitation only**, please send your request to global.uikit@wfp.org

Once invited, create your drafts under the **World Food Programme** space to access the library components.

<!-- > 🎉 New Sketch library, design it with us!
>
> <strong>
>   We are working on a{' '}
>   <a
>     href="https://www.sketch.com/s/421befd7-29f6-4fe9-9dae-7d2bce93e1af"
>     target="_blank">
>     new version
>   </a>{' '}
>   of the Sketch library
> </strong>
> , which will live and progress alongside the official library until the porting
> is finalised. If you would like to try it out, <a href="sketch://add-library/cloud/https%3A%2F%2Fwww.sketch.com%2Fs%2F421befd7-29f6-4fe9-9dae-7d2bce93e1af">
>   add the library to Sketch
> </a> and <strong>share your feedback</strong> by leaving comments on the library
> directly or by <a
>   href="https://github.com/wfp/ui-design-kit/issues/1"
>   target="_blank">
>   using this thread
> </a>
> , so that we know that what we are building is actually useful for you. Thank you! -->

<!--
## Sketch

<p>
  To get started with the UI Kit library, you must first have{' '}
  <a href="https://www.sketch.com" target="_blank">
    Sketch
  </a>{' '}
  installed. The UI Kit components and icons live in the design kit as Sketch
  symbols:{' '}
  <strong>
    the symbols are organized by component, and every component comes with its
    variations, states, and groups
  </strong>
  .
</p>
<p>
  <Button href="sketch://add-library/cloud/b8xxz">
    Add the library to Sketch
  </Button>{' '}
  <Button
    kind="secondary"
    href="https://www.sketch.com/s/57cd224c-35ac-47be-b269-e032c60dc6a4">
    View it on Sketch Cloud
  </Button>
</p>
<br />

## Logos and favicons

<p>
  Logos and favicons are available as a separate downlod from our repository.
  <br />
  <a href="https://github.com/wfp/ui-design-kit/blob/master/WFP%20Logos.sketch?raw=true">
    Download the logos file
  </a>
  <br />
  <a href="https://github.com/wfp/ui-design-kit/blob/master/WFP%20Favicons.sketch?raw=true">
    Download the favicons file
  </a>
</p>

<h2>Adobe Xd</h2>
<p>
  To get started with the UI Kit library, you must first have{' '}
  <a href="https://www.adobe.com/products/xd.html" target="_blank">
    Adobe Xd
  </a>{' '}
  installed.{' '}
  <strong>
    The library is currently available for download only, we will soon provide
    it as a shared resource.
  </strong>
</p>
<p>
  <Button href="https://github.com/wfp/ui-design-kit/blob/master/WFP%20Template.xd?raw=true">
    Download the library
  </Button>{' '}
</p> -->
