--- title: Best Figma posts of 2023 | daily.dev description: The most upvoted Figma posts of 2023, curated by the daily.dev community. canonical: https://daily.dev/tags/figma/best-of/2023 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/figma/best-of/2023 og:type: website og:site_name: daily.dev og:title: Best Figma posts of 2023 | daily.dev og:description: The most upvoted Figma posts of 2023, 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 — 2023 1. 1 [](/posts/uiverse-io-2-0---3500-ui-elements-copy-the-code-or-use-in-figma--lee07viva "Uiverse.io 2.0 - +3500 UI Elements, copy the code or use in Figma!") Article Product Hunt · 3y Uiverse.io 2.0 - +3500 UI Elements, copy the code or use in Figma! Uiverse.io 2.0 offers over 3,500 open-source UI elements, Figma Copy & Paste, new categories like Forms and Tooltips, a sleek UI, and a GitHub repository. 471 7 2. 2 [](/posts/introducing-nextui-version-2-0-jr9pjmhlu "Introducing NextUI Version 2.0") Article Community Picks · 3y Introducing NextUI Version 2.0 NextUI v2.0 comes with a TailwindCSS plugin that enables the customization and addition of default themes. New Templates & Guides for App and Pages directories, alongside Vite, Remix, and Astro installation guides, are introduced to aid your app creation process. 344 22 3. 3 [](/posts/generate-figma-designs-with-ai-8gumaifzu "Generate Figma Designs with AI") Article Builder.io · 4y Generate Figma Designs with AI You can now generate designs inside of Figma with AI, with the latest version of the Builder.io Figma plugin. You can be as detailed and specific with prompts as you like. For example, in this prompt, I just said “I want a product page that looks like it's on everlane.com. 226 18 4. 4 [](/posts/introducing-figma-s-new-dev-mode-r9mpt344e "Introducing Figma’s New Dev Mode") Article Community Picks · 3y Introducing Figma’s New Dev Mode Figma was born on the web, an unconventional start to a design tool, but one we felt needed. With a single link, designers could collaborate on in-progress work, sharing early explorations, rather than safeguarding designs. The easier it is for teams to design, document, find, and implement high-fidelity designs. 122 8 5. 5 [](/posts/building-ai-powered-apps-is-way-easier-than-you-think-j5np5sgcz "Building AI-Powered Apps Is Way Easier Than You Think") Article Builder.io · 4y Building AI-Powered Apps Is Way Easier Than You Think The basic structure of doing commands with AI is asking users for input, constructing a prompt with that and any other information needed, and generating a result. Using ChatGPT as a grounds to experiment is a great thing to do first. For example, you can play with prompts to find what gives you good results, and when you find something repeatable move it into code. 111 4 6. 6 [](/posts/building-a-design-system-with-tailwind-css-a-step-by-step-guide-cgpzhxkgt "Building a design system with Tailwind CSS: A step-by-step guide") Article UX Planet · 3y Building a design system with Tailwind CSS: A step-by-step guide The basic kit typically includes: Colors - Typography - Spacing - Border radius - Shadow - Breakpoints (Screens) Colors Tailwind CSS provides predefined color definitions. By following these steps, you can gain inspiration and insights for building your design system. 108 2 7. 7 [](/posts/figma-to-html-convert-designs-to-clean-html-code-in-a-click-3agdoeten "Figma to HTML: Convert designs to clean HTML code in a click") Article Builder.io · 3y Figma to HTML: Convert designs to clean HTML code in a click Learn how AI technology can streamline the process of converting Figma designs to HTML code with Visual Copilot. The tool generates clean and responsive HTML code, supports various frameworks, and allows for customization. 91 2 8. 8 [](/posts/penpot-an-open-source-alternative-to-figma-eucjc5e6y "Penpot: An Open Source Alternative to Figma") Article Community Picks · 4y Penpot: An Open Source Alternative to Figma Adobe's announcement of its intent to acquire Figma for $20 billion has sparked interest in alternative design tools, with Penpot emerging as a popular choice. Penpot offers similar features to Figma, including designing beautiful user interfaces, creating interactive prototypes, real-time collaboration, and the ability to ask for feedback. It is an open source project that welcomes contributions from the community. 79 3 9. 9 [](/posts/8-design-system-management-tools-for-organizations-g4ab8j-e3 "8 design system management tools for organizations") Article Community Picks · 4y 8 design system management tools for organizations 8 design system management tools for organizations 8 design systems for startups & organizations 10 min read. Design systems are also challenging to build, maintain, and evangelize across tools and teams. Here’s a list of the leading tools for building, managing, and maintaining your design system. 79 2 10. 10 [](/posts/creating-a-scrolling-logo-animation-with-tailwind-css-v88zuvxfw "Creating a Scrolling Logo Animation with Tailwind CSS") Article Builder.io · 3y Creating a Scrolling Logo Animation with Tailwind CSS Learn how to create a horizontal scrolling logo animation using HTML and Tailwind CSS. Explore how Visual Copilot, an AI powered Figma to Code plugin, can accelerate the code generation process. Customize the animation and code to match your design requirements. Add interactivity by pausing the animation on hover. 74 2 11. 11 [](/posts/horizon-ui-landing-kit---landing-library-kit-for-tailwind-css-html-figma-5blh5veep "Horizon UI Landing Kit - Landing Library Kit for Tailwind CSS, HTML & Figma") Article Product Hunt · 3y Horizon UI Landing Kit - Landing Library Kit for Tailwind CSS, HTML & Figma Horizon UI Landing Kit is a valuable product that can be continuously improved based on user feedback. 70 12. 12 [](/posts/vivid-call-your-designs-from-your-code--rphaz8pux "Vivid — Call your designs from your code.") Article Community Picks · 3y Vivid — Call your designs from your code. Vivid is a tool that syncs Figma designs with code by generating and updating UI code based on the designs. It isolates design styles, allowing developers to focus on functionality and logic. 64 1 13. 13 [](/posts/all-the-ways-to-use-a-design-api-nundffcwx "All the ways to use a Design API") Article Community Picks · 3y All the ways to use a Design API A Design API offers a new kind of flexibility for product teams. Teams can use a branding which is always up-to-date by configuring the Design API to automatically collect and distribute design data. The first idea that comes in mind is to update design data from design to code. 60 14. 14 [](/posts/frames-x---ui-kit-design-handbook-for-figma-uk4vpiztk "Frames X - UI Kit & Design Handbook for Figma") Article Product Hunt · 4y Frames X - UI Kit & Design Handbook for Figma The best of Product Hunt, everyday Web3\. Discover the best products by month. Check out launches that are coming soon. 57 1 15. 15 [](/posts/uihut---30-000-design-resources---figma-webflow-tailwind-more-gfuqr2dy2 "UIHUT - 30,000+ design resources - Figma, Webflow, Tailwind & more") Article Product Hunt · 3y UIHUT - 30,000+ design resources - Figma, Webflow, Tailwind & more UIHUT 3.0 is a design resource platform that includes over 30,000 design resources, including Figma, Webflow, Tailwind, and more. 53 16. 16 [](/posts/design-for-the-web-without-figma-oxqaec7gt "Design for the web without Figma") Article David Heinemeier Hansson · 3y Design for the web without Figma Design for the web without Figma is an intermediary abstraction, like Photoshop before it. This is perhaps the biggest, open secret to the productivity and viability of software companies. Designers should treat improving their skills with HTML, CSS, JavaScript, and perhaps even the backend language as a key plank. 51 3 17. 17 [](/posts/three-plugins-to-convert-your-figma-designs-into-code-yuuoncxpo "Three plugins to Convert your Figma Designs into Code") Article asayer · 3y Three plugins to Convert your Figma Designs into Code This article explores three plugins that automate the design-to-code process for Figma designs, saving time and ensuring accuracy. The plugins discussed are Figma-to-HTML, TeleportHQ, and Locofy. They empower designers and developers to convert designs into code effortlessly, maintain consistency, embrace modern tools, and support various frameworks. Each plugin has its own capabilities and limitations, but they all aim to streamline the design-to-code translation process. 49 1 18. 18 [](/posts/create-your-own-design-system-chapter-color-tokens-erd4ht1qr "Create your own Design system: Chapter Color tokens") Article UX Planet · 3y Create your own Design system: Chapter Color tokens Color tokens are used in design systems to represent colors in a concise and manageable way. They help ensure consistency, reusability, and easy maintenance of colors in design systems. To set color tokens effectively, you need to define a color palette, assign meaningful names, organize variants, document the tokens, consider accessibility, test and gather feedback, implement version control, integrate with design tools, promote collaboration and communication, and regularly update and maintain the tokens. 46 19. 19 [](/posts/create-your-own-design-system-chapter-colors-chpc1gpn6 "Create your own Design system: Chapter Colors") Article UX Planet · 3y Create your own Design system: Chapter Colors Color theory is the study of how colors interact, combine, and evoke certain emotions or responses. The color wheel is a circular arrangement of colors that helps us understand their relationships. A well-defined color palette in a design system ensures consistency, accessibility, and cohesiveness across various elements of a design. 45 1 20. 20 [](/posts/10-ai-website-builders-every-ui-ux-designer-must-try-g1bpy1nic "10 AI website builders every UI/UX designer must try") Article UX Planet · 3y 10 AI website builders every UI/UX designer must try Keep an eye on these top 10 fantastic AI builder platforms I came across. Framer AI One my favourite website builders out there. Dora AI One of the forefront in bringing AI to website building. Kleap Kleap is not only built your website with AI but also helps you choose the right words and pics for you. 43 4 21. 21 [](/posts/tailgrids-figma---ui-library-and-design-system-for-figma-93oit7iwy "TailGrids Figma - UI Library and Design System for Figma") Article Product Hunt · 3y TailGrids Figma - UI Library and Design System for Figma TailGrids Figma is a Tailwind CSS-integrated Figma Design System and UI Library with over 500 components for marketing, ecommerce, apps, dashboard and more. 42 22. 22 [](/posts/how-to-convert-figma-components-to-next-js-with-tailwind-css-ghgryirnd "How to convert Figma components to Next.js with Tailwind CSS") Article Community Picks · 3y How to convert Figma components to Next.js with Tailwind CSS Learn how to convert Figma designs into Next.js code using Tailwind CSS, and discover the challenges and benefits of this approach. 41 1 23. 23 [](/posts/ai-powered-figma-to-code---use-ai-to-convert-figma-designs-into-clean-responsive-code-eb1hydhk8 "AI-Powered Figma to Code - Use AI to convert Figma designs into clean, responsive code") Article Product Hunt · 3y AI-Powered Figma to Code - Use AI to convert Figma designs into clean, responsive code Automate your design-to-code workflow with AI-powered Figma. Get clean, responsive code in your framework with just one click on a Figma file. No need to modify your design files and easily refine the code. 40 1 24. 24 [](/posts/conditional-css-dhepgfbm "Conditional CSS") Article Ahmad Shadeed · 4y Conditional CSS Conditional CSS has evolved a lot to the point you can see conditional rules. In CSS, there are three conditional rules happening: If the items wrap into a new line, the will work for the horizontal and vertical spaces. If the page direction is RTL (right-to-left) the items will switch their order. 40 3 25. 25 [](/posts/top-5-design-systems-that-streamline-design-process-x69x9a3fn "Top 5 Design Systems That Streamline Design Process") Article UX Planet · 3y Top 5 Design Systems That Streamline Design Process For each design system, we will provide a Figma UI kit so you don’t need to create UI elements from scratch. The HIG is a must-have tool for anyone who wants to build a product for the Apple ecosystem. Microsoft Fluent 2 is the next evolution of Microsoft’s design system. 35 2 [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/2023#page","url":"https://daily.dev/tags/figma/best-of/2023","name":"Best Figma Posts of 2023","description":"The most upvoted Figma posts of 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/figma/best-of/2023#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/uiverse-io-2-0---3500-ui-elements-copy-the-code-or-use-in-figma--lee07viva","name":"Uiverse.io 2.0 - +3500 UI Elements, copy the code or use in Figma!"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/introducing-nextui-version-2-0-jr9pjmhlu","name":"Introducing NextUI Version 2.0"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/generate-figma-designs-with-ai-8gumaifzu","name":"Generate Figma Designs with AI"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/introducing-figma-s-new-dev-mode-r9mpt344e","name":"Introducing Figma’s New Dev Mode"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/building-ai-powered-apps-is-way-easier-than-you-think-j5np5sgcz","name":"Building AI-Powered Apps Is Way Easier Than You Think"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/building-a-design-system-with-tailwind-css-a-step-by-step-guide-cgpzhxkgt","name":"Building a design system with Tailwind CSS: A step-by-step guide"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/figma-to-html-convert-designs-to-clean-html-code-in-a-click-3agdoeten","name":"Figma to HTML: Convert designs to clean HTML code in a click"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/penpot-an-open-source-alternative-to-figma-eucjc5e6y","name":"Penpot: An Open Source Alternative to Figma"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/8-design-system-management-tools-for-organizations-g4ab8j-e3","name":"8 design system management tools for organizations"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/creating-a-scrolling-logo-animation-with-tailwind-css-v88zuvxfw","name":"Creating a Scrolling Logo Animation with Tailwind CSS"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/horizon-ui-landing-kit---landing-library-kit-for-tailwind-css-html-figma-5blh5veep","name":"Horizon UI Landing Kit - Landing Library Kit for Tailwind CSS, HTML & Figma"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/vivid-call-your-designs-from-your-code--rphaz8pux","name":"Vivid — Call your designs from your code."},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/all-the-ways-to-use-a-design-api-nundffcwx","name":"All the ways to use a Design API"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/frames-x---ui-kit-design-handbook-for-figma-uk4vpiztk","name":"Frames X - UI Kit & Design Handbook for Figma"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/uihut---30-000-design-resources---figma-webflow-tailwind-more-gfuqr2dy2","name":"UIHUT - 30,000+ design resources - Figma, Webflow, Tailwind & more"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/design-for-the-web-without-figma-oxqaec7gt","name":"Design for the web without Figma"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/three-plugins-to-convert-your-figma-designs-into-code-yuuoncxpo","name":"Three plugins to Convert your Figma Designs into Code"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/create-your-own-design-system-chapter-color-tokens-erd4ht1qr","name":"Create your own Design system: Chapter Color tokens"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/create-your-own-design-system-chapter-colors-chpc1gpn6","name":"Create your own Design system: Chapter Colors"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/10-ai-website-builders-every-ui-ux-designer-must-try-g1bpy1nic","name":"10 AI website builders every UI/UX designer must try"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/tailgrids-figma---ui-library-and-design-system-for-figma-93oit7iwy","name":"TailGrids Figma - UI Library and Design System for Figma"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/how-to-convert-figma-components-to-next-js-with-tailwind-css-ghgryirnd","name":"How to convert Figma components to Next.js with Tailwind CSS"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/ai-powered-figma-to-code---use-ai-to-convert-figma-designs-into-clean-responsive-code-eb1hydhk8","name":"AI-Powered Figma to Code - Use AI to convert Figma designs into clean, responsive code"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/conditional-css-dhepgfbm","name":"Conditional CSS"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/top-5-design-systems-that-streamline-design-process-x69x9a3fn","name":"Top 5 Design Systems That Streamline Design Process"}]},{"@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":"2023"}]}]} ```