3 Lesser Known Figma Concepts that You Should Definitely Know 💻

1. Inverted Behaviour

We all have studied basic geometry in school and in most cases, we believe that this is how all axes work:

but things work differently on Figma. Create a New Page and randomly paste any frame. Check what values you get on the right side

Let’s see what happens if I shift a copy of this frame. I will increase the X-Axis value from -1059 to 0. I’d expect it to go right because that is where positive X-Axis should lead. This is what I see:

Increasing the X-Axis value shifted my frame to right, just as expected.

Now let me increase the Y-Axis value from -1304 to 0. This is what I get:

Increasing the Y Axis shifted my frame in the lower direction (opposite to what I’d expect)

This is because:

👉 Figma represents a layer’s position on the canvas using X and Y coordinates that begin from top-left corner of the layer's bounds.

How does this affect your Design process?

Because if you are trying to adjust your position via manual nudges, your conventional thinking would probe you to add 10px to lift your frame. Whereas in reality, adding pixels would pull it lower on the canvas.

Be careful when you add pixels to vertical nudges, they behave contrary to what our homework taught us.

2. CSS and Figma interpret Rotation differently

Most people expect a layer to rotate clockwise as the degrees increase (a lot of Design Softwares still follow this)

Rotating by 15° would move your layer Clockwise on Photoshop

But things are different on Figma.

Increasing degrees would would rotate your layer anticlockwise, opposite of how your gut would say or how it worked on Photoshop:

Rotating anticlockwise with increasing degrees.

and here is where things get interesting. Let’s just say I’ve rotated my layer to 170° and I wish to rotate it by 15° more. I’d expect to get 170° + 15° = 185° but instead, this is what I get:

Ohh, since when 170+15 become -175?

that is because:

👉 Once you pass 180 in either direction, Figma will count down towards 0° in that direction.

Interesting right? You can read more here. I’ve made a fancy illustration to show you how Rotation is calculated by Figma:

I know, pretty different from what you’d expect.

How does this affect your Design process?

Figma uses a CSS transform property called ‘rotate’ to apply rotation to a layer or selection. This means that when I rotate something by 30° in my design the Inspect Panel of Figma would say something like this:

Interesting. CSS thinks I’ve rotated my layer by negative 30°. That is because just like Photoshop, even CSS believes that positive rotations are clockwise. You can experiment with the CSS property here:

This one subtle difference can heavily influence your Handoff Reviews

These things help you make sure the gap between you and your Developers is reduced. Figma knows that they follow a different convention and that is why their Inspect Panel adjusts accordingly.

3. Pre-fed X11 Colours

We all know that Figma already has open source Google Fonts. But very few people know that they also include X11 colours from conventional CSS.

Instead of Hexcodes, simply type in their name

This is really helpful during quick prototyping with random shapes. Instead of opening the colour picker, simply use X11 colour names (without spaces). They save you a lot of time during brainstorming sessions

Pro stuff

But careful ⚠️

There are some non-intuitive X11 Names as well:

in X11, ‘darkgrey’ is actually lighter than ‘grey’

They sometimes have inconsistent naming too:

If there is a Medium Violet Red, what happened to Violet Red?

Special thanks to Anthony DiSpezio from Figma for sharing these X11 nuggets in one of his Office Hours videos.

I will end this article here because I want you to absorb things slowly. We will cover many more interesting details in the upcoming articles ✏️

Hi! My name is Ansh Mehra and I’m a UX Designer & Storyteller at Zuddl.com, which is a virtual events hosting platform backed by YCombinator. This article is a part of my Foundations for UX Design Series. You can watch one of the episodes here! 📺

shared some really helpful tips here

Follow me on Instagram for some really interesting stuff on Life, Design and the Beyond. I also host a Podcast called “Take it Easy” on Spotify 🎙