Figma Tips and Tricks Lecture

Instructor: Dan Scott, award-winning instructor and chief course creator at bringyourownlaptop.com

Overview

This lecture provides seven tips to improve your efficiency and skills as a UX designer using Figma. These tips cover various aspects including layout, color styles, grids, frames, accessibility, file management, and variables.

Tip 1: Auto Layout Mastery

• Auto Layout Basics:
  • Use Shift + A to create an auto layout.
  • Make it reusable by creating a component (Cmd + Option + K on Mac, Ctrl + Alt + K on PC).
• Padding Adjustment:
  • Add padding using commas (e.g., "10, 15") and adjust by dragging or using Option/Alt for simultaneous adjustments.
• Switch to Auto:
  • Double-click in the middle of padding to switch to auto adjustment.
• Reordering and Adding Icons:
  • Copy-pasting icons into layouts and reordering with arrow keys.

Tip 2: Efficient Color Styles

• Challenges with Color Styles:
  • Creating color styles in Figma can be cumbersome.
• Using Widgets:
  • Use 'Color Levels Generator' widget to create styles with perfect naming and variants.
  • Save styles for easy implementation and professional handoff to developers.

Tip 3: Grids Rule

• Importance of Grids:
  • Adds consistency in design, especially in larger projects.
• Creating Grids:
  • Use parent frame, add columns or rows with specific spacing (commonly 8px).
  • Snap items to grid for aligned designs.
• Consistency:
  • Use Shift + G for toggling grids and save grid styles for reuse.

Tip 4: Frame Mastery

• Navigating Frames:
  • Use Shift + 2 to zoom into selected items.
  • Use the N key or Shift + N to navigate between frames.
  • Home/End keys retain zoom level while navigating.
• Moving Items:
  • Hold space bar when dragging items to keep them within the frame.

Tip 5: Accessibility Hack

• Importance of Accessibility:
  • Often overlooked, but essential for inclusive design.
• Using Plugins:
  • 'Contrast' plugin helps check color contrast and provides fixes.
  • Not a replacement for full audits, but a good starting point.

Tip 6: File Mastery

• Efficient Tab Management:
  • Use Cmd/Ctrl + numbers to switch tabs.
  • Ctrl + Tab to cycle through tabs.
  • Rearrange tabs for workflow efficiency.
• Splitting Screens:
  • Split view allows viewing different parts of the same project simultaneously.

Tip 7: Variables

• Power of Variables:
  • Often underutilized due to complexity.
• Creating Simple Variables:
  • Example: A number variable to update text dynamically.
  • Use Shift + E for prototype mode to set interactions.
• Application in Prototypes:
  • Useful for enhancing prototypes, especially in user testing.

Conclusion

• Explore more structured learning through Dan’s Figma Essentials or Advanced courses for comprehensive learning and certification.

Goodbye!

For more structured learning, consider enrolling in the Figma Essentials or Advanced course for detailed instruction and a guided learning path.