Scribd
Upload
73 views31 pages

UI Components Series

A description of UI Components

Uploaded by

Veluanna Vadi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
73 views31 pages

UI Components Series

A description of UI Components

Uploaded by

Veluanna Vadi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 31

UI Components series

https://uxdesign.cc/loading-progress-indicators-ui-components-series-f4b1fc35339a

The anatomy of a button — UI component series


All you need to know about button design, one of the main interactive
building blocks for creating a user interface.

uxdesign.cc

Text fields & Forms design — UI components series


Simple rules that will help you design forms users will like to complete

uxdesign.cc

Taras Bakusevych

in

UX Collective

Loading & progress indicators — UI Components series


Engage users and enhance waiting experiences with these simple
recommendations.
9 min read·Jul 11, 2023

13

Megan Ng

in

UX Collective

Why do we call it breadcrumbs? Diving into the history of


UI components
It started off with toast

·4 min read·Jun 17, 2022

15
Taras Bakusevych

in

UX Collective

Text fields & Forms design — UI components series


Simple rules that will help you design forms users will like to complete

8 min read·May 25, 2020

50

Nazli Kaya
in

UX Collective

How to name UI components


We’ve all dealt with the issues when someone is trying to talk about “that light
blue button just below the thing with the sliding images”…

·6 min read·Jan 1, 2019

Merve Orhan

in

UX Collective
The simplest but most abused UI components — Part 1
Recently, I have started to give “interaction design and information
architecture” training courses for UI and UX designers and interested…

8 min read·Nov 4, 2018

Zhen Li

in

UX Collective

The five must-have UI components for a B2B enterprise


application
After my last post, I received many responses from the readers. This
encourages me to share more experience about the pain points and…
·8 min read·Oct 4, 2018

Shan Shen

in

UX Collective

Not just boxes: card components in design systems


Recently, I’ve been creating card UI components library for the design
system. I noticed that there are instances when cards are designed…

4 min read·Jul 18, 2018

Micah Bowers
in

UX Collective

Mini tutorials: working with Figma button components


In Figma, UI elements are called Components. Built properly, they’re
incredibly versatile and easy to update, but what are components…

7 min read·Aug 13, 2019

Christine Vallaure

in

UX Collective

Responsive UI design with Figma’s variables and modes


components and variants respecting breakpoints

·12 min read·Sep 12, 2023

Christine Vallaure

in

UX Collective

Advanced Figma components tips & tricks: little gems we


love
As you all loved Advanced Figma Tips & Tricks and Prototyping Tips &
Tricks, here is the third part: In this article, I’ll share some of…

·12 min read·Apr 11, 2023


5

Anna Rzepka

in

UX Collective

Interactive components in ProtoPie


As a kid, I loved playing with Lego blocks, building anything my imagination
could conjure up, one block at a time. My brothers and I would…

·7 min read·Mar 14, 2023


Alex Zlatkus

in

UX Collective

How to make your Figma components easier to use


What you can do to optimize the UX for component consumers

·5 min read·Jun 21, 2022

Nacho Allendesalazar

in

UX Collective
Becoming a Figma ninja with base components
Base components allow you to work faster, more consistently and reduce time
spent updating existing designs 💪

5 min read·Mar 23, 2022

Chuck Rice

in

UX Collective

How to share Figma components across files


How to share Styles and Components from one file to another, whether you or
someone else has compiled them.
·4 min read·Dec 14, 2021

Chuck Rice

in

UX Collective

Building responsive components in Figma using ‘Double-


Glazing’
How to apply the double-glazing technique to create a set of responsive
Components in Figma, to make designing responsive web pages easier.

·6 min read·Sep 10, 2020


Ed Orozco

in

UX Collective

Grouping components in atomic design systems


Organizing and classifying components in a design system is an art-form in
itself. Coming up with a consistent nomenclature, finding a…

3 min read·Jan 13, 2020

Erez Reznikov

in

UX Collective
UI elements are not so elementary
To function, components require specific structure. To appear visually — they
don’t. This has been breaking handoff processes for years.

14 min read·Feb 6, 2024

Bruno Temporim Carneiro

in

UX Collective

Cascading Components: a different way to organize


Figma variants
An experiment on component organization

11 min read·May 13, 2023


12

Anuj Uchil

in

UX Collective

The appeal of complex components in user interface


design systems
Using the new exposed nested properties and the preferred instance
properties in Figma to build configurable UI kits.

6 min read·Oct 17, 2022

3
Luka Nikcevic

in

UX Collective

How to safely upgrade and deprecate components in


Figma
While keeping things simple for your design teams

5 min read·Aug 14, 2022

Padraic McElroy

in
UX Collective

Understanding Figma’s interactive components feature


Figma has been busy working on a lot of new features recently and one that
has captured my attention is Interactive Components. This…

5 min read·Mar 3, 2022

Aaron Cecchini-Butler

in

UX Collective

Using spacer components to drive consistency (in Figma)


There are many different ways to organize spacing — with the most popular
(probably) being the use of auto-layout. My first big disclaimer…
·4 min read·Jan 11, 2022

Gus Reksoprodjo

in

UX Collective

How to create and use components in Figma for beginners


A step-by-step guide to getting you through Figma components

6 min read·Nov 11, 2021


BIBOSWAN ROY

in

UX Collective

Thoughts around design systems: implementation —


React, Styled-Components, and more
Before you jump into building screens, take a step back, and observe all the
screens.

7 min read·Jun 8, 2020

Gavin Chiemsombat

in
UX Collective

Figma: Moving local components to shared libraries


What to do if you find building a new house easier than moving components

4 min read·Jun 30, 2021

Steve Dennis

in

UX Collective

Design system breakdown: select


Part 3 of a deep dive series on specific design system components

·9 min read·Feb 13, 2023


Christine Vallaure

in

UX Collective

Working with breakpoints in Figma: Testing and


documenting responsive designs
How to set up and test truly responsive design components

·9 min read·Sep 28, 2022

6
Chuck Rice

in

UX Collective

A masterclass in sharing Figma’s prototype interactions


Reuse interactions in your prototypes without losing Design System updates
by using components, inheritance, and an Interaction Wrapper.

·8 min read·Sep 13, 2022

Chuck Rice

in

UX Collective
7 common Figma design problems (and how to fix them)
Practical ways to overcome 7 common Figma design issues, caused by auto
layout, constraints, groups, frames, components, and duplicates.

·7 min read·Aug 1, 2022

Anastasia & Vlad

in

UX Collective

What is a Design System? A simple guide to get started


A design system is a library of guidelines and reusable components that
should establish the consistency of the product experience. The…

9 min read·Jul 2, 2022


2

Anna Rzepka

in

UX Collective

Absolute positioning in Figma


There is no doubt that auto-layout frames are great for making universal
components. They can scale easily to hug their content. But what…

·5 min read·May 19, 2022

5
Oriol Banus

in

UX Collective

Build a Design System for an existing product in 4 sprints


Creating Styles, Components & Documentation

·7 min read·Apr 4, 2022

9
Chuck Rice

in

UX Collective

How to make an animated spinner button in Figma


Craft more sophisticated Figma prototypes using techniques like community
imports, animations, advanced resizing, and Components.

·5 min read·Mar 16, 2022

Sepeda Rafael

in

UX Collective

How to manage space in Figma using tokens


And how to make the spacers handy and transparent with the help of
components

8 min read·Dec 17, 2021

10

Danny Sapio

in

UX Collective

10 Component Tips in Figma


Tips and best practices for components in Figma

·6 min read·Dec 13, 2021

2
Lukas Oppermann

in

UX Collective

Make your design system accessible — Part 1: Color


Design Systems can be a big win for accessibility if you do it right. Learn how
you can make your components and colors accessible.

·12 min read·Mar 17, 2022

8
Justin Huang

in

UX Collective

Create a button component with Figma Variants + Auto


Layout
Early this year, I posted an article about create button components using
Figma’s Auto Layout. Over the past few months, Figma had…

5 min read·Jan 10, 2021

Thalion

in
UX Collective

Tips & tricks about Variants in Figma


If you like to use Components a lot in your design, you will fall in love with
Variants. This Figma feature moves the design workflow to a…

5 min read·Dec 8, 2020

Adi Shanbhag

in

UX Collective

Difference between a style guide, pattern library and a


design system in pictures (with Pokemon)
Here’s a neat visualization by @HonzaTmn (Twitter) to show the components
of a design system
2 min read·Dec 9, 2019

You might also like