Best of Figma — June 2025

  1. 1
    Article
    Avatar of medium_jsMedium·48w

    14 logic-driven UI design tips to improve any interface

    A comprehensive guide presenting 14 practical UI design principles based on logic rather than intuition. Covers essential topics including proper spacing using 8-point grids, WCAG accessibility contrast ratios (3:1 for UI elements, 4.5:1 for text), button hierarchy and target sizes, typography best practices, and visual consistency. Demonstrates these principles by transforming a poorly designed profile page interface, addressing issues like inadequate contrast, confusing navigation, poor spacing, and accessibility problems. Emphasizes that good UI design follows structured guidelines rather than artistic instinct.

  2. 2
    Article
    Avatar of uxplanetUX Planet·49w

    Figma MCP: Complete Guide

    Figma MCP (Model Context Protocol) enables AI code generators like Cursor to understand Figma designs at a semantic level, providing better design-to-code conversion than screenshot-based approaches. The guide covers setup requirements including Figma Desktop app and compatible code editors, configuration steps for both Figma and Cursor, and troubleshooting common issues like 'get_code' and 'get_image' errors. MCP offers design token awareness and semantic precision, allowing AI to access exact variable names, hierarchy, and constraints for better alignment with design systems.

  3. 3
    Article
    Avatar of medium_jsMedium·47w

    Top UI/UX design trends to watch in 2025

    UI/UX design in 2025 focuses on intelligent design systems with AI-assisted components, meaningful microinteractions, and subtle personalization. Key trends include voice UI integration, accessibility as a foundation rather than afterthought, smarter Figma workflows, motion design integration, trust-building interfaces, and adaptive UI that responds to user environment. The emphasis shifts from following trends blindly to understanding user needs and creating purposeful, accessible experiences.

  4. 4
    Article
    Avatar of communityCommunity Picks·49w

    Made with TailwindCSS, shadcn/ui, Radix UI and Figma.

    MynaUI is a comprehensive design system and UI kit built with TailwindCSS, shadcn/ui, and Radix UI. It provides customizable building blocks including elements, forms, marketing components, and application-specific components for web development projects.

  5. 5
    Article
    Avatar of figmaFigma·48w

    6 skills every engineer needs for the AI era

    Software engineers need to develop six key skills to thrive in the AI era: using AI for problem exploration beyond automation, vibe coding to discover better solutions, leveraging agentic capabilities like Model Context Protocol for improved outputs, auditing pull requests with LLMs, managing teams of AI agents by breaking down complex problems, and continuously experimenting with AI tools to push beyond preconceived limitations. The focus should be on augmentation rather than just automation, allowing engineers to spend more time on meaningful problem-solving and user-focused development.

  6. 6
    Video
    Avatar of youtubeYouTube·51w

    Stitch AI: Google's New FREE AI Tool Creates Stunning UI In A Single Click!

    Google launched Stitch AI, a free beta tool that generates UI designs for mobile and web apps from text prompts. Users can describe their desired interface, and the AI creates multiple screens within seconds. The tool supports theme customization, direct Figma integration, and experimental image-based design generation. Stitch allows iterative editing through conversational prompts and exports designs directly to Figma for further development.

  7. 7
    Article
    Avatar of fullstackempireFullstack Empire·48w

    Get 30+ FREE 3D Fintech wallet illustrations

    A collection of 30+ free 3D fintech wallet illustrations is available for download, featuring wallets, coins, QR codes, and payment scenes without faces. The assets are designed for mobile app UI, mockups, and fintech presentations, accessible through a Figma design file.

  8. 8
    Article
    Avatar of uxplanetUX Planet·50w

    New Figma MCP + Cursor Integration with Example

    Figma's new Dev Mode MCP integration allows AI models to access complete design context directly from local Figma files, enabling rapid conversion of designs into functional web applications. The setup involves enabling MCP server in Figma desktop app and connecting it to AI code editors like Cursor through a JSON configuration. By using design system components, variables, and tokens consistently, developers can generate highly accurate code that preserves interactive states and styling. The author demonstrates building a complete web app with email functionality and animations in just 20 minutes, showcasing how this integration bridges the gap between design and development.

See all Figma archives