No items found.
No items found.
Wall of Love
Roadmap

How to interweave text and imagery in Figma & Webflow

Key points

Topics

Brings a 3rd dimension to an otherwise flat visual. A fantastic way of creating visual interest to capture attention.

Creatorfuel helps you master high-value skills of the digital era. Learn more.

weekly creatorfuel
Actionable tips & tools for creative minds.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.
weekly redesigns
Learn design through redesigns
Every Tuesday, I redesign something you send me and explain my exact thought process
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.

What we're creating:

Figma tutorial

We're dealing with 3 layers

To make this happen all we need is the image, the text placed on top of that image and and a duplicate of that image with the isolated overlapping parts visible.

1) Create a frame, add the image and position some text on top

Position the text and image in such a way that anticipates which parts of the image you want overlapping the text.

2) Isolate the overlapping parts

Feel free to use any background remover that will allow you to target specific parts of an image. I used Photoshop.

Here's what I did:

  • Enable quick selection tool and select the parts you want isolated
  • Create a mask from your selection
  • Export as PNG

Here's what I ended up with

3) Overlay the isolated image

Make sure the isolated image has the same exact position (same x and y values) as the original image.

4) Make it responsive

If needed, feel free to add constraints to the text and imagery to make the layout responsive.

You can also add auto layout if the layout is going to evolve

Break text alignment like I did by wrapping individual rows of text in auto layout frames and adding unilateral horizontal padding. Play around with it.

Done!

Definitely an odd layout but it was inspired by some edgy (but super beautiful) poster design so what did I expect? 🤷

Webflow tutorial

1) Add a section and a background image

Set the size to 'Cover' and centre it. Turn off tiling and make sure it's not fixed.

Enable position relative for the section. It'll allow us to then overlay the isolated flower image.

2) Add text to the section

3) See Figma steps above for how to isolate parts of the image

4) Add the isolated flowers as an image element to the section

Give this image a position of absolute and make sure you have the following settings in place:

  • Width and height at 100% (the section being its parent)
  • Fit: Cover
  • Top, Left, Right, Bottom absolute properties all at 0%

5) Space text elements as desired

We can no longer interact with text though 🤔

The image that sits on top of the text prevents users from being able to to highlight text with their cursor.

We need to force the cursor to ignore this image and click "through" it.

Webflow's 'Cursor: None' doesn't work 😦

All this does is hide the cursor on hover. Not going to work for us.

We need 'pointer-events: none' which is not built into Webflow's no code UI. We'll have to add some custom code.

6) Add custom code – 'pointer-events: none'

Add the following to an embed or to the body:

.element-class {

pointer-events: none;

}

Users should now be able to click through the top image and interact with the underlying text.

Done!

weekly creatorfuel
I share tips & tools every creator should know.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.
weekly redesigns
Learn design through redesigns
Every Tuesday, I redesign something you send me and explain my exact thought process
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.

Fresh Youtube videos

Random

Reflections

Have you forgotten about the fundamentals?

I’ve learned that no amount of coaching, fancy apps, “creativity hacks & tips” etc, will make up for:

  • Subpar sleep
  • Low vitamin D3 (lack of direct sunlight exposure)
  • Lack of movement (sports, resistance training, cardio)
  • Poor diet (macro and micronutrients)
  • Nonexistent stress management

Get these right first.

They are the highest impact things you can do.

Ignoring these is like a student ignoring the fundamental concepts needed to ace an exam and instead focusing on color-coding their notes, using fancy study apps, and organizing their study space with intricate decorations.

Master the basics. Everything else falls into place.

...read full post
Aug 15, 2023

Nonfiction books are too long

Most nonfiction books should've been 1000-word articles.

I find myself abandoning a lot of books right around the 25-30% mark.

Not because they're bad, but because I fully get the gist by that point and it's right around when the repetition of examples and ideas begins.

I'm okay with abandoning a book midway now. Just a couple years ago, I would power through the whole thing in fear of missing out on some crucial ideas in the later chapters.

Now, I just have fun with it. If it piques my interest, great – I'll buy it, read the chapters that seem interesting, get what I came for and move onto the next one.

I think a lot of these authors are just trying to meet some sort of quota. I dunno.

There's elegance in brevity.

...read full post
Aug 14, 2023

A note on this weird cold plunge trend

So many of these "gurus" telling us to take cold showers and cold plunges 😂 😂

If you’re tired all the time:

  • Go get your bloodwork done and see what you’re deficient in
  • Get outside. Get some damn sun
  • Sleep well
  • Use your mind to build something – It'll energize you

Stick to high-impact basics. These little micro-optimizations aren't going to change anything.

Enjoy your hot showers 🔥🚿

...read full post
Jul 21, 2023