And we're back for the second round of all tips i know you were so excited about the last one
we'll get excited about this one i'm packing as many tips as i can
into this single session of Figma in five
Now what if i want to swap out this icon in this button instance i can simply just choose the icon
here from the swap instance menu and i can swap it out but what if i want to change it out from this
assets panel here and i do a search i can simply hover over and by holding option and command
you'll see that nested instances will swap out here's a quick tip for preserving icon colors when
you swap them out let's take an instance of this repost icon i'm going to change the color here
to a gradient now let's say i'm a designer and i want to change this to a different icon here's the
frustration that icon color is not preserving it's just swapping to the other icon the reason for
this is because the layers are named differently and the way the figma works is it actually
preserves the fill on similarly named layers so if i take both of these together here and i just
create a union of them notice the layer's name is union and i've created a unit of all the things
with the bell i'll do the same thing i'm going to create a union of all of them and now they're both
named union so let's go back here to this icon let's change out the fill and let's see if the
swap works indeed the swap works and the color overrides were preserved here's some fun little
tips for some modifier keys while you're drawing objects so if i just drag a circle on the screen
you can see here it's like this but if i draw a circle on the screen while holding shift you
can see that it constrains proportions now if i hold spacebar while i'm drawing i can actually
draw then drag this object mid creation on the canvas another thing i can do is i can actually
draw a circle from the top left corner by just dragging but if i hold option i'll actually draw
that circle from the center let's say you want to drag something over a frame but you don't want it
to automatically nest in this frame like figma's doing here if we start dragging and hold space
while we drag it will prevent nesting in the frame as you drag an element over it if you're
ever working with text like this in figma that has a fixed width or fixed height you can always
just go down here and click auto width and it'll change it to honor the exact width and height of
the text now a shortcut to that would be to just double click anywhere on the blue selection box
around the text area and automatically convert that okay in figma we already know that we can
do union of objects so i can take these two vector shapes i'm going to take them and take
the union of them which will take the addition of one object to another on that union i can now
add additional properties like border radius to the entire union of the thing or maybe i
can come in holding command clicking around and maybe resizing the objects within that union now
one thing i learned that blew my mind you can do unions with components so i can actually
take boolean operations like this heart in this house put them together and union them together
this was mind-blowing when i first learned it i can literally take this bell icon and drop it
right into here in the layers so into this union drag it in and notice how it quickly took on
the fill and the border radius rounding of this whole union pretty mind-blowing that you can use
components inside of unions it gets wilder from here because we can actually take text and put
this into a union with this rectangle here now i've applied this fill on this but notice that
this text has rounded edges here it's a little bit soft that's because i've applied a border radius
to the entire union you can actually subtract that out and you'll see that it's just enter here but
in this way i can actually add in a subtle round radius to this but still keep this text editable
in the same way i've actually created a union around this text and normally this text will
sit very low because it's honoring the baseline the g the descender of the g is dropping below
that baseline but if i put it into a union i can actually perfectly center any glyphs here
within this auto layout frame you can take two objects and group them with command g but you
can also frame the objects by hitting command option g always hitting command shift g will
ungroup let's say we're diving in on a design but we want to be able to see everything that's on the
canvas all we got to do is hit shift one and figma will zoom to fit everything that's on the canvas
in fibo we can always drag images right in off the desktop but we can also use this place image
command to be able to select multiple images and bring them into our documents however we'd like
now we can click and drag to place an image we can also just place an image however big that may be
but we can also choose different areas that have fillable regions and change the background of
those by clicking and placing images a typical resizing behavior for a frame like this might be
something like this now did you know that we can actually add a columnar grid to this and
then by setting each child item to left and right constraint these child items will actually honor
that layout grid so watch as i resize we can see now the gutters and the margins are honored
something that i love about figma is that any property here is copy pasteable so if i come in
a highlight here i can see the blue highlight if i hit command c and then on any other frame i'm
actually copy pasting that grid style in here this works with everything so if i have an image click
here get that blue highlight and paste here you'll see that we can copy paste specific properties did
you know that you can change your background color of your editor just by clicking on the canvas and
changing that background color additionally if you don't like the default color of a prototype
background you can go and change that color as well and see that prototype instantly update
want to design super zoomed up while still seeing 100 preview just do a new window set it over to
the right open the same file and then of course figma you can preview those changes like this
let's say we're resizing this icon we resize it and we're noticing that stroke is not resizing
with the size of the icon simply hit k or go into scale mode and in scale mode it'll actually resize
proportionately and that's a wrap for this episode of figma in five feel free to subscribe because
next week we're dropping a brand new episode all about design systems hope to see you there