Design System: Figma

‍Key Topics & Takeaways

1. Figma Organisation

• Teams & Projects
  Figma does not utilise traditional folders. Instead, you establish a team and create projects for that team. Each project contains multiple design files (or “documents”), which can be either Figma (for UI designs) or FigJam (for whiteboarding, flows, and IA diagrams).
• Library Files
  Each project’s “library file” contains globally reusable styles and components, such as buttons, inputs, and icons. Once published, these libraries can be imported and updated across all design files.

2. Reusable Styles & Variables

• Text and Colour Styles
  You can define typographic scales, colour palettes, and layer effects. These become selectable global styles, enabling brand consistency and easy updates throughout a project.
• New Local Variables
  Figma’s local variables feature allows you to store reusable values (e.g., specific hex colours, spacing sizes, and boolean flags). This is particularly useful for:
  
  • Colour Modes (light, dark, and brand variations).
  • Design Tokens (naming semantic tokens like Button. Bg or Spacing.Medium rather than hex codes).
  • Breakpoints & Spacing (e.g., Mobile = 375px, Tablet = 768px, Desktop = 1024px).

3. Creating Components & Variants

• Components vs. Instances
  
  • Component: A primary design element featuring default properties (e.g., a button or an input field).
  • Example: A “copy” of that component used in the actual screens can have properties overridden, such as text labels, icons, or states.
• Variants & Properties
  Add “States” (e.g., Default, Hover, Disabled) to a single component set. This creates a more dynamic, single source of truth. Designers and developers can switch variants or toggle properties (icon on/off, text changes, etc.) from a drop-down menu instead of maintaining separate components.
• Auto Layout
  Figma’s Auto Layout feature makes it easy to:
  
  • Dynamically adjust spacing or padding around content.
  • Quickly build forms or lists where elements move or resize automatically.
  • Ensure consistent vertical/horizontal spacing across the design.

4. Practical Demo: Building a Mini Design System

During the demo, the presenters showed the team how to:

1. Set Up Basic Color & Type Variables
   
   • Create a “Brand.Primary” color token in the library.
   • Reference that token for ButtonBackground, LinkText, etc.
   • If you change Brand.Primary, it propagates everywhere you’ve used it.
2. Design Inputs with Multiple States
   
   • Default, Focus, Error, and Disabled states.
   • Icon toggles (show/hide icons in the same component).
   • Use properties to swap icons or update text labels quickly.
3. Build a Button Component
   
   • Variants for Default vs. Hover.
   • Boolean properties to turn icons on/off (icon left, icon right).
   • Text property for the label, easily updated without re-editing the component’s layers.

5. Using Figma Dev Mode

• Developer Handoff
  By switching to Dev Mode in Figma, developers can:
  
  • Inspect layout properties (padding, spacing) with clarity.
  • See auto-generated code snippets (CSS, React, Angular).
  • Use the new “Playground” feature to test each variant/state of a component.
  • Access design tokens (colours, spacing, typography, etc.) as structured data for faster integration.
• Properties & Type Generation
  Dev Mode can even suggest type definitions (e.g., boolean vs. string for component properties) to accelerate front-end coding.

Why It Matters

1. Scalability & Consistency
   A well-structured design system ensures that as new screens, brands, or features are added, everything remains visually cohesive and easier to update.
2. Faster Iterations
   When designers and developers share the same “source of truth” for fonts, colours, and component variants, miscommunication and repetitive work are reduced.
3. Easier Collaboration
   Figma’s real-time collaboration features (multiple cursors, chat overlays, etc.) and Dev Mode’s “Playground” enable entire teams to contribute without stepping on each other’s toes.
4. Future-Proofing
   By embracing Figma variables and design tokens, teams are better prepared to scale up or pivot to multiple theme modes, such as light/dark or multi-brand theming.

Final thoughts

This session showed the power of Figma’s component-based design approach for large-scale, multi-brand projects. By leveraging local variables, auto layout, robust library files, and new Dev Mode handoff features, teams can maintain a consistent UI design, reduce design debt, and speed up collaboration with developers. As Figma continues to refine its tools, especially around dev handoff, these best practices will help teams stay at the forefront of modern design workflows.

‍