Skip to content
Grommet Design Kit
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Previews Update Previews/sketch-lib.png Dec 7, 2018
.DS_Store
README.md Update README.md Dec 7, 2018
grommet-2-open-theme.framerx
grommet-2-open-theme.sketch Update grommet-2-open-theme.sketch Nov 17, 2018
grommet-2-open-theme.xd Adobe XD version! Nov 14, 2018
grommet-2-patterns.sketch
grommet-icons-1.7.sketch Update grommet-icons-1.7.sketch Jan 4, 2019

README.md

alt text

Grommet Design Kit

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


alt text

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


alt text

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

Click the link to add to you your Sketch app, Sketch Component Library

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


alt text

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


alt text

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


alt text

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

You can’t perform that action at this time.