Sign In

Library

Toolkit

Open Menu

A collection of tools to help designers craft delightful experiences.

  • Sans Francisco Weekly
    New tools and links sent weekly.
  • User Research

    Typeform

    Typeform is an elegant, feature-rich survey tool.

    Cassette

    Cassette is a digital logbook to help you "record, transcribe, and bookmark key moments in user interviews."

    Optimal Workshop

    Optimal Workshop offers a suite of UX tools that help improve your website navigation, define information architecture, understand first-clicks, run surveys and capture qualitative research.

    Testmate

    Testmate is a tool that saves you and your team time by automating the logistics of user research interviews.

    Doopoll

    Doopoll is a poll tool to help you gather quick feedback from users.

    UserTesting

    UserTesting allows you to recruit users and run remove, video-recorded usability tests.

    Lookback

    Lookback allows you to run user tests while remotely recording the screen, the user's face and voice, and their in-app interactions.

    TestingTime

    TestingTime makes user tests easier to run by helping with recruitment, scheduling, payment, and more.

    UX Check

    UX Check is a Chrome extension that checks for elements on a website that break any of Jakob Nielson's Ten Heuristics.

    Usabili.me

    Usabili.me is a screensharing, note taking, and recording tool to help you run remote user research.

    Sprint

    Sprint is a lightweight tool to help you get quick feedback on a new prototype, app, or website. Use code "SansFrancisco" for a free 10-person test ($250 value).

    FullStory

    FullStory lets you easily record, replay, search, and analyze each user's actual experience with your website.

    User Interviews

    User Interviews helps you screen and recruit users for any sort of qualitative research exercise.

    Usability Hub

    Usability Hub allows you to run simple user tests to get quick data on a design.

    Ethnio

    Ethnio intercepts users visiting your site or app and allows them to schedule an interview with you!

    UserBrain

    UserBrain is a service that sends weekly videos of users using your app or website.

    Crowdtap

    Crowdtap is a platform for consumers to share their ideas, opinions, and stories with the brands they love.

    Narrative Clip

    Narrative Clip is a small wearable camera that easily clips onto clothing; ideal for participants willing to log a day in their life.

    Dovetail

    Dovetail helps collect user insights by sending simple, contextual questions via SMS or email.

    Typography

    Google Fonts

    Google Fonts is a safe bet when shopping for project fonts. Download font families to use in design files or grab scripts to toss into your code.

    TypeKit

    If you have an Adobe CC license, TypeKit offers access to a whole bunch of premium fonts.

    Font Squirrel

    Font Squirrel offers a database of all the free fonts your little heart could possibly desire.

    Type Nugget

    Type Nugget is a WYSIWYG editor for web typography CSS.

    What the Font

    What the Font helps you identify a mystery font by scanning a file that have so generously uploaded.

    Type Anything

    Type Anything lets you fine tune your family of header styles, and then download the CSS to get your design live.

    Typewolf

    Typewolf offers a daily bit of typography-in-the-wild inspiration.

    Typecast

    Typecast allows you to prototype site typography and then download the CSS to make it happen.

    Fontface Ninja

    Fontface Ninja is a browser extension that helps you identify fonts while browsing a website.

    Modular Scale

    Modular Scale is a useful tool for exploring base and em ratio font relationships.

    Typ.io

    Typ.io is a tumblr-style source of inspiration for font combinations and layouts.

    Font Flame

    Font Flame is Tinder for fonts.

    Fontic

    Fontic scans your Photoshop files and outputs a list of all fonts used.

    FontReach

    After entering a font of your choice, FontReach scans the interwebz to show you sites that use that font. It's like the zoo for designers.

    RightFont

    RightFont is an app used to preview, sync, install, and manage fonts on your Mac.

    Fonts In Use

    Fonts In Use is an archive showing how various fonts have been applied in a full variety of design applications.

    Type Detail

    Wenting Zhang annotates the details of a few dozen common typefaces.

    Type Sample

    Type Sample is a tool for identifying and sampling webfonts.

    CSS Sans

    CSS Sans is a sans serif font created entirely by CSS.

    Prototypo

    Prototypo is a simple tool that allows you to adjust more than 30 attributes of a font.

    Font Pair

    Font Pair is a curated collection of heading/body pairs of Google Fonts.

    Color Palette

    Color Hunt

    Color Hunt is Pinterest for colors. Scroll, scroll, scroll through four color combinations.

    Sip

    Sip is a Mac and iOS app to help you grab colors and create palettes.

    Flat UI Colors

    Flat UI Colors offers click and copy access to twenty vibrant flat colors.

    Coolors

    Coolors allows you to toggle through and save sexy color palettes.

    Adobe Kuler

    Kuler is a compass for the color wheel. Use it to explore combinations of analogous, monochromatic, and all sorts of combinations.

    Color Farm

    Color Farm offers daily color palette inspiration curated from popular Dribbble shots.

    Material Colors

    If you subscribe to Google's Material Design methods, Material Colors offers quick access to color choices.

    Palettable

    Palettable is an interactive tool for building up a color palette, one color at at time.

    LOL Colors

    LOL Colors is a minimalist's inspiration wall of color palettes.

    Color Snapper

    Color Snapper is a MacOS app that allows you to quickly grab the hex code of a color you stumble upon.

    Unclrd

    Unclrd is a chrome plugin that converts websites to black and white.

    Colorable

    Colorable is a quick tool to assess the accessibility of a color pair (background and text color).

    Colicious

    Colicious is a simple tool that generates a random color at the tap of the space bar.

    ColorDrop

    Color Drop offers a wall of four color sets for you to browse through and save.

    ColorCubo

    ColorCubo allows you to create and store color palettes in a simple dashboard.

    Material Palette

    Material Palette helps you generate a material UI color palette.

    0to255

    0to255 is a simple tool that helps web designers find variations of any color.

    Color Claim

    Color Claim is a modest collection of color pairs curated by Toby Van Schneider.

    Drop

    Drop is a color picker for MacOS that includes Touch Bar support.

    UI Gradients

    UI Gradients is a collection of beautiful color gradient pairs.

    HTML Color Codes

    HTML Color Codes offers a color picker and simple tutorials to teach you the basics of color theory and css/scss.

    Iconography

    The Noun Project

    The Noun Project is a massive searchable database of icons created by a community of designers. Pay for a membership or give credit to the designer.

    illustrio

    illustrio offers a massive searchable database of all sorts of icons.

    Iconjar

    Iconjar makes it easy to store, organize, and search through all of your icons. No more scanning through a wall of icons, row by row.

    Flat Icon

    Flat Icon is a large icon database featuring work from a community of designers.

    Entypo

    Entypo is a set of 400+ icons that cover the 80/20 of just about any project.

    Iconfinder

    Iconfinder is a large, searchable database of icons.

    to[icon]

    to[icon] offers a bunch of free bundles of icons.

    Nucleo

    Nucleo offers 8000+ searchable, customizable icons, with new icons being added every week.

    Icon Store

    Icon Store offers free downloadable kits of icons.

    Symbolset

    Symbolset offers several bundles of icons and a semantic Unicode approach to calling those symbols.

    Material Icons

    Material Icons is a catalog of icons used in the material design framework.

    Webalys

    Webalys offers several large sets of icons, including Streamline iOS and Material icons.

    Font Awesome

    Font Awesome is a collection of hundreds of icons that can be easily linked to in your CSS.

    CSS Icon

    CSS Icon is a library of icons drawn with nothing but CSS.

    Stock Photos

    Unsplash

    Unsplash is a database of beautiful, high-res, free photos for creative use. No awkward office stock photos. Make sure you give credit to the photographer.

    Pexels

    Pexels is a large pool of all sorts of free stock photos for creative uses.

    The Stocks

    The Stocks is a collection of free stock photos from a number of sources.

    Death to the Stock Photo

    Death to Stock is another reaction to trashditional stock photography. Join their mailing list to get new photos every month, or get a membership to access their full archives.

    Zoommy

    Zoommy is a desktop app to help you search through stock photos from over 40 sources.

    Diverse UI

    Diverse UI is a stock photo collection that will help you represent a diverse group of people in your mockups.

    PicJumbo

    PicJumbo offers free stock photos, as well as a premium membership to access a larger library.

    Inspiration

    Dribbble

    Born out of Salem, MA, Dribbble has grown to become a hub for designers to share their work, meet other designers, and get inspired.

    Muzli

    Muzli is a curated gallery of all sorts of design inspiration.

    Behance

    Behance is a great spot to build up and display a design portfolio and find inspiration from other designers.

    Awwwards

    Awwwards are awards for 'design, creativity, and innovation for the internet.'

    Pttrns

    Pttrns is a catalog showing how well-known apps have tackled various UX flows and elements.

    Panda

    Panda is a new tab chrome extension to help you keep up to date with your favorite design and tech news sources.

    User Onboarding

    User Onboarding creates incredibly detailed walkthrough slideshows that show the onboarding flow of well-known web and mobile apps.

    Collect UI

    Collect UI is a curated catalog of interface designs.

    UI Garage

    UI Garage is a catalog showing how well-known apps handle various app flows and elements.

    SiteSee

    SiteSee is a curated gallery of modern websites.

    Mobile Patterns

    Mobile Patterns is a catalog showing how well-known apps have tackled various UX flows and elements.

    Land Book

    Land Book is a large gallery of product landing pages.

    Really Good Emails

    Really Good Emails is a site dedicated to showcasing beautifully designed emails.

    Httpster

    Httpster is a catalog of web design trends and inspiration.

    UI Movement

    UI Movement is an endless feed of gifs to inspire web and mobile animations.

    siteInspire

    siteInspire is a simple wall of modern websites.

    Lapa

    Lapa is a site dedicated to showcasing landing pages for websites in a range of categories.

    Designspiration

    Designspiration is a seemingly-random wall of creative projects.

    UX Archive

    UX archive is a catalog showing how well-known apps handle various design flows and elements.

    Uplabs

    Uplabs is a community for designers to share and sell their work.

    Empty States

    Empty States is a site devoted to showcasing website and mobile app empty states.

    UI Interactions

    UI Interactions is a catalog of mobile interaction designs from existing apps.

    Craftwork

    Craftwork is a database of over 500 free UI assets: icons, fonts, and UI kits.

    Nice Portfolio

    Nice Portfolio is a curated showcase of designer portfolio sites.

    UX Timeline

    UX Timeline is a time capsule for websites. Flip through and see how your favorite sites have evolved over time.

    Brand New

    Brand New is a blog that reviews branding and logo changes made by well-known companies.

    Designing for Good

    Designing for Good is a collection of non-profit designs from around the world.

    Logospire

    Logospire is an endless scroll of logos.

    Cognitive Lode

    Cognitive Lode distills behavioural economics and consumer psychology research into small, bite-sized pieces.

    Little Big Details

    Little Big Details is a blog the highlights the small, often overlooked design elements that make up great digital experiences.

    Instant Logo Search

    Instant Logo Search lets you search for and download (png & svg) the logos of well-known brands.

    Chindogu

    Chindogu is a Japanese art of inventing objects that are offer an obvious benefit while simultaneously introducing more problems and social embarrassment.

    FourZeroFour

    FourZeroFour is a site dedicated to showcasing creative 404 error pages.

    Product Pages

    Product Page is a curated gallery of product landing pages.

    Brutalist Websites

    Brutalist Websites is a catalog of sites following brutalist principles, offering some anti-inspiration.

    LandingFolio

    LandingFolio is a site dedicated to showcasing landing pages for websites in a range of categories.

    Motion Periodic Table

    The Motion Periodic Table is a quick reference for web animations.

    UI Movement

    UI Movement is a curated collection of UI animations.

    Prototyping

    Sketch

    Sketch is a lightweight tool to help you assemble your designs.

    Invision

    Once you've sketched up a series of screens, toss them into Invision to built a clickable, interactive prototype.

    Craft

    Craft is a Sketch plugin that makes it stupidly easy to populate your designs with real content. No more lorem ipsum.

    Mirror for Sketch

    If you're designing mobile apps with Sketch, then Mirror is a must. It allows you to sync your design files right to your phone for live updates.

    Framer

    Framer takes a dual code/visual approach to building prototypes for web and mobile.

    Principle

    Principle is the Sketch of animations. Drop objects in and quickly begin to experiment with animations.

    ProtoIO

    ProtoIO is a high-fidelity prototyping tool that allows you to create rich, animated, interactive prototypes.

    Marvel

    Marvel is a lightweight tool to create designs, stitch together interactive prototypes, and get feedback from your co-conspirators.

    Adobe Photoshop

    Photoshop is a beast of a tool; you can use it to create just about any static image you can imagine.

    Atomic

    Atomic is a tool to help you prototype web and mobile interactions.

    ProtoPie

    ProtoPie is a code-free tool for prototyping interaction designs.

    Adobe Illustrator

    Illustrator is Adobe's specialty vector tool. Use it to create logos, icons, or complex illustrations.

    Flinto

    Flinto allows you to turn a series of static design images into a rich, clickable prototype.

    Axure

    Axure allows you to sketch up interfaces and collaborate with stakeholders.

    Balsamiq

    Balsamiq is a quick tool used for building and testing wireframes of web and mobile apps.

    Adobe Experience Design

    Adobe Experience Design is used to mockup rough interfaces and interactive prototypes.

    Pixate

    Pixate allows you to create high fidelity clickable prototypes to test app interactions and animations.

    Webflow

    Build responsive HTML/CSS prototypes with real data — without writing a line of code.

    Figma

    Figma is a powerful, intuitive interface design tool that allows for real-time collaboration.

    Tumult Hype

    Tumult is a prototyping tool for web interactions and animations.

    Origami

    Origami is a Facebook design tool to help you prototype and present mobile animations.

    Floid

    Floid is a Mac app for prototyping web and mobile interactions.

    JustInMind

    JustInMind is a Mac app used to create interactive wireframes for web and mobile experiences.

    Quant-UX

    Quant-UX is a prototyping tool that includes a suite of visual analytics to help you better understand how users use the prototypes.

    POP

    POP allows you to take photos of physical sketches and turn them into rough interactive prototypes.

    Pattern

    Pattern is a simple drawing app that makes it easy to mock up wireframes on your iPad.

    Napkin

    Napkin is an iOS app that allows you to mock up an app prototype right on your phone.

    SneakPeekIt

    SneakPeekIt is a collection of printable grids for web and mobile design wireframing.

    Subform

    Subform is a new interface design tool (currently on Kickstarter) with a focus on outsourcing the burden of responsive layouts and consistent styles to the software.

    Sketchpacks

    Sketchpacks is a catalog of popular plugins for Sketch.

    Origami

    Origami (built by Facebook) is a new tool for designing and prototyping interfaces.

    CSS Reference

    CSS Reference is a visual library explaining the effect of various CSS properties.

    Form

    Form is a tool used to build an customize native mobile prototypes.

    Prott

    Prott allows you to create clickable prototypes out of simple wireframes and paper prototype photos.

    Presentation

    Reflector

    Reflector allows you to connect your phone to your computer to record in-app videos.

    Smart Mockups

    Smart Mockups offers a range of scenes for you to drop web and mobile designs into.

    Placeit

    Placeit allows you to create still and video device mockups for a range of devices.

    Mockuuups

    Mockuuups is a marketplace for device images to present your web, mobile, or wearable designs.

    Screenshot Builder

    Screenshot Builder makes it easy to generate App Store screenshots in all device sizes.

    Hero Patterns

    Hero Patterns is a collection of repeatable SVG background patterns for you to use on your digital projects.

    Scenery

    Scenery is a Mac app used to showcase your designs using premium mockup templates.

    Semplice

    Semplice is a designer-centric tool for creating and showcasing your portfolio.

    Collaboration

    Wake

    Wake is a collaboration tool to help design teams share ideas and give feedback.

    Zeplin

    Zeplin allows designers to automatically create style guides and resources, making the transition to engineering easier.

    Invision Boards

    Invision Boards is a simple tool for creating and presenting mood and brand boards.

    Sympli

    Sympli generates style guides, specs, and assets for design handoff and helps automate implementation for developers.

    Lingo

    Lingo is like Dropbox for design teams. The MacOS app allows teams to easily store and share visuals.

    Invision Tours

    Add annotations to your designs to walk coworkers and clients through asynchronously.

    Avocode

    Share Photoshop or Sketch designs with your team and convert them to code. On Mac, Windows and Linux.

    Webscope

    Webscope allows teams to comment on web features directly on the site page.

    Samepage

    Samepage allows teams to discuss and spec out new projects.

    Frontify

    Frontify is used to create and share brand and UI libraries between team members.

    Mural

    Mural allows teams to remotely run brainstorms, organize their ideas, create mindmaps, and more.

    Opentest

    Opentest is a Chrome plugin that enables quick and easy screen, mic, and front-camera recordings.

    Red Pen

    Red Pen helps teams quickly markup and comment on visual designs.

    UXPin

    UXPin is a shared workspace for teams to design and prototype together.

    Recordit

    Recordit is a MacOS app that makes it easy to record and share video screenshots.

    Notion

    Notion is a Mac app that helps teams organize docs, wikis, and tasks from various tools in one central place.

    Yossarian

    Yossarian uses AI to help boost your creativity during mind mapping exercises.

    Mockflow

    Mockflow offers a suite of tools for design and development teams to communicate ideas.

    Fuse

    Fuse helps transition designs to live applications with a visual coding tool that improves collaboration between designers and developers.

    Trello

    Trello is a useful tool to help design teams prioritize and manage their pipeline of work.

    zipBoard

    zipBoard allows teams to leave feedback by annotating websites.

    Inboard

    New

    Inboard is a Mac app used to create a digital scrapbook of screenshots, images, and photos.

    Canvas

    Canvas is a WYSIWYG note editor that allows teams to share notes and spec out projects in real time.

    Inboard

    Inboard is a Mac app that lets teams organize screenshots, images, and photos into a searchable scrapbook.

    Sococo

    Sococo is a virtual office and conference room helping remote teams collaborate easier.

    Duco

    Duco is an app that helps guide successful design sprints.

    Abstract

    Abstract is a version control tool that integrates with Sketch to help design teams stay up to date with each other's work.