Session Summary

Last Friday's community call with Het Shah (Product Designer @ Triyo FinTech) was a masterclass in Figma best practices and designing for clients. Here's what we learned:

🎨 Style guides → Design systems — Het broke down how style guides (colors, typography, iconography) evolve into full design systems with pattern and component libraries. Start simple, scale intentionally.

✍️ Typography = your product's voice — Size, weight, spacing, and scale matter. Het walked us through building a type scale in Figma, starting with body text as your baseline.

📱*Auto layout is non-negotiable* — Responsive design with multiple breakpoints? Auto layout and constraints are your best friends for flexibility and consistency.

📋 Client handoff tips — Documentation is everything. Create clear guides, training materials (Loom videos work great), and maintain open communication with dev teams about component requests.

⚙️ Practical workflow — Use existing design system files as references (Het mentioned customizing Microsoft's Fluent Design System for Triyo), create tokens for reusability, and evolve components as you go.

💡 Favorite insight: Start with brand strategy and colors, build components as needed, and let your design system grow organically with your project.

📚 Key resources Het recommends:

Google Fonts | Font Share (typography)

Microsoft Fluent Design System (customizable foundation)

Figma Learning Playlist: [Learn Auto Layout](https://www.youtube.com/playlist?list=PLXDU_eVOJTx55HFubfbTL3ellJjBM2QE2)

+ Enjoy exploring this useful Figma File from the Session: [View Het’s File](https://www.figma.com/design/4ODxiJXssZIldRgP2sQJPN/DesignXP-Session---Het-Shah?node-id=0-1&t=IQtbS8GVrsvKFJLU-1)

🙌 We're incredibly grateful to Het for sharing real-world examples.

👉 Connect with him: [Het Shah on Linkedin](https://www.linkedin.com/in/hetshah22/)