--- title: Best Figma posts of 2024 | daily.dev description: The most upvoted Figma posts of 2024, curated by the daily.dev community. canonical: https://daily.dev/tags/figma/best-of/2024 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/figma/best-of/2024 og:type: website og:site_name: daily.dev og:title: Best Figma posts of 2024 | daily.dev og:description: The most upvoted Figma posts of 2024, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of Figma — 2024 1. 1 [](/posts/open-source-illustrations-kit-efi0tjshw "Open source illustrations kit") Article Community Picks · 2y Open source illustrations kit Over 120 high-quality illustrations, initially created as part of a 100-day challenge, are now available for free download and use in commercial and personal projects. These illustrations can be easily integrated into Figma and FigJam as SVG/Vector files. No attribution or licensing is required. 970 39 2. 2 [](/posts/building-a-better-user-interface-system-8dqskbuf4 "Building a better user interface system") Article Medium · 3y Building a better user interface system A designer shares their progress on building a better user interface system and plans to publish a comprehensive UI library, with customizable components and templates. 347 13 3. 3 [](/posts/best-design-system-examples-jtmfkdylo "Best design system examples") Article Community Picks · 2y Best design system examples Exploring top design system examples to help build or improve your own, this post covers the essentials like consistency, efficiency, scalability, collaboration, and quality control. Featuring IBM's Carbon, Atlassian's, and Adobe's Spectrum design systems, it offers insights into unique approaches and best practices in design systems. 330 6 4. 4 [](/posts/figma-fiasco--gkxitthty "Figma fiasco.") Article Medium · 2y Figma fiasco. Figma's latest updates, featuring new AI capabilities and a revamped user interface, have generated significant dissatisfaction among users. Critics argue that the changes prioritize profit over user experience, complicate simple tasks, and cater to non-designers. The restructured UI and AI functionalities are considered not only unnecessary but also detrimental to the workflow of professional designers. Many are considering alternatives like Penpot and Sketch due to these frustrations. 266 24 5. 5 [](/posts/what-are-your-favorite-diagramming-tools--z1kihrl3y "What are your favorite diagramming tools?") Article The Dev Craft · 2y What are your favorite diagramming tools? The post discusses various diagramming tools, including the user's experience with Visio, Lucidchart, and Figjam. While Lucidchart is noted for having good functionality, it may not be ideal for whiteboarding. Figjam is appreciated for its flexibility in brainstorming and not feeling constrained. The post seeks recommendations for other tools, particularly open-source ones. 235 52 6. 6 [](/posts/claude-crushed-gpt-4o-and-13-other-tech-stories-you-missed-in-june-n5kwkvnn2 "Claude crushed GPT-4o… and 13 other tech stories you missed in June") Video Fireship · 2y Claude crushed GPT-4o… and 13 other tech stories you missed in June June 2024 saw significant tech developments including Figma's new AI tools for generating UIs and visual asset searches, Claude Sonet 3.5 surpassing GPT-4o in coding capabilities, and a new silicon chip from Etched boosting AI inference speeds. Noteworthy incidents involved Cloudflare's hefty extortion demand to an online casino, Adobe's controversial content ownership terms, and Apple's potential $30 billion fine for violating the EU's Digital Markets Act. YouTube also moved to server-injected ads to combat ad blockers. 175 10 7. 7 [](/posts/dark-theme-5-ui-design-tips-n05x7sqbc "Dark Theme: 5 UI Design Tips") Article UX Planet · 2y Dark Theme: 5 UI Design Tips When designing dark themes, it's important to avoid pure black backgrounds, use legible fonts, adjust shadows to avoid harsh contrasts, avoid saturated colors to meet accessibility standards, and maintain consistency with the light theme. These principles help create a comfortable and visually appealing user experience. 120 4 8. 8 [](/posts/17-best-web-design-software-to-create-stunning-websites-in-2024-ytktvzvij "17 Best Web Design Software To Create Stunning Websites In 2024") Article Community Picks · 2y 17 Best Web Design Software To Create Stunning Websites In 2024 This post provides an overview of the 10 best web design software options, including Canva, Figma, Marvel, Webflow, Zeplin, Bootstrap, Adobe Dreamweaver, Google Web Designer, and Designmodo. It highlights their key features, pros and cons, and integrations. The post also includes a comparison chart and additional web design software recommendations. 112 2 9. 9 [](/posts/shadows-in-ui-design-tips-tricks-uwslcmxmb "Shadows in UI design: Tips & Tricks") Article UX Planet · 2y Shadows in UI design: Tips & Tricks Effective use of shadows can enhance both the visual appeal and functionality of a UI. Different types of shadows, such as soft, strong, and inner shadows, serve varied purposes. Choosing the right color, maintaining consistency in elevation, using interaction-based shadows, deciding on a light source, layering shadows, and considering performance are key design tips. Tutorials for creating shadows in Figma are also included. 105 2 10. 10 [](/posts/export-figma-to-tailwind-css-with-visual-copilot-8raphrqob "Export Figma to Tailwind CSS with Visual Copilot") Article Builder.io · 3y Export Figma to Tailwind CSS with Visual Copilot Learn how to effortlessly convert Figma designs into Tailwind CSS code using Visual Copilot. Save time and improve website development efficiency with this AI-powered tool. 94 3 11. 11 [](/posts/how-to-scale-databases-tkd9zbp5r "How to scale databases") Article Tech World With Milan · 2y How to scale databases Learn about the two types of scaling strategies for databases, horizontal and vertical partitioning. Find out how Figma scaled their Postgres database to achieve infinite scalability. 88 2 12. 12 [](/posts/progress-bar-design-best-practices-jvxzsxpq6 "Progress Bar Design Best Practices") Article UX Planet · 2y Progress Bar Design Best Practices Learn essential tips for designing effective progress bars including appropriate use cases, simplicity in design, avoiding misleading indicators, proper types of progress indicators, engaging users during long wait times, and creating smooth transitions upon task completion. 74 2 13. 13 [](/posts/figma-best-practices-qc5t2vu8y "Figma Best Practices") Article Community Picks · 3y Figma Best Practices Discover Figma best practices and tips for enhancing your design workflow and collaboration. Learn about workspaces in Figma Enterprise, the UX writer's guide to Figma, collaborating in FigJam, branching in Figma, creating and organizing variants, team and file organization, working with images, developer workflow, using design system analytics, using constraints, and improving prototyping workflow. 72 14. 14 [](/posts/tailwind-sync---figma-variables-to-tailwind-in-one-click-xijfiaoui "Tailwind Sync - Figma variables to Tailwind in one click") Article Product Hunt · 2y Tailwind Sync - Figma variables to Tailwind in one click Tailwind Sync is a new tool that allows users to sync Figma variables with Tailwind CSS in just one click. The tool was launched on October 1st, 2024, and aims to streamline the workflow between design and development teams. 67 15. 15 [](/posts/free-saas-website-ui-kit-for-framer-and-figma-eapkr3tpj "Free SaaS Website UI Kit for Framer and Figma") Article Community Picks · 3y Free SaaS Website UI Kit for Framer and Figma Build and publish a fully functional, responsive, no-code SaaS website design in minutes using the free components provided for Framer and Figma. Customize and personalize the elements, then publish your site with ease. 68 16. 16 [](/posts/6-new-design-systems-ui-kits-2024-qji8gsfb2 "6 New Design Systems & UI Kits 2024") Article UX Planet · 2y 6 New Design Systems & UI Kits 2024 As digital technology advances and the demand for user-friendly interfaces grows, new design systems and UI kits for 2024 are becoming essential. Notable mentions include Razorpay's Blade Design System, Atomised Design System, Jordan Hughes' Design System, Wanted Design Library, Design To Code UI Kit, and Design System Strategy. These tools offer a range of components, styles, and features to streamline the design and development process, catering to both beginner and advanced users. 63 1 17. 17 [](/posts/roots-of-ui-ux-design-book-b67yxjhx6 "Roots of UI/UX Design Book") Article Community Picks · 2y Roots of UI/UX Design Book Discover an extensive guide to UI/UX design with 322 pages of insights, practical examples, Figma files, and AI prompts. This book is inspired by Material Tailwind and is divided into 7 parts and 55 chapters that cover everything from mastering pixel-perfect elements to building complete web pages. It's trusted by top companies and includes real-life examples accessible via QR codes. Various purchase options are available, including digital and physical copies. 61 3 18. 18 [](/posts/how-i-built-a-real-app-using-figma-ai-in-48-hrs-entire-ux-ui-process--2gzk9grdj "How I built a REAL app using Figma AI in 48 hrs! (ENTIRE UX/UI Process)") Video YouTube · 2y How I built a REAL app using Figma AI in 48 hrs! (ENTIRE UX/UI Process) A detailed behind-the-scenes guide on using Figma's AI for user research, design, and prototyping to build a real budgeting app in 48 hours. The process includes using Figma's generative AI features, Buzzy AI for turning designs into a functional app, and conducting user interviews and competitor analysis. Key steps and tools used in the entire UX/UI process are covered, demonstrating how AI can streamline app development. 60 19. 19 [](/posts/100x-scaling-how-figma-scaled-its-databases-ho0z8xl9a "100X Scaling: How Figma Scaled its Databases") Article ByteByteGo · 2y 100X Scaling: How Figma Scaled its Databases Figma, a collaborative design platform, successfully scaled its databases to keep up with increasing demand. They implemented vertical partitioning and logical sharding to address scalability issues. Additionally, Figma explored alternative solutions but ultimately chose to build a horizontally sharded solution on top of their existing infrastructure. Their unique sharding implementation included the use of colocations, logical and physical sharding, a query engine, and a shadow application readiness framework. Figma aims to horizontally shard every table in their database for near-infinite scalability. 58 20. 20 [](/posts/figma-to-vue-convert-designs-to-clean-vue-code-in-a-click-derceqpgi "Figma to Vue: Convert Designs to Clean Vue Code in a Click") Article Builder.io · 2y Figma to Vue: Convert Designs to Clean Vue Code in a Click Builder.io introduces Visual Copilot, an AI-powered tool that converts Figma designs to clean and responsive code. It streamlines the design-to-code workflow, facilitates collaboration, and enhances the efficiency of web development. 55 1 21. 21 [](/posts/realvjy-s-design-tool-tips-and-tricks-el50jhwln "realvjy's design tool tips and tricks") Article Community Picks · 2y realvjy's design tool tips and tricks Stream offering over two hours of guidance from basic to advanced levels on creating a Figma plugin. Includes 32 design tool tips. 51 2 22. 22 [](/posts/figma-goes-all-in-on-developers-eymfqiquj "Figma Goes All In On Developers") Video Theo - t3․gg · 3y Figma Goes All In On Developers Figma has acquired Dino board, a low-code AI supercharged IDE focused on building web applications with code. This acquisition aims to bridge the gap between designers and developers and make it easier for developers to be involved in the design process. Figma has been focusing on integrating with various developer tools and increasing development efficiency by 35%. The acquisition is made possible by the billion-dollar breakup fee Figma received from its failed acquisition by Adobe. 48 10 23. 23 [](/posts/material-ui-convert-figma-designs-to-react-components-f4udhbrev "Material UI: Convert Figma Designs to React Components") Article Builder.io · 3y Material UI: Convert Figma Designs to React Components This post explores Builder.io's Visual Copilot, an AI-powered tool for converting Figma designs to React component code using Material UI. It explains the benefits of Visual Copilot and provides a one-minute tutorial for converting MUI designs to MUI component code for a Next.js web app. 46 24. 24 [](/posts/optimising-your-design-system-with-figma-s-variables-w0oyqwcx7 "Optimising your design system with Figma’s variables") Article Medium · 3y Optimising your design system with Figma’s variables Learn how to optimize your design system using Figma's variables. Explore the principles of consistency, scalability, maintainability, DRYness, and code-friendliness. Discover the benefits of primitive variables and how to set them up in a Codesign system. Understand the concept of semantic variables and their compatibility with different modes. Start building your own design system today! 45 5 25. 25 [](/posts/inspirational-websites-roundup-65-pcchfmwva "Inspirational Websites Roundup #65") Article Codrops · 2y Inspirational Websites Roundup #65 Discover a new collection of inspirational websites showcasing exceptional design to spark your creativity. Plus, learn about Dora AI, a tool that quickly generates website ideas and Figma designs with near-perfect accuracy on the first try. 42 [See all Figma archives](/tags/figma/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/figma/best-of/2024#page","url":"https://daily.dev/tags/figma/best-of/2024","name":"Best Figma Posts of 2024","description":"The most upvoted Figma posts of 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/figma/best-of/2024#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/open-source-illustrations-kit-efi0tjshw","name":"Open source illustrations kit"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/building-a-better-user-interface-system-8dqskbuf4","name":"Building a better user interface system"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/best-design-system-examples-jtmfkdylo","name":"Best design system examples"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/figma-fiasco--gkxitthty","name":"Figma fiasco."},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/what-are-your-favorite-diagramming-tools--z1kihrl3y","name":"What are your favorite diagramming tools?"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/claude-crushed-gpt-4o-and-13-other-tech-stories-you-missed-in-june-n5kwkvnn2","name":"Claude crushed GPT-4o… and 13 other tech stories you missed in June"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/dark-theme-5-ui-design-tips-n05x7sqbc","name":"Dark Theme: 5 UI Design Tips"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/17-best-web-design-software-to-create-stunning-websites-in-2024-ytktvzvij","name":"17 Best Web Design Software To Create Stunning Websites In 2024"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/shadows-in-ui-design-tips-tricks-uwslcmxmb","name":"Shadows in UI design: Tips & Tricks"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/export-figma-to-tailwind-css-with-visual-copilot-8raphrqob","name":"Export Figma to Tailwind CSS with Visual Copilot"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/how-to-scale-databases-tkd9zbp5r","name":"How to scale databases"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/progress-bar-design-best-practices-jvxzsxpq6","name":"Progress Bar Design Best Practices"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/figma-best-practices-qc5t2vu8y","name":"Figma Best Practices"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/tailwind-sync---figma-variables-to-tailwind-in-one-click-xijfiaoui","name":"Tailwind Sync - Figma variables to Tailwind in one click"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/free-saas-website-ui-kit-for-framer-and-figma-eapkr3tpj","name":"Free SaaS Website UI Kit for Framer and Figma"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/6-new-design-systems-ui-kits-2024-qji8gsfb2","name":"6 New Design Systems & UI Kits 2024"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/roots-of-ui-ux-design-book-b67yxjhx6","name":"Roots of UI/UX Design Book"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/how-i-built-a-real-app-using-figma-ai-in-48-hrs-entire-ux-ui-process--2gzk9grdj","name":"How I built a REAL app using Figma AI in 48 hrs! (ENTIRE UX/UI Process)"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/100x-scaling-how-figma-scaled-its-databases-ho0z8xl9a","name":"100X Scaling: How Figma Scaled its Databases"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/figma-to-vue-convert-designs-to-clean-vue-code-in-a-click-derceqpgi","name":"Figma to Vue: Convert Designs to Clean Vue Code in a Click"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/realvjy-s-design-tool-tips-and-tricks-el50jhwln","name":"realvjy's design tool tips and tricks"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/figma-goes-all-in-on-developers-eymfqiquj","name":"Figma Goes All In On Developers"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/material-ui-convert-figma-designs-to-react-components-f4udhbrev","name":"Material UI: Convert Figma Designs to React Components"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/optimising-your-design-system-with-figma-s-variables-w0oyqwcx7","name":"Optimising your design system with Figma’s variables"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/inspirational-websites-roundup-65-pcchfmwva","name":"Inspirational Websites Roundup #65"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"Figma","item":"https://daily.dev/tags/figma"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/figma/best-of"},{"@type":"ListItem","position":5,"name":"2024"}]}]} ```