UX/UI Design + Figma

Improve your workflow. An article by moonlearning.io

Figma, by now, has an extensive list of plugins to get lost in. Quality and update vary greatly. However, once you got the right set, they will improve your UX/UI Design significantly. So to save yourself some time, here is a selection of my favorite plugins worth your while.

Vectary 3D


The 2020/21 winter vacations were a little different for most of us. So if you’re one of the lucky ones who can snuggle up at home and wait for sunnier times, here are some favourite UX/UI design reads to get you ready for 2021:

Books

Yup, the real thing made of paper like in the old days (well or on your Kindle). I still love them, and they are just a bit more comprehensive than a quick google search.

1.Laws of UX


UI +Figma

by moonlearning.io

The original Figma auto layout was released in 2019. Already a nice feature but to be honest, I did not use it too much in my everyday work except on the obvious button or main menu. My main reason was that it went a bit crazy with responsive constraints which I use a lot. Now, this has changed for sure with the latest release in November 2020.

A reminder: What auto layout is/was all about

So to recap, auto-layout basically it lets you create dynamic frames that react and resize according to their content. I am sure you have seen the classic button example. Create a…


Design to Development handoff can be, let's be honest, quite painful. No tool alone will ever be enough to throw some work at your development team and get an amazing result. There is nothing more important than working in a team, exchanging, asking and listening and learning during the collaboration of design and development. BUT there are great tools, tips and tricks to make this process much more efficient.

Part 1 — Using Figmas Version History for structured file handoff

In case you have not noticed, I am a huge, huge Figma fan, and you can find free basic and advanced Figma tutorial in my past articles. One of my favourite…


UI & Figma

Can’t draw? Use Blush!

Made with blush.design

What is Blush?

Blush is a new online tool created by Pablo Stanley that holds a collection of high-quality illustrations from selected artists around the world. The special thing about it is that unlike most other stock imagery, you can fully customize the illustrations, and they are simply stunning! They come in a sort of building-block-system.

Blush It is basically like Lego for Illustration.

Remember the day you discovered Unsplash for photos? Yes, it's a bit like that but for illustration.

Figma and Sketch Plugin

You can play around with the illustrations in the web app, but it gets even better because you can customize everything directly…


UI & Figma

Speed up your workflow, an article by moonlearning.io

Figma, basically the greatest thing since sliced bread and so fast! After a short intro (click here for beginners course), you can jump right into designing. However, Figma also holds a few hidden gems I would like to share with you to improve up your workflow even further. For more online courses, tips and tricks, also visit moonlearning.io.


UI & Figma

Umfassendes Tutorial in 15 Minuten

English Version click here 🇬🇧.

Dieses Tutorial ist für dich, wenn du mit Figma bei null beginnst, von Grafikdesign zu UI wechselst, oder wenn du (wie ich) von Sketch umsteigst.

In den letzten Jahren habe ich Sketch von ganzem Herzen geliebt, und ich bin immer noch ein großer Fan. Doch wenn es um die Zusammenarbeit im Team und die Übergabe geht, begann ein schmerzhaftes Springen und Aktualisieren zwischen Dropbox, Abstract, Craft, Zeplin und InVision. Welche Kombination ich auch immer benutzte, es endete leicht chaotisch und verursachte zusätzliche Kosten. Das Prototyping ist ebenfalls ein wenig klobig. …


Comprehensive beginners tutorial in 15 minutes

German version click here 🇩🇪

This tutorial is for you if you are starting with Figma from zero, switching from graphic design to UI, or if you are (like me) switching over from Sketch. If you are looking for more advanced Figma tips and tricks click here.

For the past years, I have loved Sketch with all my heart, and I am still a great fan. However, when it comes to team collaboration and hand-over, a painful jumping and updating between Dropbox, Abstract, Craft, Zeplin and InVision started. Whatever combination I used, it ended up slightly messy and caused extra…


E-learning platforms

Which platform you should use to create and sell classes online.

Offering online courses is a great way to earn passive income. As e-learning becomes more and more popular and sales are skyrocketing, more tools are becoming available.

While building my online course about Webdesign (stay tunes, launching soon), I became a little overwhelmed with all the possibilities. I was looking for an all-in-one platform to help me create and sell courses online and handles everything from web hosting to payment processing so that I could concentrate on my content. I spent a lot of time researching and trying out different options. Here are my personal three runners up I would…


3 Ansätze, mit vw-Einheiten

Warum Viewport-Einheiten (vw)

Du bist es wahrscheinlich gewohnt, Typografie manuell einzustellen und Breakpoints zu definieren, was normalerweise zu einem etwas holprigen Ergebnis führt. Frei fließende Typografie (oder Fluid Typography wie wir sie hier nennen werden) orientiert sich am Browser Fenster und passt die Schriftgröße automatisch an die Breite des Viewports an. Heutzutage haben wir eine Unzahl von Geräten mit unterschiedlichen Größen, mit Hilfe der vw-Units können wir ein harmonischeres Design unabhängig von der Bildschirmbreite schaffen. Außerdem bietet die Gestaltung mit vw-Units unendliche Flexibilität in Kombination mit neuen Grid-Standards wie z.B. CSS Grid.

Christine Vallaure

Berlin-based UX/UI Designer with a passion for code. Currently creating www.moonlearning.io an online learning platform. Sign up for more!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store