Written on June 18, 2024

How I Start a New Figma Project Nowadays

Today, I want to share with you how I start a new Figma project nowadays, whether it's for work or a personal endeavor. Over time, I've honed a process that revolves around a few key tools and design systems that make my workflow efficient and enjoyable. Let’s dive in!

TailwindCSS Design System: My Go-To Resource

Whenever I start a new project, I can’t imagine working without the TailwindCSS Design System. I’ve been a fan of Tailwind since its beta days, and it’s been a game-changer for me. Tailwind’s robust framework offers a comprehensive design system with everything you need: colors, variables, shadows, typography, grids, opacity, borders, and spacing.

For those of you who haven’t tried it yet, I’ve published a TailwindCSS v3.4.4 Design System on Figma Community. This resource is invaluable, and duplicating it is my first step whenever I embark on a new web project.

Getting Started with a New Figma Project

Here’s my typical workflow:

1. Duplicate the Design System: I start by heading over to the Figma Community and duplicating the TailwindCSS Design System. This gives me a solid foundation with pre-set styles and components.
2. Set Up the Project Structure: I create a new page within this file called “UI” or “Wireframes”. This page serves as my canvas for designing and iterating.
3. Leverage Pre-Built Design System: The design system includes a variety of pre-built components like avatars, grids, blur effects, and shadows, which I use extensively. Sticking to these predefined elements not only speeds up my design process but also fosters creativity within constraints.

ShadCN UI: The New Kid on the Block

I have also created Myna UI, a UI kit that combines TailwindCSS with ShadCN UI and Radix UI. ShadCN UI offers additional components such as buttons, dropdowns, and tooltips, which aren’t available in the standard TailwindCSS system.

Here’s why Myna UI is fantastic:

• Comprehensive Theming: It includes theming options that allow for dynamic changes. For instance, modifying one primary color variable updates all associated colors, making theme adjustments seamless.
• Enhanced Components: The combination of TailwindCSS and Radix UI provides a rich set of UI elements that enhance the design possibilities.

When I’m sure I’ll use ShadCN UI for a project, duplicating the Myna UI file from the Figma Community is my go-to move.

Sticking to the System

One of the key aspects of my design process is sticking to the design system. By working within the constraints of TailwindCSS or ShadCN UI, I find that my creativity flourishes. Knowing the limits of colors, sizes, and styles helps me push the boundaries of what’s possible within those parameters, leading to innovative and cohesive designs.

Conclusion

Starting a new Figma project with a solid design system not only streamlines my workflow but also ensures that the end product is both beautiful and functional. Whether you’re a seasoned designer or just starting out, I highly recommend trying out these design systems. They’ve made a world of difference in my projects, and I hope they’ll do the same for you.

Feel free to check out the resources I mentioned and let me know if you have any questions or need any changes in the TailwindCSS design system. Happy designing!