journey through web development

Category: resources (Page 1 of 2)

Huge list of Figma plugins you should know about

Do you use Figma? If you do, then this list is just for you! Big list of my favourite figma plugins. They will make your work easier, faster and much more enjoyable!

Brandfetch

Type in any brand and in seconds you have access to its logo, brand colours, brand fonts and Image. Saves you a lot of time googling that stuff manually! They even had katvonwiesendorf.com (my photography blog) on, so I’m impressed!

My rating:

Rating: 4 out of 5.

Blobs

This is a plugin you didn’t know you needed in your life until you use it for the first time! I absolutely love Blobs, few clicks and you have a lovely shaped blob to use in your design. Adds a nice depth and a lot of coolness to your work!


My rating:

Rating: 5 out of 5.

Material Design Icons

Enormous collection of icons to use in your designs. Export as and svg and job done! Simple and easy. 9/10 times you will find the icon you need there.

My rating:

Rating: 4.5 out of 5.

Humaaans for Figma

My love for illustrations and illustrated people began from this plugin. Choose ready made person or create you own using components, change colours and there you have a little person! There are certain limitations (hairstyles for example) but it’s still really cool plugin worth installing.
For observant readers, yes, the illustration on my banner is made using this plugin!


My rating:

Rating: 5 out of 5.

Metaball

The newest find of mine, definitely useful, just didn’t really had an idea where I could actually use it! 😂 This plugin creates 2D metaball objects from circles, so when you need a meta shape, it will be a godsend for you.


My rating:

Rating: 3 out of 5.

Logo creator

Nice little plugin for those times when you quickly need some dummy logo. They are still in beta, so options are limited, but I still found it useful to have. Hopefully their collection will grow overtime.


My rating:

Rating: 3.5 out of 5.

Get Waves

Get instant coolness to your work by adding some waves! Few clicks and job done! Possibilities here are endless, but there is one downfall- you may spend a lot of time just generating more waves and not be able to choose just one! 🙊


My rating:

Rating: 5 out of 5.

Confetti

Select a shape inside a frame, tick some options and choose number of rows and columns… ta-daaah! Cool background done! Then you can change colour of some shapes (or not) People will think you’ve spend ages on it.


My rating:

Rating: 5 out of 5.

Color Palletes

For those wanting a nice colour scheme, but not really good at matching colours (or just not having time to think about it!) This plugin provides you with a huge colour collection! It’s a yes from me!


My rating:

Rating: 5 out of 5.

Pattern Hero

Select one of few objects, choose number of rows and columns and your have you own random pattern. The example below is done with simple shapes, so it may not be breathtaking, but imagine doing a pattern with different illustrations (like humaaans for figma people?)


My rating:

Rating: 3 out of 5.

Your recommendations:

Content Reel

Awesome recommendation by @BeckyFumagall, this plugin is a library full of dummy data, avatars and icons. You can also sign up to personalise your home tab to keep all your favourites in one place for a quick access. I’m definitely gonna use this plugin a lot!

Content Buddy

Another from Becky, this plugin lets you quickly replace text content with a different one. I’m sure it’s useful when your designs have a lot of different text areas.

Font Replacer

The last recommended by Becky. I was excited to try this one out, only to be a little bit disappointed by how it’s working. I was annoyed to have to have a text area selected before opening the plugin, not being able to see how different fonts looks like and then when you replace the font, the plugin closes down by itself… For someone really undecided who likes to try different fonts it is quite time-consuming.

Figma Manager

Thalion‘s recommendation. This plugin lets your organise your personal library of components, colours, texts and effect styles. The downfall is the price- 24$ a year for a personal licence.

Toolabs Design System Manager

Recommended by Namik Ozgur Aydin and I’m so happy to discover this system manager! It’s free and really powerful! The plugin is really intuitive, fast and you can personalise everything to suit your needs. You need to create an account prior to using it.

Autoflow

Gercek’s suggestion. Very good option for any flowcharts. I am definitely gonna use this one now instead of draw.io

What’s your favourite figma plugin?

This list is definitely not exhausted, so if you know a cool plugin that isn’t on this list, please share it with me and I will add it here for others to enjoy it too!

Liked this post? Share:

Create great websites faster, without writing a single line of CSS

Don’t get me wrong, I ♥ CSS, but it can quickly take most of your coding time. The solution? TailwindCSS.

I’ve discovered it few months ago, when I started my internship, and it didn’t take long for me to fall in love with it.
What’s so good about this framework?

  • first of all, it’s really easy to get started!
  • documentation is great, meaning you don’t have to memorise anything.
  • it has everything you could need straight out of the box,
    but if you do need more,
  • it is fully customisable (also super easy to do so!)

The best options to get started is to install via npm or yarn, but you can also use CDN (just bear in mind this option comes with some limitations).

Long story short on how to understand tailwind: just add a class to your element, and tailwind will compile it to a beautiful CSS!
You have no idea how much time you’ll save by not going back and forth from one file to another, and using short names, like mt-2 or font-semibold. (All of which are in the documentation, so definitely check it out!)
Tailwind also has some lovely animation classes, so all you have to type is animate-pulse, animate-bounce, animate-spin or animate-ping, and call it a day, because your website now has awesome animation that only took seconds of your time!


Bonus stuff from Tailwind, that will make creating new projects a breeze? TAILWIND UI.
Ready made components, that you can use like building blocks.
Access to all of them is, unfortunately, paid but you can use some of them for free here.

Have you ever heard of Tailwind? Maybe you already used it in any of your projects? Or perhaps there is another CSS framework you really like?
Let me know!

KAT♥

Liked this post? Share:

Developer’s library: license-free illustrations

In the last post, I’ve shared my huge list of sources for license-free images (you can read it here).
I hope you enjoyed this library of free goodies because today I would like to list my go-to places when I need cool illustrations for my projects.

Here is my list of sources for licence-free illustrations:

1. https://undraw.co/

My all-time favourite- Undraw.co! I love the style the characters are drawn, and 99% of the time they perfectly fit the purpose. You can edit them to your liking and don’t need to credit the author. Sometimes I love the illustration, but I’d rather a different character on it, so  I download two different illustrations and edit them by taking a character from one, and the surroundings from the second one. Works like a charm.

undraw.co

2. https://blush.design/

I discovered Blush recently, and even though I haven’t used it for any project yet, I am already loving this platform! Lots of different styles, so everyone will find their perfect illustration. Blush is available as a plugin for Figma, or a web app, to simply download the file onto your computer. There are two different options: a free plan which allows you to download illustrations in PNG format, or paid plan, where you get them in SVG format. You don’t have to credit the author in either of options.
The only issue is, there are too many lovely designs, I might have a problem to decide on one! 😂

blush.design

3. https://lukaszadam.com/illustrations

A good chunk of license-free illustration. Edit them as you like, and I’m sure they will enhance any design!

https://lukaszadam.com/illustrations

4. https://www.manypixels.co/gallery/

Many Pixels offers their grand gallery of illustrations for free. You can customise the colour straight on the page, or edit the file after downloading it. There are 4 different styles to choose from Monochromatic, Isometric, Two Color and Flatline. More than enough to find THAT one you need. (MP also offers a paid plan, where you get personalised help from a design

5. https://illlustrations.co/

Illustrations.co is the result of a #100daysChallenge, where the author created 1 illustration a day, for 100 days. There are some new ones as well! (+COVID-19 related bundle) Really cool initiative, and you can now use them for free.

https://illlustrations.co/

6. https://fresh-folk.com/

Okay so this one is a little bit different, but I loved the style of those characters, I had to add it to the list. Those illustrations are under Attribution 4.0 International (CC BY 4.0) license, which means you have to give appropriate credit, provide a link to the license, and indicate if changes were made.

You have to enter your e-mail address to download THE FULL library. You can then edit them and use on any project. As we can read on the website, each character comes with a range of poses, outfits and skin tones. There are also 43 objects to choose from to create a wide range of scenes.
Definitely worth visiting, if you don’t mind crediting the author.

https://fresh-folk.com/

7. https://storyset.com/

Huge collection of cool illustration which will be perfect in any project. Different styles to suit both informal and formal apps/websites/infographics etc. I will definitely use it in one of my next projects.
You do need to credit and link storyset.com!

8. https://freeillustrations.xyz/

Different type of source. Freeillustrations is a library of different illustrations collections. In here, you have to find out the type of licence by clicking on the collection you like. Most of the ones I clicked on where free for personal and commercial use though. I’m sure everyone will find something they like in here.

9. https://designs.ai/graphicmaker/

9 different styles (one of them being SVG country maps) where you can change colours to match your design. “For free images, you are required to include the link attribution back to Designs.ai as “Brought to you by Designs.ai” when using any illustrations from Graphicmaker.”
This website has a lot more cool stuff than just illustrations though. There is also a logo maker, video maker, speech maker, design maker, color matcher and font pairer too. (All have different licenses so please read Do and Donts page)

Which illustrations are you gonna use for your next project?
Let me know your favourites! 👇

Liked this post? Share:

Developer’s library: license-free images

The right images are so important on the web. They make a huuuuuuge difference in any project. But have you ever searched the internet for an hour (sometimes more), looking for a good-looking, license-free image, illustration or an icon to go with your new design or project? Yeah…me too. Probably most of the developers were, at some point. Over the time, I discovered quite a few great websites that offer just that, so I’m gonna make your life easier. I’m gonna share my resources with you. Let’s start with images…

Here is my list of sources for license-free images:

  • https://unsplash.com/

    One of the most popular, and for a good reason. Unsplash offers a huge amount of images in great quality. Most of the images on my blog are from there! As you can read in their license page, “you can use them [images] for commercial and noncommercial purposes. You do not need to ask permission from or provide credit to the photographer or Unsplash, although it is appreciated when possible.”

    unsplash.com

  • https://pixabay.com/

    With over 1.7 million+ high-quality stock images and videos that you can use royalty-free, I’m sure you will find what you need. As with the Unsplash, attribution is not required, but of course, highly appreciated.

    pixabay.com

  • https://www.pexels.com/

    Another great source for images. What’s interesting, images from Pexels can be modified to your liking.

  • https://styledstock.co/

    Different and smaller than previous websites, Styled Stock, feminine stock photography, offers good resolution images for free. They also stock “bundles” of photos you can buy.

  • https://negativespace.co/

    Negative Space works under CC0 license, which means you can download, edit, use for personal or commercial purposes without purchase, permission, or mentioning the author. They seem to have a good library of images in different categories, but some ads on the website made me question whether the service is really free to use. (it is though. Unless you click the Shutterstock ad 😅)

  • https://barnimages.com/

    A good chunk of high-res images free to use for private and commercial purposes. This service is not working under the CC0 license, so image copyrights are still belonging to the author.

  • https://kaboompics.com/

    Great platform, lovely images, and they even created a COVID-19 category (made me laugh but actually, a really cool idea)
    big + for images with polish money on the main page (😂 just kidding… sorta)

  • https://stocksnap.io/

    Stock snap is working under CC0 license, which gives you a lot of freedom with your downloaded image. They have a big library, but again, Shutterstock ads are mixing in, and it’s really easy to pick a Shutterstock image (which will transfer you to their website. no big deal, unless you just found THAT photo you need and it turns out to be a paid one 👎)

  • https://www.lifeofpix.com/

    Although they offer a lot of nice images, the website is really slow (probably from all those “cool” animations and transitions. Yeah they look awesome but there is just too many of them, especially on the About page!) and the UX not so great.

  • https://picography.co/

    Smaller library, but if you can’t find what you are looking for on the big portal (like Unsplash, I recommend looking at Picography. I love their logo too!

  • https://burst.shopify.com/

    License-free images from Shopify. They have a lot of categories and great images I haven’t seen anywhere else. Definitely worth a visit.

I hope this post was useful and you just found your favourite portal to get awesome images for your projects!👩‍💻

EDIT

The second part of the developer’s library, license-free illustrations, is live now! You can read it here! 

Continue reading
Liked this post? Share:

Strengths finder

Have you ever heard of the Gallup’s Strengths Finder test? No? Me neither… until this morning.

I was browsing the internet looking for something, going from site to site and I got across it. I was intrigued, so started to look into it. The real Gallup’s Test is paid for, but I found a good free alternative to take online. High5 test helps you understand your strengths, and although there are 100 questions to answer, all you have to do is use the slider to say if you strongly agree or strongly disagree with the statement describing a certain behavior.

It took me around 10 minutes to complete the test. The results? Well..they didn’t surprise me at all! It was 100% me. To show you how cool it is to discover your “powers”, I will share my results:

Curious to explore them one by one in a bit more depth? Ok…

    1. Time keeper-
      “Your objective is to set timelines and deadlines. Because of your dislike of surprises, you love to plan. You don’t necessarily need to control everything and everyone, but there must be order and predictability in the world around you. You unconsciously impose the structure onto everything by setting up routines, timelines, and deadlines. If you set up plans, you make sure you follow them through thoroughly. Your need for structure becomes very useful in a team or a project since you can bring order and discipline to maintain progress and productivity “

       

      My mild OCD made me a little control-freak (nothing serious, I just LOVE to make lists and plan stuff out. 🤪) Thanks to my great timekeeping abilities I always submit assignments well ahead of time and I never arrive late. I like to plan out so I’m prepared for everything.

     

    1. Deliverer-
      “Your objective is to take responsibility. If there is a person who is emotionally bound to follow through on all promises – then it’s you. Your strong ethical principles do not let you to simply write missteps off on excuses and rationalizations. It holds true no matter how small or large is the issue you are dealing with. Your name and reputation depend on you being responsible for your commitments. That’s why people love to have you in their team. When assigning new responsibilities, they look at you first. They are 100% sure that what’ll get on your desk – will get done no matter what.”

     

    1. Commander-
      “Your objective is to take charge and direct people. In any situation, you enjoy bringing yourself forward to lead the team. Moreover, you don’t come empty handed – by that time your opinion and views are formed and you can’t wait to align others with you. Contrary to others, in this process, you are not afraid of confrontation when presenting your views. At the contrary, you feel that the confrontation and the open discussion is the first step towards an agreement. People who have a clear vision and can take a stand for it always draw followers, so will you. If you also master listening to others, this strength will help you to be a good leader without fear of confrontation.”

       

      Ok, so leading skills must’ve developed recently because most of my youth I would think of myself as one of the group- never a leader. But that just shows how much we can change over time and nothing is set for good.

     

    1. Strategist-
      “Your objective is to see the big picture. Have you heard about ‘taking the helicopter view’? In your case, you are constantly on this helicopter! That’s not even a skill, it’s a special way of seeing things – a special perspective on the world at large, where everything is interconnected. While others could be confused by your short-terms steps, in your mind you have a clear multi-step strategy on how to arrive at the desired outcome and to avoid paths leading nowhere. Such a strategist is an essential asset for any team determined to find a clear direction in a complex situation.”



      I was in awe when I read this description. In the last semester, we had “Introduction to Databases” unit, and in the beginning, I had a problem understanding it fully, as we were taught little bits at a time without seeing the whole thing together. I WAS MISSING A BIGGER PICTURE!

     

    1. Catalyst-
      “Your objective is to act and to initiate action. You cannot wait until the discussions are over, wondering when we can actually start doing something. Undoubtedly, sometimes the progress could be achieved in a meeting room, but deep down in your heart you know it’s the action that leads to tangible results. If some can be resistant to act because they don’t have full information, for you – acting is the best teacher and the best source of information. How can you know something that does not work if we haven’t tried it? You make a decision, you take action, you look at the result, and you learn. As a result, you are impatient for action and, if not managed, it can lead to confusion of your team members. However, this talent of transforming intangible ideas into tangible actions is invaluable in every team. It’s all because you believe that you will be evaluated by what you get done, not what you say or what you think.”

       

      Yup, I learn stuff by doing them. I love to be in the move, always doing something, always creating. My friend always says that I’m “a busy 🐝”. The more I do, the more time I have for everything.

     

    Here it is. You’ve learned a whole lot about me today. I hope I interested you in the strengths test, let me know if decided to do it and what you think about your results!

    >>Take the High5 test here!<<

    *The featured photo: Photo by Scott Graham on Unsplash
    The post also used Photo by Jon Tyson on Unsplash

Liked this post? Share:
« Older posts

© 2021 KAT CODES

Theme by Anders NorenUp ↑