https://github.com/grommet/design-kit

Grommet Design Kit
https://github.com/grommet/design-kit

Last synced: 4 days ago
JSON representation

Grommet Design Kit

• Host: GitHub
• URL: https://github.com/grommet/design-kit
• Owner: grommet
• Created: 2018-11-09T00:30:30.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-05-26T21:44:50.000Z (over 5 years ago)
• Last Synced: 2024-04-15T00:50:36.172Z (7 months ago)
• Size: 36.7 MB
• Stars: 294
• Watchers: 12
• Forks: 14
• Open Issues: 13
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-ccamel - grommet/design-kit - Grommet Design Kit (Misc)

README

        
![alt text](https://github.com/grommet/design-kit/blob/master/Previews/grommet-2-open-theme.png "Components")

# Grommet Design Kit

The Grommet Design Kit provides a set of sticker sheets and templates to help bootstrap your design process.

---

![alt text](https://github.com/hpe-design/components/blob/master/Previews/grommet.png "Grommet")

## Grommet

The Grommet Design Kit is designed to work specifically with grommet.io, Grommet is a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package. It's also the de-facto UI framework HPE uses to build apps and websites. All of our component design files works especially well when paired with grommet! Go check it out and tell your devs!

**To learn more, visit [grommet.io](https://grommet.io)**

---

![alt text](https://github.com/hpe-design/components/blob/master/Previews/sketch.png "Sketch")  

## Sketch (Mac only)

There are two ways to use the Sketch Component Library; One, by manually downloading the Sketch file that contains the entire symbol library (best for folks that want to enhance the design and contribute ideas to the grommet theme) or, Two, add the Sketch Library (read-only) version that automagically updates from the Cloud! The later, being better for folks that just want to use the standard elements and ensure they're always up to date.

**Download the [Sketch Component Library](https://github.com/grommet/design-kit/blob/master/grommet-2-open-theme.sketch)**

**Click the link to add to you your Sketch app, [Sketch Component Library](https://sketch.cloud/s/1xY34)**

If you don't see this window, goto the Menubar and navigate to, `Sketch/ Preferences.../ Libraries` or use shortcut `command + ,` and add it manually with the `+` button. (see below)

![alt text](https://github.com/grommet/design-kit/blob/master/Previews/sketch-lib.png "Components")

---

![alt text](https://github.com/hpe-design/components/blob/master/Previews/xd.jpeg "Adobe XD")  

## Adobe XD

Adobe XD is a great alternative to Sketch (Mac only) for users looking for design and prototyping in the Adobe and Microsoft ecosystems.

**Download the [XD Components](https://github.com/grommet/design-kit/blob/master/grommet-2-open-theme.xd)**

---

![alt text](https://github.com/hpe-design/components/blob/master/Previews/framer.png "Framer")

## Framer X

The closet we have to parity between the designer and developer. Framer X takes Sketch libraries to the next level by not only having design components but coded components in the same design tool, providing the closest fidelity to the running app.

**Download the [Framer X Components](https://github.com/grommet/design-kit/blob/master/grommet-2-open-theme.framerx)**

---

![alt text](https://github.com/hpe-design/components/blob/master/Previews/figma.png "Figma")  

## Figma

For teams that want a web based solution, Figma is a great alternative as it can be run in any modern browser and it has a bunch of cool features to check out. From asset creation to comments on the designs, its a great way to work collaboratively with the components...

**Open the file on [Figma](https://www.figma.com/file/aO892qfy1TK0Uv6FGkuObW7z/grommet-2-open-theme)**