Figma’s Three Cs: A Framework for New Users

Starting with a new design tool can feel overwhelming. When I joined Figma as a designer advocate, I was eager but nervous about moving from siloed tools to a collaborative, multiplayer environment. What surprised me most was how natural it felt to riff on coworkers’ designs in real time—and that experience shaped how I now help others learn the platform.

Rather than obsessing over individual features (auto layout one week, prototyping the next), I’ve found it far more effective to group skills into three focus areas: creation, customization, and collaboration. Think of these as rungs on a ladder: you first learn to make a basic element, then you make it flexible and reusable, and finally you share it with your team. By the end, you’re not just a designer—you’re a collaborator providing components and documentation others can build on.

Set Intentions Before You Dive In

Before opening the editor, define what you want to achieve and when. Clear milestones help ground you in what can feel like an ambiguous learning space. A reasonable 90-day plan might look like this:

  • Goals: Learn the basics of Figma and any related tools you need; become an efficient, collaborative teammate.
  • Timeline: Within 30 days, understand basic tooling, collaborative processes, and good file hygiene. By 60 days, pilot a few projects to find gaps in your knowledge. At 90 days, start incorporating advanced features into your workflows.
  • Mindset: Learn by doing—make things, break them, and remake them. Share your work and ask for help on Slack, social media, or the Figma Community Forum. And take breaks; new processes take time to feel natural.

Practice with a Simple Element

A practical way to experience all three Cs is to design a button and, eventually, a button set. Follow along with the playground file to build skills across the full editor:

Step 1: Creation. Get comfortable with the canvas and basic tools to make a usable button:

  • Add a frame for the button and insert a text label.
  • Apply auto layout and adjust padding in the design panel.
  • Create styles for the color and font properties you’ll reuse.

The auto layout playground file offers simple examples showing how to apply it, resize properties, and use advanced settings.

Step 2: Customization. Take the button further with icons and interaction states:

  • Add an icon from the UI kits in your assets panel.
  • Convert the button into a reusable component.
  • Create hover and disabled states as variants.

Variants group similar components into one container. This video walkthrough explains how to use them effectively.

Step 3: Collaboration. Optimize your button for teammates by making it flexible and documenting how it works:

  • Set up text layer and icon swap properties so others can edit the component.
  • Add descriptions for each variant in the component configuration.
  • Publish the library so others can use it in their own files.

The component properties playground dives deeper into making components more adaptable and easier to align with code.

This exercise touches nearly every part of the editor. From here you can extend the ladder—turning styles into variables or making interactive components—but the goal is to experience a broad workflow and identify where you need more guidance or want to explore next.

Tap Into Community Resources

Your first resource should be the Figma Community, which offers thousands of templates, plugins, and files. Duplicate, deconstruct, and experiment with them. Playground files break features into digestible, hands-on lessons. Open-source design systems show how other teams structure their designs and documentation.

If you’re joining a team already using Figma, ask for existing templates, recordings, and other onboarding materials. Some teams host office hours where you can troubleshoot and learn together. You can also pull Apple iOS, Google Material Design, and Figma’s Simple Design System UI kits directly into your assets panel—no need to leave the file to drag and drop editable components. Each kit includes variables, properties, and Code Connect integration, so you can inspect and experiment with professional-grade components as you build your skills.

Learning at your own pace

Every designer’s path through Figma is different, so focus on the tips that resonate with your own workflow. There are plenty of resources to support you: the designer advocates recommend a set of ultra-short videos for quick answers, as well as a series aimed specifically at project managers and marketers who are picking up Figma for the first time.

Setting goals helps, but it’s just as important to make room for experimentation. What can feel overwhelming at first becomes much more manageable when you treat each tutorial or new skill as a step toward the next one. The key is to stay patient and curious—learning Figma is an ongoing journey, not a destination.

More from the Figma blog

Mallory Dean is a Designer Advocate at Figma with a background in product and brand design and a passion for building community and creating content. You can find her on LinkedIn, X, Instagram, and TikTok.

Looking for more guidance? These related articles cover everything from migration to prototyping and design systems: