Design5 min read

Advanced Figma

Master Figma - Auto Layout, components with variants, variables for theming, advanced prototyping with conditions, and plugins that speed up workflows.

FigmaComponentsAuto LayoutVariablesPlugins

skill: Advanced Figma category: Design tags: [Figma, Components, Auto Layout, Variables, Plugins] readingTime: 5

Figma's power is in components and Auto Layout - they make designs maintainable and responsive. Without them, a design system is a static mockup. With them, changing one component updates every instance across every file. Variables add theming and conditional logic, bringing Figma closer to the interactivity of real products.

Workflow

Master Auto LayoutAuto Layout is Figma's equivalent of Flexbox - components resize and adapt to content automatically. Without Auto Layout, components are fixed-size; with it, they scale properly when content changes.
Build components with variants and propertiesComponent variants define all states of a component in one organized set. Component Properties (text, boolean, instance swap) expose controls without exposing internal structure.
Use Variables for theming and logicFigma Variables (2023) store reusable values - colors, numbers, strings, booleans. They replace direct color swatches and enable true multi-theme design with mode switching.
Create advanced interactive prototypesFigma's prototype mode supports transitions, smart animate, conditional logic via variables, and overlays. Advanced prototypes can simulate complex interactions without code.
Supercharge workflow with pluginsFigma plugins automate repetitive tasks - from populating designs with real data to exporting optimized assets. The right plugins save hours per week.

Output Format

Figma: Auto Layout (Hug/Fill/Fixed sizing + Space Between), variant properties (Variant/Size/State), Variables with Light|Dark modes aliased to semantic tokens, Smart Animate connections with same-name layers, and Unsplash/Iconify/Contrast plugins.

Auto Layout: Shift+A → Horizontal/Vertical → Hug (buttons) / Fill (content)
Variants: Variant=[Primary,Secondary] × Size=[Sm,Md,Lg] × State=[Default,Hover]
Variables: Color/Text/Primary → Light:{Gray/900} Dark:{Gray/100}
Proto: Smart Animate on same-name layers, 300ms ease-out
Plugins: Unsplash + Iconify + Contrast (Stark) + Tokens Studio

Examples

Input

Output

Edge Cases & Gotchas

Component detachment - When a designer edits an instance directly instead of editing the master component or its properties, it creates a detached instance - changes to the master won't propagate. Instill the rule: edit properties and text on instances; edit structure on the master.
Variable modes in nested frames - A parent frame set to Dark mode overrides child frames. Child frames set to Light mode explicitly override the parent. This nesting enables mixed-theme designs (e.g., a dark sidebar in a light app).
Auto Layout and absolute position - Elements inside Auto Layout frames must opt out to be positioned freely: right panel > Constraints > Absolute position. Use sparingly (badges, decorations) - absolute elements don't participate in the flow.
File organization and shared libraries - Published libraries push component changes to all linked files. Breaking component API changes (renaming variants, removing properties) in published libraries break all instances across the team. Communicate changes before publishing.

When to Break These Rules

Use FigJam instead of Figma for early ideation, user flows, and architecture diagrams - Figma's fidelity is a distraction at the conceptual stage; FigJam's looseness encourages exploration.
Use Penpot (open-source, self-hosted) instead of Figma for teams with data sovereignty requirements - Figma stores all designs on Figma's servers, which is a blocker for some government or medical clients.

Reference Files

https://help.figma.com/
https://www.figma.com/community/plugins