Figma: Components & Constraints - 100 Days of Design, Writing & Emotions

Design:

Today I'm following a great Skillshare class called, Streamline your workflow: The efficient UI/UX design process in Figma. As you've probably guessed it's about using design systems, components and styles to be more efficient in Figma.



I'd say it's one of the best Skillshare classes I've taken. Concise. Covers a lot of ground. Annnnd teaches you the basics of Figma very quickly. Plus there's an Airbnb project you can follow along with.



I'm using the class to build a prototype for my current case study: Safe Shop (link coming soon).



Notes on Figma Basics

Components

defined: a component is an object that's going to be re-used several times. a.k.a components are elements we're going to re-use and update repeatedly through-out the design.

• Start by grouping then change to component using 4 diamond buttons:

  

• alternatively right click → create component or ctrl + alt + k

• e.g. of component groupings = navigation bar or card grouping

• The duplicate of is called an Instance

• Any change that happens on the original component will affect the instance. Anything that happens on the instance will not affect the original.



Nested components

• add element to an existing instance = select instance + component → click component button

• using '/' after naming your instance or component let's you select that type of instance you want to use in new frames. '/' designates a component family



Excellent Figma components as Metal Gear characters visual by David Hoang



Constraints

defined: a way to make your designs/elements adapt to the frame's size

• click group → constraints menu on the right hand side → change constraints to left & right (up & down etc) and now the design becomes responsive to the frame size

• change constraints in the original component and all instances will be affected



tip: while designing make sure to preview your design at 100% every once in a while. Hit ctrl + 0



HOT TIP!: I spent many confused hours resizing text components then banging my head against an imaginary wall because the bounding boxes weren't aligned. Let me save you the pain. Read the short text components guide from Figma. Also, double click the nested child text, go to the right hand-side menu and toggle auto-width and auto-height.





Emotions:

It's been a mixed bag today. An emotionally challenging day due to external events. Also a day filled with stabilising conversations. I can feel the old balance returning.



I had a deadline for a case study today. I didn't meet the deadline and felt a lot of familiar guilt. Still, I turned up to the critique call and ran through what I had. To my surprise, what I thought was the bare minimum turned out to be enough for an entire case study. Once again, the difference between what my brain demands and what reality demands startles me.



Lesson: when you don't think you've done enough, get a second opinion.