Categories
Similar Boards
Suggest a Link

Design Systems

You must be logged in to view the contents of this board.

Grids

Pin
  1. Behance
  2. Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira
  3. Understanding layout
  4. Sketch Workflow — 8 point Soft Grids – Design + Sketch – Medium
  5. A framework for creating a predictable & harmonious spacing system for faster design-de...
  6. Setting Type on the Web to a Baseline Grid
  7. 4 more

Typorgraphy

Pin
  1. Why is Vertical Rhythm an Important Typography Practice? | Zell Liew
  2. 8-Point Grid: Vertical Rhythm – Built to Adapt

Starting the System

Pin
  1. Starting a Design System – EightShapes – Medium
  2. The Component Cut-Up Workshop – EightShapes – Medium
  3. bradfrost/frontend-guidelines-questionnaire

Read

Pin
  1. Photoshop Etiquette: A Guide to Discernible Web Design
  2. Pattern Libraries – Prototypr
  3. A comprehensive guide to design systems - InVision Blog
  4. Design Systems Sprint 0: The Silver Bullet of Product Development.
  5. Picking Parts, Products & People – EightShapes – Medium
  6. 3 tips to make your design system easier to setup and maintain
  7. 20 more

Styleguides

Pin
  1. Grids - QuickBooks Design System
  2. T-Mobile GLUE - This Place
  3. Pega UX Design System
  4. Adele – Design Systems and Pattern Libraries Repository
  5. Mineral UI
  6. Walmart Web Style Guide
  7. 25 more

REACT - SYSTEMS

Pin
  1. Lightening Design System React Components

Air BnB

Pin
  1. Airbnb GITHUB
  2. Lottie (Animation)
  3. airbnb/react-sketchapp
  4. airbnb/Lona
  5. Painting with Code
  6. Air/shots
  7. 5 more

Atomic

Pin

Pattern Lab

Pin
  1. Installing and configuring PatternLab – Matteo Pescarin – Medium

FIGMA

Pin
  1. Design System Features, Step-by-Step – EightShapes – Medium
  2. Resources To Help Get You Started With Figma
  3. Tokens in Design Systems – EightShapes – Medium
  4. CSS Reference
  5. How to construct a design system – freeCodeCamp
  6. Intro to The 8-Point Grid System – Built to Adapt
  7. 2 more

Setting up Dropbox

Pin
  1. Share your Sketch Templates folder across your design team with Dropbox and a Symlink.

Tools

Pin
  1. Bullet-proof row symbols in Sketch – Deliveroo Design – Medium
  2. kenmoore/sketch-relabel-button
  3. Check out our Axure Sketch plugin for bringing Sketch assets into Axure RP
  4. Plant
  5. Diagramming Software & Team Collaboration Tools | Gliffy
  6. getflourish/Sketch-Style-Inventory
  7. 3 more

Sketch Tools

Pin
  1. Sketch App Rocks!
  2. Sketch & InVision workflow for developers – Design + Sketch – Medium

Selling the System

Pin
  1. Morningstar Design System at Chicago Design System Meetup January 2018
  2. Design systems template: get buy-in

Footlocker

Pin
  1. Vijay Talwar

    President - Digital

  2. Peter Schliesmann

    Vice President, Digital Technology

0 Comment
Comments or thoughts?
Submit
Cancel
or
Email a link to this board
Share this board on Facebook
Share this board on Twitter
Notice label will go here