Tutorials on Figma

Hello and welcome to Part 2 of our tutorial about how to build actually professional fullstack applications with AI. In Part 1 of our tutorial, we set the stage and created a plan for our app, including our Phase 1 (aka detailed MVP) features, a UI Development Plan, and a Design System we can use…

As you may know, lately we’ve created a lot of tutorials on how to build with AI or applications that use AI or both. If you didn’t know, well, we’ve already created apps with Bolt, Replit Agent, Supabase, MCP Servers, Chatbots, and more. You can find them here (and filter for the keyword or tool…

The best design and development teams imbue design and brand consistency across multiple products with design systems. When designers and developers collaborate on and regularly contribute to a design system, communication between designers and developers improves since a design system serves as a…

Hi folks! The newline Guide to React Component Design Systems with Figmagic (Minibook) is live 🎉 🪄 This course is a comprehensive guide to building a React component library based on a well-architectured design system. You'll create a full component-based React-driven application with Figmagic,…

In this post, we'll keep it short and sweet and make a sort of "hello world" implementation. This should get you a good sense of how things work when starting from scratch. Let's recap very briefly what we know about design systems, design tokens and Figmagic: Start Figma. Create a new design file…

Working effectively with Figmagic means understanding how and what it actually parses from a document. In this post, we will demystify exactly how a Figmagic-compliant Figma file needs to look for it to work as intended. On a high level, there are three page names that Figmagic looks for: