Best of Figma — 2023
- 1
- 2
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.
- 3
builder.io·3y
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.
- 4
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.
- 5
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.
- 6
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.
- 7
- 8
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.
- 9
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.
- 10
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.
- 11
- 12
- 13
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.
- 14
- 15
- 16
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.
- 17
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.
- 18
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.
- 19
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.
- 20
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.
- 21
- 22
- 23
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.
- 24
Ahmad Shadeed·3y
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.
- 25
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.