Figma

Figma is the interface design tool. 2025 brings Generative UI (Text to Design) and Dev Mode enhancements for accurate CSS/SwiftUI generation.

When to Use

• UI/UX Design: Creating high-fidelity mocks.
• Prototyping: Clickable user flows for user testing.
• Handoff: Developers inspect CSS/variables directly.

Core Concepts

Auto Layout

Flexbox for designers. Elements resize/reflow automatically.

Components / Variants

Reusable UI elements (Buttons) with states (Hover, Active).

Dev Mode

A dedicated view for engineers to grab variables, measurement, and code snippets without breaking the design.

Best Practices (2025)

Do:

• Use Variables: Define colors/spacing as variables (Design Tokens).
• Use Auto Layout: Always. It ensures the design can be implemented in CSS.
• Name Layers: "Frame 1342" is helpful to no one.

Don't:

• Don't detach instances: Keep components linked to the library.

References

• Figma Help