Figma tutorial: Masks

masks are used to reveal specific portions of layers while concealing the rest they're similar to image fills but offer added flexibility such as masking multiple objects and utilizing images with alpha channels or transparency values this opens the door to using different effects or images with transparent backgrounds as masks and allows us to create a wide variety of assets from avatars to animations in this video we'll go through how to create a simple mask the differences between masks and image fills alpha channels and advanced designs combining masks with other features to follow along click the description below for a copy of the masks playground file from the figma community to show how masks work let's use the classic example of creating an avatar we'll start with an image and an ellipse to use as our mask place both these objects on top of one another and place the ellipse behind the image select both items and click the mask button in the toolbar this creates a mask object inside a group with the bottom layer acting as the mask and the object it is masking directly above it the image and ellipse aren't quite centered and the image is too large for the mask the layers of a mask object can be repositioned and resized independently of one another so let's adjust them by clicking and dragging the image and ellipse mask and using the handles of their bounding boxes to resize any object in figma can be masked or be used as a mask and are not limited to shapes and images alone let's take a look at using text as masks by creating a simple poster first we'll create a frame with the fill add a few vector objects and include some text since we want the text to mask the image we'll place it behind the objects using send to back next let's select all the items and click the mask button in the toolbar looks great the text mask still acts like a text layer so we can always change the copy in the future if we do different parts of the objects being masked are revealed when it comes to creating objects like avatars or patterned text we have the option of using image fills instead of masks image fills use fewer layers and you can resize and reposition the image using the crop tool image fills applied to text also respond when you update the copy so when would we want to use masks instead of image fills as the name suggests image fills are great for image objects masks are great when more complex designs are required particularly when you want to mask more than one object as demonstrated by the poster we made for ease of repositioning and resizing the mask and the objects being masked and for utilizing alpha channels alpha channels allow you to change the opacity level of an image object or set of pixels if you've used rgba values in design or code you may recognize the last letter or position as a transparency value or alpha channel because figma masks support alpha channels you can use images and gifs with transparent backgrounds as masks as well as drop shadows and layer blurs let's take a look at a few examples we want to mask a colorful forest image using a portrait image containing a transparent background place the portrait behind the colorful forest image select both objects and click the mask icon in the toolbar the colorful forest image takes shape according to which portions of the portrait image are transparent and which are not instead of using the outline of the entire image another method of using alpha channels for masks is layer blurs and drop shadow effects when applied to masks these effects behave differently than when applied to layers not being used as masks for example if you apply a drop shadow to a non-mask layer such as an image you can update the drop shadows colors independently if you apply a drop shadow to a mask however the drop shadow also acts as a mask working to reveal and conceal certain parts of masked objects based on opacity levels the higher the opacity the more the objects show through the lower the opacity the less the objects show through at zero percent opacity the objects won't show through now let's see how we can combine masks with smartanimate to turn our masked objects into a cool animation to do that we'll bring our poster example back we want to make the poster come alive where the patterns move in and out of the text mask from different directions first select the entire frame and duplicate it connect the two frames together in the prototype panel and set the animation to smart animate ease in and out back and 1500 milliseconds in the original frame center the text layer vertically and horizontally and change the frame color to white select the objects being masked and move them to different positions outside of the mask visible area once we're done we'll click present in the top right hand corner to view our design in presentation view looking great whether you're creating marketing assets heroes for your web page prints or animations masks and figma are a powerful and flexible tool that expands what's possible for your designs alpha channels allow you to use detailed shapes and effects as masks and combining masks with smart animate can lead to captivating animations for gifs apps and more what possibilities will you find with masks be sure to like and subscribe to keep up to date on the latest product and community news thanks for watching you

Channel: Figma

Views: 325,371

Keywords: tricks, UI design, ux design, app design, figma design, design for figma, Figma tutorial, tutorial figma, Masks, Masking, Adding a mask, Figma mask, figma mask tutorial, how to mask in figma, masking in figma, masking, apply a mask, figma masking, product:figma_design, audience:designer, language:english, format:standard, produced_by:product_education, theme:basics, event:none, series:figma_tutorial, type:feature_tutorial, level:beginner, primary_feature:masks, secondary_feature:

Id: tUcBcz8bjVs

Length: 6min 35sec (395 seconds)

Published: Mon Jul 26 2021