Key Takeaways: Learning to Create Linear Gradients on Figma
The tutorial was first brought by Fons Mans on his Twitter and Figma’s Instagram account. He also shared the design file on Figma Community.
⚠️This is based on my personal experience.
So, what is this all about?
Well, I found it hard to create mesh gradients or gradients in design.
Adjusting and blending two or three colors into something beautiful is gonna take time for me to learn and understand. Like “How can I create these two?”
Especially when Linear website is appearing on my timeline the other day, it went viral because how gorgeous and eye-catchy it was. I was wondering
what kind of person who can design this so great?
Then I try to learn and follow some people that share about How to Create Gradients on Figma with their tutorials on thread. But, when I tried by myself while also reading thorough their guides, somehow it needs a little time understand because they didn’t explain that details.
And this is how I learned
First of all, I read more than two times just to make sure I already understood with the tutorial. Then I tried to design on my canvas in Figma.
You can do this too after reading my article,
because I just shared my experience with a detail guidance after tried it and explained what challenges that I have been faced and how I made it.
I followed step one, two and then confused
After creating a rectangle and change the fill into angular gradient, it was really dumb of me not reading the tutorial a whole. I just read “change into gradient”.
Then I explored by myself, and found an angular because I basically just saw the visual and not reading the tutorial seriously, but I learned my mistake there.
I didn’t see the real file first, I’m just guessing with the color HEX and the opacity.
However, the tutorial is just telling in a simple way like “Create a rectangle, change into angular gradient, and so on”. But not telling us as the reader, what should we do after doing that?
How many opacity we should change, and what color we should change?
That’s my question during the process.
I made it without seeing the real file
I realized that I copied the real file just to see how he made it.
When I discovered by myself, I almost can imitate like the original work. I jot down a couple of details that he didn’t stated so that people later can do this also
See the image I attached here.
In the step four, I confused again
Maybe this is because of my lack reading comprehension. When I finished the step one and two, I’m dazed while reading the instructions of “mirror the rectangles”.
The funny is, when I just click right on my mouse (⇧ + H on your keyboard) and voila it flipped horizontally.
I spent about 20 minutes or more just to make it right, also I couple times mumbling — Where the heck should I put this mirror rectangle so it can be the same like tutorial?
Well, we sometimes did that right when try to follow the tutorial?
And I found a solution by dragging the rectangle from its original work. Then laughed.
Then I learned again …
“Well, this is why people told to Work SMART not HARD”.
The next step is finally running smoothly
It was fun when I’m able to face the challenges and solve my own problems.
As I stated earlier, the tutorial doesn’t give a detail information. Also you must find a way to craft while following the guidance.
But, don’t worry! I covered it up for you.
- Add rectangle and apply Background Blur for 200 and Layer Blur for 132
2. Create a circle with following width and height (see the image)
3. Apply the Layer Blur for 554 and change the Layer into Screen.
4. Let’s change the different color! Create a rectangle with HEX color #00FFF0 and change the Layer into Color.
5. Put it inside the frame and it will turn into overlays. Now you made it! ✨
After reading this:
1 — Subscribe to this newsletter if you find out useful.
2 — Share this to your social media or friends. This newsletter update every Tuesday & Thursday.
3 — Support or Like this article! It will help me to grow if my article is useful and interesting enough for you to read more about this kind of one again.
