Design Doodles

Designing when doodling. Doodling while designing

recent posts

about

Learning Figma

Learning Figma

While I’m not a beginner with Design tools, and I have been using Figma for over a year or more, I never took the time to understand the basics and build my knowledge from there.

Instead, as time and responsibility pressure mounted, my design work changed to team leadership and strategy. When I used Figma, I was reviewing designs created by my team members.

Now, while exploring new opportunities, this is the right time to start bottom-up. I’m keen to share my progress and understanding when training via online tutorials. When learning, I am always thinking as a designer. What would I use in my own designs and strategy, what would I never use, and what are my own design principles that apply here.

The first Figma YouTube movie I watch, is already from 2019. At that time I was still busy in Adobe Illustrator and making a first few steps into Sketch (but not even sure about that). See the bottom section for playlists and tutorials I watched while adding my notes in this blog-post.

Highlights

These concepts brought a smile to my (designer) face.

Systemic thinking

Figma means having a systemic design approach. You can re-use other libraries that need to be found, selected, and moved into your project. Normally, standard copy-paste from another file would be easier, if it was only you, but since you are designing ‘in a system’ you have to think about ‘others’. It is an interesting mindset change for many designers, I wonder if this also stops the difficulty of using other’s design files.

Components and instances are an example of systemic design approach and related to the Design Systems we have nowadays.

Smart affordances

I’m always a fan of UI’s where the action and object of attention are close to each other. Somehow it feels elegant, even though it is logical. With the Figma plug-ins being available by clicking on an object that uses that plug-in, it does this really well. A plug-in ‘might’ sound like a remote tool, but placing its access right where you need it makes the UI feel harmonious.

As well, I do appreciate when a simple indication is being given to show the state of something, like a color outline. Showing the difference between a normal element on screen with a blue highlight, and a purple highlight for a library component, is such a simple but useful low-cognitive-load solution. Once you learn it you can’t make it unseen again! By the way, what is also striking, purple seems to have become the de-facto color of system intelligence, like AI or Design system libraries.

Smart behaviors

Smart behaviors help you appreciate the application even more and give you a SPARKLE moment.

For example: I already knew typing “FFF” and “000” for quickly getting white or black colors. But it turns out even simpler, just an “F” or “0” applies! I’m not sure if that is common to other tools as well, but when seen in this application is shows that nice little detail that people thought about making your life easier. When seen first in this application, you also associate this, and other system smartness

In the same context, I like the Ungroup action. In my other applications, I’m used to having content just being ungrouped, but in Figma this also reverts certain actions you did to that group, like auto-layout or boolean operations. That is a nice and safe way out of trouble!

There are a few more examples, like the ‘Ignore auto-layout’ function, that quickly helps you doing things without messing up the whole frame. Or selecting all similar instances with a button, which by the way is a function I have also seen in Adobe Illustrator or other applications

Use of metaphors

Metaphors helps you explain new concepts in a way already known to you, but in a novel way which immediately strikes as familiar.

‘Hug’ is a such a new concept, and it directly starts to makes sense if you use the metaphor that a parent hugs the child, like the container (parent) hugs the content (child). And the ‘Fill’ concept makes the child fill the parent, aka in real life: fill with joy, fill with anger 🙂 It is OK if you make up your own metaphors, in the end it is you that provides meaning to things you learn.

Low lights

Next to all the happy joy-joy concepts that I came across on my journey, as a designer I’m always critical and searching for better solutions with a curious mind.

Mindset challenge

One of the challenges that I have starting Figma is the mindset change you need to have as a designer. It seems more focused on production with a more systematic design approach. Setting up an auto-layout, making design responsive, and making sure everything is ‘ready for dev’ is different to what I’m used to. The tool starts dictating the creative input and output. Or, as this article puts it: “Figma made layout way easier than what came before it (Sketch, Photoshop, etc.). But somewhere along the way, UI layout became the show. Every design task became a UI task. Our value started being measured by how many polished screens we could ship to a dev, not by how well we shaped the underlying solution.”

Too similar concepts

Similar concepts, which are not quite the same, make any tool hard to grasp… Frames and Groups are such an example. The difference being that Groups have no properties, and Frames can have them. These concepts are close enough and can both be used for quite similar purposes, like organizing content. From my own experience, I know concepts that are too similar will be mixed up because the difference is not easily remembered.. Normally, it will become a matter of preference, e.g. the concept you start from will be used forever. The same principle applies to Sections and Frames, where Sections are for organizing and Frames are for content.

Everything is ‘out there’

What is sometimes scary with online tools, is that they are online (pun intended). You have no clue if others can see your work, or even get notified and spammed unintentionally. In my daily work I often get updates from files I’m apparently following, or get invites to files or projects, or new members (some I don’t even know in my organisation) wants to join a project.

In the Figma video tutorial there is a space called Drafts, and till date I did not notice it. Now I see this is a personal sketchbook space where some of my work is located (but not all, some are already in projects visible to others). In that sense, it would be best if the UI clearly differentiates between local, online personal and online collaboration, which is not the case right now. It feels like a Reply to All action waiting to happen, while in this case it is only ‘a message to yourself’ 😉

Adjust anywhere

In Figma features like constraints can be applied anywhere, without a clear reference to the parent. This is something I have seen before in this design tool. Values like transparency can be applied to so many layers of parents and children that is very hard to adjust. It really does my head in. A component can be a fixed height, but on the instance you can adjust it to ‘hug’. What influences what is quite difficult to figure out..

Working within the ‘logic’ of other designers

Auto-layout is one of those special concepts in Figma. While parent and child behaviors and dependencies are not new to any design tool, the strong behavioral rules are. Especially when you have not set up the file yourself, it behaves sometimes as with a Word document – when inserting images, text and image all go everywhere where you did not expect it nor needed it.. The interesting fact is that while Figma is a tool for collaboration almost as much as it is a design tool, concepts like auto-layout and the individual approach of each designer for a Figma file makes it quite hard to use someone else’s design.

Sometimes you use a feather, sometimes you use a hammer

In many tools or applications, I’m advocating against too subtle cues or visual designs, e.g using a ‘feather’. People are lazy in nature and distracted, sometimes you simply need a ‘hammer’. Too subtle differences or states don’t make a difference – for example, as your focus is elsewhere on the canvas, I missed the label changing in the Design panel from Layout to Auto layout and from Dimensions to Resizing. It is always good to have these additional cues, but this is too subtle..

Make it easier and better, not the same or worse

I like to keep things tidy and in control. That also means often when I adapt an ellipse to 40 width, I expect the height to be automatically 40 as well. In Figma I first need to select a little, not so clear icon to the right of the width and height input fields to connect the height and width 1:1. It is the wrong flow of things for this use case. Often it is faster to type twice 40 with a tab switch in between, and this function becomes obsolete. The ground rule is, always make it a lot better and easier than it currently is and people will make the switch.

The same applies Hitting enter to select all items in a frame seems a smart thing to do, but since we are so used to drag and select or Command-A, this shortcut is easily forgotten. Always make it 10 x easier to what the user is used to, and make it at least 1 time easier to remember!

Sources & Acknowledgments

Posted in

Leave a comment