Tools and assets I use in my UI design workflow

Research & Learning

Google

Internet research is a crucial part of my workflow and in most cases I don't know exactly what I am searching for but by using a powerful search engine like Google, I am able to input different keywords until I find what I need.

Youtube

Youtube has played a major role in my journey to become the designer I am today. Here's a list of YouTube channels where I've been watching design videos.

1. Mizko
2. Designcourse
3. Malewicz
4. DesignCode
5. AJ & Smart
6. Satori Graphics (is about graphics designing but worth checking out)

Figma community

Figma community members share their works, design lecture slides, and templates. I have cloned a lot of these works and learned how other designers implement certain things and I have gained a lot of knowledge from presentation slides shared in the community.

Inspiration

UI-Patterns

My life changed when I found this website. It really helps me get ideas when hitting creative blocks. They have a list of design patterns that solves common design problems.

Dribbble, Pinterest, & Figma community

Whenever I hit a creative block the first place I go is dribbble, enter my search term, filter by mobile app or web design and then start exploring. The works of other designers in all these platforms show me how they have solved certain design problems which then gives me ideas on how I could also solve mine.

Behance

The difference between Behance and dribbble is that in behance I can also find detailed case studies which are normally very insightful.

Designing

Figma

Words are not enough to describe how much I love working with Figma. It’s all the amazing features available and learning resources that have helped me understand the platform and use it to the fullest.

Design systems

Design systems have helped me speed up my workflow. At ClickPesa we use Ant Design system from Matt Wierzbicki, and on my side project I use Tailwind css style guide by Bonnie Hong

Icon Library

I use Bytedance icons, Heroicons, and Bootstrap. They all have different content, look, and feel so I used them in different projects depending on what I want.

Figma Shortcuts

The ones in blue are the shortcuts that I use often. You can see this menu in figma by pressing Ctrl + Shift + ? on windows.

Plugins

Here are some of my Figma plugins that i can’t live without:

• A selector

  Very useful for when I want to select something that is occurring on multiple places and has the same name.

• Blobs

  Very useful for when I want to create some organic blobs to enhance my design

• Design system organizer

  I use this to bulk edit my design systems

• Downsize

  I use this to resize images in my designs so the design file doesn’t take too long to load.

• Figma Data Faker

  I used this one for generating multiple fake data for my design because I can’t be putting lorem ipsum everywhere

• Figmoji

  I use this one to add emojis to my designs

• Image Palette

  This one helps me generate color palettes from images quickly

• Lorem ipsum

  For generating dummy text for long paragraphs

• ProtoPie

  Helps exporting Figma frames to ProtoPie for prototyping

• Remove BG

  This magical tool removes background from images so smoothly

• Typescales

  I use this for generating typescales

• Unsplash

  This one is my favorite. I get to insert images into my designs without going to google.

Prototyping

Figma prototyping

I use Figma for clickthrough prototyping and interactive components helps enhance the prototypes. But I hope one day Figma adds conditional logics so we can minimize those wires.

ProtoPie

ProtoPie recently released a free forever plan which I have been using to learn how to use the platform. So far I like the experience while using the platform and the availability of learning resources in their Youtube channel.

If you like this article there are more like this in our blogs, follow us on dev.to/clickpesa, medium.com/@clickpesa and clickpesa.hashnode.dev/