Best of Figma — May 2025

1. 1
   Video

   Community Picks·1y

   How to Turn Figma Designs into code with Next.js, Tailwind CSS, Shadcn in 2025

   The post provides a comprehensive guide on translating Figma designs into functional code using Next.js, Tailwind CSS, and Shadcn. It explains setting up a front-end environment, integrating APIs, managing global state with Redux, and customizing design elements. Detailed instructions are included for transforming color palettes, typography, and component designs from Figma into code. It also introduces Ban, a JavaScript runtime, as an alternative to Node.js for improved performance and security.

   121

   2
2. 2
   Article

   Community Picks·52w

   Figma Design System Generator

   Kigen is a Figma plugin that accelerates design system creation by providing pre-built color palettes from popular design systems, predefined variables, semantic aliases, typography tokens, and standardized spacing scales. It includes documentation features for token handoff and supports best practices for consistent UI design across products.

   17

   1
3. 3
   Article

   Collections·1y

   Introducing Stitch: Google's AI-Powered Tool for Seamless UI Design

   Google has introduced Stitch, an AI-powered tool, designed to enhance UI design and frontend development. It uses AI to generate UI layouts from text or image inputs, facilitating collaboration between designers and developers. While Stitch streamlines design processes, it's meant for initial drafts that need refinement by professional designers. It integrates with platforms like Figma and IDEs but doesn't aim to replace comprehensive design tools. Stitch, alongside Google's AI agent Jules, underscores the evolving role of AI in enhancing the software development lifecycle.

   12

   1