Tools and assets I use in my UI design workflow
Tools and assets I use in my UI design workflow
Research & Learning
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.
- Mizko
- Designcourse
- Malewicz
- DesignCode
- AJ & Smart
- 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/