| name | figma |
| description | Figma collaborative design tool. Use for UI/UX design. |
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
