Design Code Tools

A repo specifically for end to end product design workflows, with a special emphasis on unifying design and code.

UI Engineering Paradigms

• Pure React "Learn vanilla React, without all the libraries."
• React Variants "Design Systems: Base + Variants pattern"
• Vue Component Slots "Vue implements a content distribution API to serve as distribution outlets for content."

Low Code for Mobile Apps

• Draftbit "Build your app visually, React Native"
• Bravo Studio App "Where your designs become real native apps"
• Lightwell "Design to Code for Native Mobile"

Design/Code for Web Apps

• Plasmic "the fast and fun visual UI builder for React"
• Visly App "design and build production-ready components"
• Relate.app "visual development environment for fast, live collaboration."
• Interplay "Connect design and engineering, with Interplay"
• Hadron "a development environment for designers and developers who work together towards the same goal."
• Modulz "Design, develop, document and deploy your design system—without writing code."
• Alva "Create living prototypes with code components."

Contents

• Sketch Plugins
• Frontend Tools
• Typography

Ideation

• Untools "Collection of thinking tools and frameworks to help you solve problems, make decisions and understand systems."
• Whimsical "Communicate visually at the speed of thought."
• Overflow "Turn your designs into playable user flow diagrams that tell a story."
• Octopus.do "Visual sitemaps and estimates."
• Walling "Walling will help you build your network of ideas and inspiration, and use it to curate content for your next project or research."

Interface Design

User Interface

• UI Design Knowledge Base "design knowledge bank"
• Webframe web app examples
• UI PatternFly "A community of designers and developers collaborating to build a UI framework for enterprise web applications."
• Muzli Search "Web-wide search for design inspiration"
• UIJar "Handpicked design inspiration for your real life projects"
• UI Mobbin "Design Patterns"
• HeyNishi "The Place to Go for Copywriting Inspiration"

Design Versioning

• Abstract "The modern design workflow"
• PlantApp "Version control for designers"

Visual Design

Colors

• Color Scale Hihayk "Color scale generator"
• [PCM Color Mixer] (https://colormixer.web.app/?ref=producthunt) "Parametric Color Mixer"
• Contrast checker - Colorable "Check color contrast compliance"
• Contrast checker - Cloudflare "Check color contrast"
• HSL in CSS "Understanding HSL in CSS"

Icons

• Streamline Icons "30,000 icons, world's largest icon library"
• Material Icons Library "Complete Icon Kit for Sketch / Figma"
• Feather Icon Library "279 open source icons in SVG"
• Feather Micro-Animations "Animated icons in Lottie/AE for implementation"
• Essential Glyphs "Timeless glyphs"

Images

• Imgbin "Free transparent images"
• Moose Photos "Don't search for stock photos, create them."

Illustrations

• [ITG Digital Illustrations] (https://itg.digital/?ref=producthunt) "Easy to use online builder for illustrations"
• Smash Illustration Creator "Let your fantasy run with 250+ illustrations to create unique scenes"
• unDraw Library "Open-source illustrations for every project you can imagine"
• Designmodo Pack "($38) 300+ Illustrations 50+ Scenes"
• Stubborn Illustrations "Create your own illustrations"
• Humaaans "Mix and match illustrations"
• Icons8 Ouch Illustrations "Free vector illustrations"
• Glaze Illustrations "Free illustration library"
• Taste Minty "Find an Illustrator"
• Blobmaker "Blobmaker"
• Doodle "Open Doodles"

Patterns

• [Quickly for Sketch] (http://www.tryquickly.com/quickly/) "Free generative design tool, to help you quickly creates trendy vector shapes."
• [Magic Pattern] (https://www.magicpattern.design/?ref=producthunt) "The magic geometric patterns editor."

Examples

• [Nice, Very Nice] (https://www.niceverynice.com/components?ref=producthunt) "A design inspirational library featuring finest ui/ux patterns, layouts and design examples. Learn by the best and build better products."

Typography

Type Pairings

• Typewolf "What's Trending in Type"
• FontPair "Helps you Pair Google Fonts"

Typesetting

• Zellkw Type Vertical Rhythm "Why is Vertical Rhythm an Important?"
• Typography.js "A powerful toolkit for building websites with beautiful design."
• Golden Ratio calculator "Calculate ratios for typesizes"
• ]Archetype](https://archetypeapp.com/) "Typesetting Tool for Design Systems"
• Font Spark "Discover better fonts"

Typefaces

• Inter UI "Inter UI Typeface"
• Metropolis "A modern, geometric typeface"
• Apple Catalina"Catalina fonts"
• Space Grotesk"Space Gritesk | FlorianKarstan"
• Apple Fonts "Tools to use system fonts for Apple platforms"

Type Tools

• Glyphy "Copy and paste glyphs"

Photo Editing

• Remove BG "remove any background"

Interaction Design

Framer

• Overrides "Framer Book - Framer X Overrides"
• Framer React Guide "Framer ES6/React Guide"

Interaction Design Tools

• Protopie "The way you speak, the way you prototype."
• UX Pin "If you can imagine it, you can design it. Design, prototype, collaborate all in one place."
• Flowbase "Webflow Assets"

Animation

• Lottie "The Future of Animations and Interactive Design."

Presentation

• Overframe.xyz "Record your prototype & app with device frame overlay."
• Mockmatic "Mockups in Framer X"

Front end UI / Mobile

• SwiftUI Documentation "Go beyond Apple’s docs."
• Interact App - a Field Guide "a field guide to SwiftUI"

Front end UI / Web

Web UI Layout

• CSS Grid Generator "generate CSS grids"
• Flexbox Cheatsheet "Flexbox Cheatsheet"
• New CSS in Production "Bringing new CSS techniques to production"

Web UI Interaction

• how to manage HTML DOM with vanilla JavaScript only?

Web Styling

• Box Shadow Generator "brumm shadows"

Code Snippets

• Gitlab "A single application for the entire software development lifecycle."
• Codespace "The code snippet manager you've been waiting for"

Staging & Hosting

• Sourcetree "Simplicity and power in a beautiful Git GUI"
• Netlify "One workflow.From local development to global deployment."

UI Render Testing

• Sizzy Browser "The browser made for responsive design"

User Experience

Research

Research @ Harvard "Starter questions for user research" FullStory "Solve problems, find answers, and fine-tune your customer experience"

Usability Testing

• Usability Testing, Maze Guide "Getting started with usability testing"
• Use Berry "User testing feedback & rich insights in minutes, not months!"
• Usability Hub "Remote user testing"

User Journeys

• User flow design inspiration "User flow videos & screenshots to inspire you when you're stuck"
• [Gloomaps] (https://www.gloomaps.com/) "Visual sitemaps made easy."

Accessibility

• Funkify "A disability simulator for the web"

Design Case Stuides

• Clay Case Studies "UX Design Deliverables"

Design Systems

Design System Managers

• Supernova.io "Tightly sync the design and code in real time."

DS Configuration

• Typographic Color "Uniform colors for typography"
• Typography in Design Systems "EightShapes"
• Color Palette Framework "How to define a framework of colors while building a color palette for your brand"

DS Repos

• Design Encyclopedia "Design Encylopedia"
• Adele DS Repo "Design Systems and Pattern Libraries Repository"
• Designer Lynx Repo "The best design systems"
• Alex Pate Repo "A collection of awesome design systems"

Design Systems

• Biings Design System "The single source of truth for building Biings products."
• Elastic UI Framework "Design library in use at Elastic to build internal products that need to share our aesthetics. "
• Atlassian Design "Atlassian’s end-to-end design language"
• Hudl Uniform DSL "Hudl Design System"
• IBM Carbon DSL "Carbon Design System"

DS Icons

• DS iconography "A guide to iconography for design systems"

---

Other Guide Recommendations

• LisaDziuba "Awesome Design Tools"
• DesignRevision "Design Revision"
• Awesome-Design