Code Monkey home page Code Monkey logo

design-system-ui-kit-data's Introduction

Design System UI Kit Data


Lightning Design System UI Kit Data

A collection of fictitious Salesforce data for use as Sketch custom data. Use this info to populate designs created from the Lightning Design System UI Kit.



See it in action: Adding custom data to 100 fields in 30 seconds


Disclaimer

This is a work of fiction. Names, characters, businesses, places, events, locales, numbers, emails, URLs and all other content in this repository are either the products of the author’s imagination or used in a fictitious manner. Any resemblance to actual persons, living or dead, or actual events is purely coincidental.

Requirements

Lightning Design System UI Kit

Download the SLDS UI Kit.

Sketch

Download the most recent version of Sketch.

Getting Started

Download and unzip the SLDS Data folder into your Documents directory so the file path is HD/Users/[YourName]/Documents/SLDS Data. This exact path is important to use or you will lose the data in your Sketch designs in future updates.

In Sketch, open Sketch > Preferences then click the Data tab. Click the Add Data button and select all the data files in your SLDS Data folder.

Adding SLDS Data to Sketch

In any text element or text symbol override, you can now populate your designs with the different Salesforce data types.

Overriding a Text Element with a Salesforce Case Status

In Sketch 52, Sketch released a new feature that allows designers to link text and image files to be used as fake data. Read more about this feature and how to install data sets here.

Got something to add?

Great! Please take a look at our contribution guidelines for instructions on how to proceed.

License

All icons and images are licensed under Creative Commons Attribution-NoDerivatives 4.0

Design System UI Kit

design-system-ui-kit-data's People

Contributors

aweibel avatar

Stargazers

Acampbell avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.