Designs Links is a curated website with the latest design apps, articles, and trends in one place

Articles

This is some text inside of a div block.
2021 Design Tools Survey | UX Tools

2021 Design Tools Survey | UX Tools

Find your next tool from the responses of thousands of designers around the world.
Tools for 2022

Tools for 2022

If you’ve ever searched for productivity tools of any kind, there’s a good chance that you may have come across this one. It’s a surprisingly simple yet powerful and well-designed app that can scale with how much you’d like to put into it and take from it.
Naming Variants

Naming Variants

If you're unfamiliar with Variants, they're essentially a way to turn several components related to one another into a single component with selectable options. For example, in most design systems, there are buttons, and each Button component may have a different state that can be used, such as default or hover.`
Patented Future

Patented Future

Patented Futures reimagines nondescript patent filings from tech corporations as forward-looking designs — mapping the vast promises and implications of tomorrow’s wearable technologies.
Welcome to the WIP

Welcome to the WIP

Chief Product Officer Yuhki Yamashita on how to embrace (and enjoy) endless iteration
Picture perfect images with the modern <img> element

Picture perfect images with the modern <img> element

You may not think about images as part of your web dev work, but they can affect your web app's performance more than any other part of your code.
User Interface Gallery

User Interface Gallery

Painting with user interfaces.
Naming in Figma

Naming in Figma

Within Figma, there are two primary ways to organize all of the created files: Projects and Teams. One way of thinking about the two that helped me was to imagine Projects as folders that hold files and to think of Teams as a way to collect and store all of those folders into larger groups.

Useful Figma Plugins

This is some text inside of a div block.
Link Text

Material Symbols

Material Symbols are Google’s newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. Symbols are available in three styles and four adjustable variable font styles (Fill, Weight, Grade, and Optical size).
Link Text

Figma to HTML, CSS, React

Convert Figma designs to high quality, responsive HTML, CSS, React, Vue, and more
Link Text

Find and Replace

Search for texts on your page and replace them just like a text editor. You can search for objects on your page by either text content or layer name.
Link Text

Plugins.run

A series of simple utility plugins that allow you as a designer or developer to easily manage your day-to-day workflow and improve your efficiencies. All for free.
Link Text

Unsplash

Insert beautiful images from Unsplash straight into your designs. The Unsplash License allows images to be used freely for both commercial and personal projects.
Link Text

Makers.so - Figma to website in one click

Link Text

Chart

Chart is a plugin for Figma that uses real or random data to create the most popular charts. Chart supports copy-paste from editors like Excel, Numbers, Google Sheets, live connection with Google Sheets and remote JSON (REST API), local CSV and JSON files.
Link Text

Data Lab

Paste random or real data into text layers and components easily. Data Lab supports Numbers, Names, Dates, Addreses, Phones, Emails and Lists with data from API or Google Sheet.
Link Text

Sync Notion

Sync text from Notion database to Figma document. Useful when managing app text in Notion or for multilingual support.
Link Text

Google Sheet Sync

Sync content from Google Sheets directly into your Figma file.
Link Text

Batch Styler

Change multiple text and color styles at once! Need to change values of multiple (text and color) styles at once but don't want to go through the process of changing each text style on its own? With Batch Styler you can do just that! No matter if 2 or 30 text styles, changing from Inter to Roboto but keeping all font weights and other style is now possible!
Link Text

UI Faces

UI Faces aggregates thousands of avatars which you can carefully filter to create your perfect personas or just generate random avatars. The avatars are aggregated from various sources. You can filter by age, gender, emotion, etc.
Link Text

Figma Tokens

Generate Tokens with the UI or with your own JSON. Create or update Type, Color or Shadow Styles based on tokens. Reference tokens in each other to create type scales, container paddings or semantic colors.
Link Text

Automator for Figma

Automate your Figma tasks in one click.
Link Text

Selection Variants

See and control all nested variants instances in selection. Switch between variants without clicking through to find all the nested ones. Reduce the complexity of your design system by creating nested variants! Or simply use the to switch variants in bulk by selecting multiple objects — useful when working with lists or tables.

UI Kits / Libraries

This is some text inside of a div block.

Mobile Design Kit for Figma & Sketch

Design beautiful Android & iOS applications with a powerful Mobile UI kit. Plaster — helps to create stunning mobile designs faster with thoughtful components and design rules.

Relume Library - 750+ Webflow Components

Say goodbye to building Webflow sites from scratch. Build beautiful websites and save thousands of hours using the world's largest Webflow component library. Copy and paste Webflow components with ease.

Root Illustrations

A set of customizable illustrations to bring beauty and a friendly tone to your products. All Illustrations are customizable and compatible with Sketch & Figma. Mix & match components with character and make your own unique schenes! Fill the whitespace on your landing page or app screen with beautiful illustrations in minutes.

Root - Wireframe and Design Starter Kit

Root UI Kit is made to help designers and developers create better wireframes, user-flows, website mockups, design systems, and presentations by its example.

Frames X - UI Kit & Design Handbook

Frames X is the one Figma UI kit and eBook to skyrocket your career and save thousands of hours. With this bundle, you will master system design and get access to a vast component library that will drastically improve your workflow by providing you with all the necessary assets, tips, and tricks to design a better UI.

Frames for Sketch

Frames UI kit solve designer & developer routine, helping you to create amazing websites and apps faster with Sketch app.

Godly Stater UI Kit

The fastest way to start design projects in Figma. Mockup high-quality landing pages in minutes, complete design projects faster and make more money.

Colors

This is some text inside of a div block.
Figma DIY: Building a color system plugin

Figma DIY: Building a color system plugin

Learn how to build a missing Figma feature with just some basic knowledge of HTML, CSS, and JavaScript. In this step-by-step tutorial, we draw up a simple mock interface, discover a better way of working with colors and create a small plugin that makes it possible. If you are working at the intersection of design and web development—this post is for you.
Hue Tools

Hue Tools

A free color mixer, blender, info and modifier tool. Mix multiple colors, get links for design inspiration and stock images based on a color, view various color combinations and modify colors in an intuitive.
Blend mode

Blend mode

Which Blend Mode? — A practical guide to using each CSS blend mode, with working examples. Blend modes allow for a number of unique visual effects, handy for both UI elements and photo manipulation. This guide explains the basics behind each blend mode, and offers a number of practical examples for use in the wild.
Color System - Lab (Natural) - Components.ai

Color System - Lab (Natural) - Components.ai

Parametric and generative design tools
Reasonable Colors

Reasonable Colors

Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.
Gradients - Components.ai

Gradients - Components.ai

Parametric and generative design tools
RBG Game

RBG Game

Pixel-paint using keyboard controls.
Color Scales - Components.ai

Color Scales - Components.ai

Parametric and generative design tools
prefers-color-scheme: Hello darkness, my old friend

prefers-color-scheme: Hello darkness, my old friend

Many devices now support an operating system wide dark mode or dark theme experience. This post explains how dark mode can be supported on web pages, lists best practices, and introduces a custom element named dark-mode-toggle that allows web developers to offer users a way to override their operating system level preference on specific web pages.

No Code / Low Code

This is some text inside of a div block.
Reform - Hosted forms

Reform - Hosted forms

Use Reform to build clean, brandable forms for your users. Hosted, customizable & no code required.
Locofy.ai

Locofy.ai

Turn your designs into production-ready frontend code for mobile apps and web. Ship products 3-4x faster with your existing design tools, tech stacks & workflows.
Builder.io

Builder.io

Builder's platform makes creating, managing, and optimizing digital experiences on any site or app easier than ever before.
Vev: No-code Web Design Platform

Vev: No-code Web Design Platform

Vev is the only all-in-one design platform for professionals to create and launch unique web experiences with complete creative and technical freedom.
the.com - building and remix the internet

the.com - building and remix the internet

The.com is a low-code site builder and development platform with a community-created marketplace where creators share website Blocks.
Uiflow

Uiflow

The Fastest Way To Go From Idea to Production
TeleportHQ

TeleportHQ

Front-end development platform, with a visual builder and headless content modelling capabilities. Static website creation, and UI development tools.
Interplay

Interplay

Interplay connects and automates design and code workflows to align your entire product team around a single source of truth

Design Systems

This is some text inside of a div block.
Open UI

Open UI

The web deserves interoperability between component frameworks and design systems. The UI community is in a similar place as the industrial revolution prior to standardization.
Component Gallry

Component Gallry

The Component Gallery is a collection of components from the best Design Systems.
Design Systems Handbook

Design Systems Handbook

Your guide to design systems best practices. Learn how to design, build, maintain, and implement design systems–from design leaders and world-class teams.
Design Systems News

Design Systems News

A publication full of interesting, relevant, and curated links.
Toolabs - Design System Manager

Toolabs - Design System Manager

Toolabs is a web based #tokens and #components driven Design, Prototype, Document and Development Platform
Supernova

Supernova

Build, maintain and deliver your design system to all your product teams, blazing fast

Designers

This is some text inside of a div block.
Grace Walker

Grace Walker

Grace Walker is a multi-disciplinary designer helping entrepreneurs efficiently scale their brand with design, Webflow development, and SEO solutions. Based in Calgary, Canada.
Chris Johnson

Chris Johnson

Designer, developer, tinkerer. Head of Technical (SEO/DEV) at http://bamboonine.co.uk. Projects: @tapefear / @abookofhorrors / http://SEOslides.page / @theshapeofashow
Diana Mounter

Diana Mounter

I’m a designer with an interest in systems thinking, code as a material, and inclusive design. I work remotely for GitHub as their Director of Design Infrastructure, and organize the Design Systems Coalition NYC meetup. Living in Brooklyn, NY, and currently staying inside.
Dmitriy Bunin

Dmitriy Bunin

Maker, web & icon designer
Brent Jackson

Brent Jackson

Developer @gatsbyjs. Invented the <Box /> component. Working on Theme UI, Styled System, Rebass, & MDX Deck.
Max Wendkos

Max Wendkos

I build and support high-performing design teams that help customers and businesses achieve their goals together
Jordan Singer

Jordan Singer

Jordan Singer is the founder of Diagram. The ethos of Diagram is to help people designer faster. Diagram has created Automator, Prototyper, designOS and Designer.
Paul Stamatiou

Paul Stamatiou

Principal Designer @krakenfx. Prev @Twitter. Investor @rainbowdotme @xmtp_ @superdao_co @OrangeDAOxyz. Making @StocketaApp
Tom Takigayama

Tom Takigayama

Hello, I am a product design director. Born in Queens, now in Brooklyn. Currently at Justworks. Previously at Etsy, Gilt, Ralph Lauren & Publicis.
Jason Li

Jason Li

Design @tryramp . Previously @ RBC Ventures, http://kabo.co. Founder @ http://TomYum.co.
Mina Markham

Mina Markham

I’m a front-end architect with a passion for the web, Sass, social media & typography. Currently living & loving in Brooklyn, New York.
Josh Silverman

Josh Silverman

Designer, entrepreneur, educator, coach. Chair, MDes @CACollegeofArts. Head of Design, MeetingPulse. Founder @Startnership. Long on optimism; short on time.

Code

This is some text inside of a div block.

Article Schema.org Markup Generator

Generate JSON-LD article markup with our JSON-LD generator tool. Copy the generated code to your website. No coding required!

Wonderful HTML Email Workflow

If you've ever had the misfortune of being tasked with building a template for HTML emails, you know it's tricky business! In this blog post, I share the approach I took to build responsive, client-friendly emails without a single <table> tag.

NoJS - Creating a calculator with only pure HTML and CSS. No Javascript!

Everyone loves CSS! So I built a calculator where the CSS handles the logic without the help of javascript. In this blog post, I will discuss how I achieved this and maybe make a case for my sanity for making it.

Stately | Visualize your application logic

Stately is building tools to visualize your application logic using XState. Learn more about our visualizer, visual editor and XState.

Reasonable.html

Reasonable.html is a single HTML document that contains a reasonably complete set of example HTML elements.

Layout Shift GIF Generator

Visualise the Core Web Vitals metric Cumulative Layout Shift (CLS) with a simple GIF. Easily identify problematic layout shifts in the viewport on mobile and desktop. Available as a simple command line tool, or as an online tool.

UX Design

This is some text inside of a div block.

Good

Receive the latest discovered UI patterns and leaked experiments from companies such as Amazon, Netflix, Airbnb, Etsy, Google, and Booking.com, etc. We're obsessed with learning about what works and what fails.

checklist.design

Checklist Design is a curated list of checklists ranging from website pages, to UI components, all the way to branding assets.

eCommerce Design

This is some text inside of a div block.

Replo

Customizable landing pages for serious e-commerce teams. Made for marketing, integrated with Shopify - learn more about building stores faster with Replo

DTC Patterns

Marketing & UX Insights from Real Purchases

Social Posts

This is some text inside of a div block.

Automating Figma Tasks

Button Placement Question

GUI Challenges

I build interfaces my way, then challenge you to do it your way. With our creative minds combined, we'll find multiple ways to solve these interfaces and expand the diversity of our skills.

Kizzie Twitter Image

Create beautiful and customizable Tweet screenshots for Instagram Story, Post and more. Export the output as PNG image or copy screenshot to clipboard.

Simple Social Image Resizer

Make your images the perfect size for all the major social and ad platforms. Etsy, Facebook, Facebook Ads, Google Display Network, Google My Business, Instagram Ads, Twitch, Twitter, YouTube, Zoom

CSS

This is some text inside of a div block.

CSS GUI

A powerful, extensible, and visual CSS editor for creative coding and end-user styling

CSS pattern backgrounds

CSS Background Patterns

Beautiful pure CSS background patterns that you can actually use in your projects!

Modern CSS Solutions

Agencies

This is some text inside of a div block.

Pentagram

Pentagram is the world’s largest independent design consultancy. The firm is owned and run by 24 partners, each of whom are leaders in their individual fields.

Book Resources

This is some text inside of a div block.

Codify

Codify: Parametric and Computational Design in Landscape Architecture provides a series of essays that explore what it means to use, modify and create computational tools in a contemporary design environment. Landscape architecture has a long history of innovation in the areas of computation and media, particularly in how the discipline represents, analyses, and constructs complex systems. This curated volume spans academic and professional projects to form a snapshot of digital practices that aim to show how computation is a tool that goes beyond methods of representation and media. The book is organized in four sections; syntax, perception, employ, and prospective. The essays are written by leading academics and professionals and the sections examine the role of computational tools in landscape architecture through case studies, historical accounts, theoretical arguments, and nascent propositions.
Bradley Cantrell

Design Reading (Compilation)

Explorations in generative art and design by Adam Morse
Adam Morse

Computational Design

Computational Design offers an informed overview of the impact of computational techniques on architectural design today, providing a snapshot of the latest developments in the field, drawing upon the leading experts in architectural practice and education from across the world
Neil Leach

3D Design Resources

This is some text inside of a div block.

Shapefest™ - A massive library of free 3D shapes

A massive free library of beautifully rendered 3D shapes. 160,000+ high resolution PNG images in one cohesive library.

Three.js noise re-creation

Landing Pages

This is some text inside of a div block.
Landings - Landing Page Examples

Landings - Landing Page Examples

Find the best landing pages for your design inspiration based on your preference
@nilansaha
Godly — The Best Web Design Inspiration

Godly — The Best Web Design Inspiration

Godly is a curation of the best web design inspiration, every day. Browse the best e-commerce websites, portfolio websites, animation websites and more.
Daryl Ginn
Landingfolio

Landingfolio

The Best Landing Page Design Inspiration, Templates and More. Landingfolio features the best landing page designs on the web. Get inspiration from real landing page examples, curated by us to ensure the highest quality.
Danny Postma

Placeholder

Heading

This is some text inside of a div block.

Heading

This is some text inside of a div block.

Heading

This is some text inside of a div block.

Heading

This is some text inside of a div block.

Heading

This is some text inside of a div block.

Heading

This is some text inside of a div block.

Heading

This is some text inside of a div block.

Heading

This is some text inside of a div block.

Heading

This is some text inside of a div block.

Design Conferences and Courses

This is some text inside of a div block.
UI Foundations

UI Foundations

What it takes to build good UIs often boils down to knowledge of a few key design principles and a careful eye. You can learn design principles, and you can train your eye.
Clarity

Clarity

Clarity is a design systems conference focused on how we work together. We provide tools and standards to scale across an increasing number of devices, platforms, and products. But real success comes when people align around a shared vision and language. Diverse perspectives for design, development, and product unite so more people can be a part of the conversation. At Clarity, we elevate our skills through multi-faceted inclusion, empathy, technology, creativity, and collaboration.