Mentor status unlocked: Teaching Figma
As the designated Old in my work group, I've had to figure out how Figma works, and today, I found myself able to explain it to my younger, newly-hired colleagues who were confused by some of the concepts. Yay me!
Figma is an app for designing interactive interfaces. It runs in the browser; its desktop app is in reality a customized browser, too. You can save design files locally, or to a shared cloud folder for collaboration. With a Team subscription you get to share common assets, like fonts.
It's also got a companion whiteboard/flowcharting tool built-in called FigJam for brainstorming and collaboration.
Figma's system of 'components' was what was tripping people up. When you learn it, it's elegant and clever, but not immediately obvious if you haven't used design apps before.
A component is anything you want to reuse throughout a project. It's essentially a 'master' item, and any changes made to it ripple down to any instances of the component used in your designs. You can edit instances without affecting the master, or detach it from the master component (if, for instance, you want to build a new component, or isolate it from updates to the master).
The component system makes it very easy to build out design systems, including all the things like buttons, menubars, cards, and share common assets like logos, and styles for type, colours, drop shadows, and the like. It creates a 'single source of truth' for design systems.
By publishing the components and styles as a 'library,' your team can add them and use them in their design files.
The tricky/clever thing in Figma is that you can create groups of variations of components, by giving them the same naming structure.
For instance, buttons typically have normal, hover, active (pressed) and disabled states. They might also have stylistic variants like solid or outline buttons, or different sizes.
In Figma's design mode, you'd draw all those different versions as separate objects, then unify them into a component by right-clicking each one, selecting 'make Component', and then naming them in a structured fashion. For instance, something like:
...and so on. A bit like DOS or Unix, every forward-slash symbol in a component name tells Figma to group things in 'folders,' which nest until you reach the end, which is the component variation.
And then, when you drag a Button component onto your design, you can then just toggle its states and variants from the right sidebar's Component section. Boom! Done.
Plus, components can contain components. We have an Icons component that contains about 100+ vector icons, and we use it inside an Icon Button component. Using the 'swap instance' feature, we can change any specific icon from the sidebar.
This is conceptually similar to style languages like CSS and SCSS / Sass; and for similar reasons, they don't understand it because they're missing the C in CSS (Cascading). The cascade means that you can set styles to apply on a range from universal to extremely specific, and they inherit to child elements until you specify otherwise.
It's really easy to get over-specific with both CSS and Figma; my recommendation is, keep your style systems simple to start with.
origamiaround
janainaart
blakekathryn
titsay
baratheonpilled
vaporwave
2087
