In this super exciting article, we will try together to make your websites installable.

Webflow is the future of the future! What a paradox! You can design simple websites and even if you’re already a developer, you can create complex websites too, to steal all attentions.

Main IMG — Article’s cover

Even if Webflow lets you develop websites easily, this app is not helpful in case you want to make PWAs (Progressive Web Apps). So, you have two options:

1- Wait for them to release this feature

2- Do something to change the world!

In case you’re one of those world changers, I will help…


Designing advanced animations for the web doesn’t need advanced tools. Let’s create one of the most advanced ones using Figma.

If you are one of my followers or you have read my previous articles, you know Figma is my daily driver as a designer and I rely on it for anything I’ve faced with.

I have already published an article for Figma to explore an easy way to design advanced animations for the Web. So, let’s continue this trend and take Figma animations to the next level!

BTW, please read the previous article in case you want to learn more…


In this article, we learn together how to recreate and design advanced interactions for large screens and websites using Figma.

Cover Of article

Figma has been updated recently and the new features made this app “Perfect!” for designers and even people who design low-fi prototypes. Without wasting a lot of time, let’s learn how we can recreate some advanced interactions together for Web using the native features of Figma.

Sit tight! We explore the first animation for websites.


In this article, you will learn how to design slider animation with Webflow without using codes and JS libraries!

After publishing several articles for Figma fans, it’s time to switch to Webflow to learn something new. Webflow is one of the best web design tools and if you like or not, you must learn it very soon because, in future, it would be a norm for designers to design real websites on tools such as Webflow.

Before we start, you must learn these terms:

1- Div Block
2- Container (I don’t use containers for most projects because you can achieve…


Figma is one of the amazing design tools and if you use it as your daily design app, you need to learn its shortcuts which speeds up your workflow.

Hello again, It’s Em!

In this article, we will learn the most useful shortcuts of Figma which can speed up your workflow.

1- Batch Filling Shapes With Images

Imagine you want to fill different shapes with multiple images at once. Beginners will start filling shapes one by one but professionals will use the “Batch Image Import” feature which Figma provides.

Follow these steps:


In this article, we will check which design tool is more capable to be used for designing a scrollable list and prototype it.

Hello again!

I decided to work on a new series of articles which compare two powerful design tools which are very popular these days (Sorry Sketch! You’re out of the list for now!). As you’ve guessed, We will compare Adobe XD (Adobe Creative Cloud) with Figma to see which one is better for designers and people who are looking to create prototypes for their designs.

In the first article, we will check which one is better to…


Figma is one of the most popular design tools these days. But how can you design advanced loading bars using the “Smart-Animate” feature?

If you read my previous article about “Figma”, I explained how you can recreate some advanced micro-interactions for your projects using Figma and “Figmotion” plugin. But let’s forget the plugins and use only the native features of Figma.

In this article, I will re-create the most useful loading bar that you may see as a UI designer. …


This story will cover how you can use Figma to design “resizable cards” by using the “Auto-Layout” feature.

Before I start, I must say this article would be useful for designers who read my previous articles or it can be a challenge for designers who think they know too much about Figma!

Everything about resizable components

Figma: Learn Auto-Layout

Since I prefer to re-create the components that we see them every day, I will use “Samsung One” user interface as a reference and recreate 3 cards of Bixby Home. …


Figma recently released a new feature: Auto-Layout. This feature helps you to create resizable components easily. Let’s learn it together.

We (designers) are all having a problem with manually resizing our design content. Imagine you created a new button which has a label text on it: Sample text. Now, you want to change its label to “Click here” but the size of the button is not correct and you need to change its size manually.


Figma is one of the most interesting design tools and these articles will help to start designing immediately.

Hello everyone! I’m back. First, I must say “Thank you” for your messages about my previous article which was published for Figma:

Figma: Recreate the most useful interactions using Figmotion

Em Design

A passionate designer who designs digital experiences for mobile phones and websites. — — — — — — — — — — — — www.wearemoonlight.com

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