figma-pass-through-vs-normal

Introduction

Are you a creative designer who wants to add more depth and interest to your compositions using Figma? In this case, you need to learn about its two blend modes! Pass-through mode allows you to directly edit the layers below the current one, while normal mode maintains the integrity of the layers and provides more control over the appearance of your design. 

But how does the pass-through blend mode compare to Figma’s normal blend mode? In this blog post, we will delve into the differences between these two blending modes, exploring the pros and cons of each and providing tips and tricks for using them in your designs. Whether you’re a seasoned designer or a newbie, this post has something for everyone. So let’s get started and discover the power of Figma’s pass-through blend mode!

The Basics of Figma Pass-Through & Normal Modes

eight-flower-vases-with-flowers-in-it-illustration

Figma provides two different modes for the ‘Layer’ option for Figma designers: pass-through and normal. 

The pass-through is the default blending mode in Figma that allows the pixels of the top layer to “pass through” the pixels of the bottom layer, making the top layer partially transparent and allowing the bottom layer to show through.

The normal blend mode in Figma is a basic blending mode that simply displays the top layer of an image on top of the bottom layer, completely obscuring the bottom layer. 

When You Should Use Figma’s Pass-Through & Normal Modes for Design Workflows

At this point, you must ask yourself how these two layering modes can add value to your designs. Well, we have made it easy for you to comprehend.

red-circles-blending-together-modern-design

When to use Figma pass-through mode

  • When you want to create a design that has transparent elements.
  • When you want to blend two elements together in a way that is not possible with the other blend modes.

When to use Figma normal mode

  • When you want to create a design that has a clear hierarchy of elements.
  • When you want to make sure that a particular element stands out in your design.

Exploring the Pros & Cons of Figma’s Pass-Through & Normal Modes

Pass-through mode

Pros

The pass-through blend mode allows you to create more complex compositions by blending the pixels of the top and bottom layers together. It can be used to create a variety of special effects, such as making the top layer appear to fade into the bottom layer or creating a cutout effect.

Cons

The pass-through blend mode can be more difficult to understand and use than the normal blend mode, as it requires you to consider the transparency of the top layer and how it will interact with the bottom layer. It may not always produce the desired results, depending on the specific pixels and colors of the top and bottom layers.

It may require more time and effort to achieve the desired effect compared to using a different blend mode.

Normal mode

Pros

The normal blend mode is easy to understand and use. It is the default blending mode in Figma, so you don’t have to change any settings to use it. It is a good option for quickly and easily creating simple compositions without worrying about blending modes or layer order.

Cons

The normal blend mode does not offer any special effects or blending capabilities. It simply displays the top layer on top of the bottom layer, completely obscuring the bottom layer. If you want to create more complex compositions or apply special blending effects, you will need to use a different blend mode.

faded-colors-glass-looking-edit

Best Practices for Using Figma’s Pass-Through

Some of the best practices for using Figma’s pass-through are 

1. Use Figma’s pass-through to create placeholder assets or assets that are needed for prototyping purposes. 

2. Create prototypes and design comps in Figma and then export them as images or PDFs so that they can be imported back into your project later on. Figma exports the design as an SVG image which can be imported back into your project later on.

3. Keep the design comps separate from your project. If there are changes that need to happen to the design comp, you can make them and then import the new image back into your project.

4. Use Figma’s pass-through for prototypes for complex screens and other types of interfaces to keep it in one place and not have multiple screens cluttering up your main application’s interface with huge files.

5. If you have a complicated vector file, use Figma’s pass-through as a way of exporting individual components as images which can then be imported back into your project later on when necessary.

In Conclusion

To wrap things up Figma’s pass-through and normal blending layer modes offer unique and powerful capabilities for creating and editing designs.

Ultimately, the choice between pass-through and normal blending modes will depend on your specific design needs and goals. However, by understanding the capabilities and limitations of each mode, you can make informed decisions that help you create professional and effective designs. 

If you found the blog helpful, please share your thoughts with us in the comments below! Also, if you’re a Figma specialist, we’ll be happier than ever to learn from your experiences!

How useful was this post?

Average rating 4.8 / 5. Vote count: 41

No votes so far! Be the first to rate this post.

LEAVE A REPLY

Please enter your comment!
Please enter your name here