Best of Figma — November 2023

1. 1
   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.

   92

   2
2. 2
   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
3. 3
   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
4. 4
   Article

   LogRocket·3y

   17 Figma design systems you need to know about

   Design systems are curated collections of properties, components, and templates used to maintain consistency in digital product design. Some popular design systems include those for Apple, Google, Microsoft, Uber, Salesforce, Shopify, Atlassian, and IBM. Premium design systems offer more versatility and frequent updates. Useful Figma plugins and essential shortcuts can enhance design system management and speed up the design process.

   33
5. 5
   Article

   UX Planet·3y

   New UX Design and A.I Tools that I discovered in October 2023

   Discover new UX design and AI tools, including Figma colour wheel, Jony Eye plugin, and Builder.io.

   33
6. 6
   Article

   UX Planet·2y

   How to automatically generate a component specification and style guide in Figma

   Learn how to automate the generation of component specifications and style guides in Figma using plugins.

   22
7. 7
   Article

   Community Picks·3y

   Building Interactive UX Maps

   Learn about the pros and cons of interactive UX maps and how to build them using design software like Figma or Sketch. Interactive maps can utilize photos and videos, improve comprehension, but can be time-consuming and hard to create. Follow steps like consolidating findings and data, establishing a visual design system, grouping key elements, creating a structure using auto layout, adding actual content, prototyping interactions, and testing and troubleshooting.

   18