journey through web development

Tag: resources

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:

Learn to code for free

Some time ago, during one of our uni lectures, my friends and I were trying to list websites or apps,
where you can master your coding skills for free or really cheap.
As current lockdown force us to stay indoors (and please do! for everyone’s good 🙏), I thought I will recreate that list and share with you all.
After all, when is the better time to learn something new?

  • Codecademy
    codecademy.com website

    Codecademy is, in my opinion, the most popular website to start your coding journey. A lot of content is free and the learning process is gamified, so it doesn’t feel like learning at all! Every time I want to learn a new language, I look at codecademy to get myself familiar with the syntaxes and basic rules.

  •  FreeCodeCamp
    freecodecamp

    As the name suggests, freeCodeCamp is completely free. It has a lot of fans all over the world, but for me personally, it’s been a bit.. clunky and not as user-friendly as other sites, so I didn’t stay there for long. What I loved there though, is earning the certificates and badges! ( who doesn’t like them, right? They always give a nice motivational boost.)

  • Udemy

    udacity

    Different type of learning, but totally worth mention- udemy.com. Platform full of tutorials on all sorts of topics, not only programming. For those of you, who learn better while listening rather than reading (not me, unfortunately 🙁 ) They always have some sort of discounts going on so it’s easy to get a great quality course at a great price (free ones also available).

  • SoloLearn (APP)

    My second favorite learning source! The main plus- it’s an app! So you have it always with you on your phone. Whenever you have some time to spare, open the app and learn! I loved doing the quizzes about different languages to cement my knowledge. The app and its content are free and I highly recommend downloading it. Instead of mindless scrolling through Facebook or Instagram, SoloLearn!

  • Pluralsight
    pluralsight

    Great source of courses, and for the whole of April, all the content is FREE for new accounts! U can choose a single course or follow a particular path to master your skills. With technologies from Web Development, DevOps, Data, Architecture&Construction, Manufacturing&Design, Cloud Computing, Machine Learning, Bussiness Professional, Cyber Security, and Creative Professional, I am sure everyone will find something interesting to follow.

  • w3schools

    w3schools

    Every developer’s good friend. No matter if your a junior or senior, w3schools is probably the first source to look at when you’re stuck. It’s not fancy but 100% free and nicely explained. Oh! And you can get certificates too!

UPDATE:
A Few more cool websites that will help you learn for free! 

https://javascript30.com/


30 JavaScript challenges in 30 days (of course there are no strict rules that you have to keep to the time frame :D) Video tutorials from Wes Bos are easy to understand and follow. I have done a few projects from JS30 challenge myself and really enjoyed them. I recommend this to anyone who would like to get better in JS.

https://www.theodinproject.com/

The Odin Project is a really cool open-source platform, where you can take different paths to learn to code for free.
Currently, there are three routes to take: Full-stack Ruby on Rails, Full-stack JavaScript and Front End only. I will definitely start one of them soon, as it seems to provide good knowledge forwarded with loads of projects to do to add to your portfolio 🙂 Instructions are easy to understand, boosted with images and snippets of code.

https://www.codewars.com/

CodeWars is great to test your knowledge and problem-solving in action. With lots of languages and technologies to choose from, everyone will find something up their street.
I think this would also be good preparation before a job interview!

Scaplisum

Ok, so not a typical learning platform, but my good friend and awesome developer Vlad, has created this amazing IG community, and he posts his valuable content daily.
You will learn how to create a live search, infinity scroll effect or how to animate an icon and many many more, and you will realise that stuff you thought is difficult to achieve, is actually pretty easy to do! (at least I have realised that multiple times :D)
All you need to do is follow @scalipsum on Instagram, and if you would like to be a part of this great, ever-growing community, you can add yourself to the Discord channel too. Scalipsum also has a GitHub repository for all posts: https://github.com/scalipsum/insta-posts
I like the idea of learning something new while scrolling through your Insta feed, and that every post focuses on one particular feature at a time.


Or course there are a lot more websites providing good quality knowledge, but they come with a bigger price-tag. To name a few:

Liked this post? Share:

© 2021 KAT CODES

Theme by Anders NorenUp ↑