What is Figma? A Design Crash Course [2021 Tutorial]

Figma is a powerful, browser-based design tool that has taken the UI/UX world by storm in recent years. It‘s used by designers and teams to collaboratively design websites, apps, logos and more—all inside the browser with real-time collaboration.

As a full-stack developer, I‘ve seen firsthand how Figma has revolutionized the design workflow and improved collaboration between designers and developers. In this crash course, we‘ll take an in-depth look at Figma from a developer‘s perspective and walk through designing a real landing page, step-by-step.

Figma‘s Rise to Prominence

Figma launched in 2016 and quickly gained popularity among designers for its free online collaboration capabilities. Over the past few years, it has seen explosive growth and widespread adoption:

• Over 1 million users as of 2020 (up from 500k in 2019) ^1
• 80% of the Fortune 100 use Figma ^2
• 67% of UI/UX design professionals use Figma (vs 61% for Sketch, 35% for Adobe XD, 25% for InVision Studio) ^3

So why has Figma resonated so strongly with the design community? A few key factors:

Real-time Collaboration

Figma was built from the ground up for online multiplayer collaboration. Multiple team members can work together in the same file at the same time, with no syncing or saving required. Changes are instantly visible to all collaborators.

This is a game-changer for teams, especially in our increasingly remote-first world. Designers can quickly iterate together, present work, gather feedback, and hand off assets to developers, all without leaving the browser.

Developer-Friendly Features

While primarily a design tool, Figma has a number of powerful features tailored for developers:

• Code Inspection: Developers can select any element in a Figma design and see its underlying CSS code, making it easy to implement designs accurately.

• Style Guide Generation: Figma can automatically generate living style guides from your design files, complete with code snippets, color palettes, and typography specs.

• API & Platform: Figma has a robust API and developer platform that allows for custom plugins, automations, and integrations with other tools in your stack.

These developer-oriented features make the handoff process smoother and help ensure design-development parity. Instead of redlining specs or exporting static assets, developers can inspect the source of truth directly.

Figma Community

In addition to its core product, Figma has fostered a thriving community of designers and developers who share resources, templates, plugins and inspiration. The Figma Community (https://www.figma.com/community) is a great place to find:

• UI kits and design systems
• Icon and illustration packs
• Wireframe and mockup templates
• Example product designs
• Plugins for added functionality

Many leading tech companies and design systems maintain a presence in the Figma Community, such as Material Design, Ant Design, and Shopify Polaris.

Designing a Landing Page in Figma

Now that we have some context on Figma‘s rise and key features, let‘s get hands-on and walk through designing a landing page from scratch.

We‘ll be recreating this design from Dribbble:

Step 1: Set Up the Frame

After creating a new Figma file, our first step is to create a Frame to serve as our canvas. We‘ll use a common desktop web dimension of 1440×1024. Use the Frame tool (F) and set the size in the Properties panel on the right.

Step 2: Define Colors and Typography

Before we start putting elements on the page, it‘s a good idea to define our color palette and typography. This keeps our design consistent and makes it easy to update globally later.

Open the Figma color picker and create the following Color Styles:

Color	Hex
Primary	#3040C2
Secondary	#FFC043
Text	#172B4D
Background	#F4F5F7

Then, create the following Text Styles:

Style	Font	Size	Weight	Color
Heading 1	Inter	48	Bold	Text
Heading 2	Inter	32	Semibold	Text
Body	Inter	16	Regular	Text
Button	Inter	16	Bold	White

Now we can easily apply these styles to any elements we create, and update them universally later if needed.

Step 3: Navigation Bar

Let‘s start from the top with the navigation bar. Use the Rectangle tool (R) to create a container that spans the full width of the Frame. Give it a white fill and subtle shadow using the Effects panel.

Inside the nav rectangle, add a placeholder logo using an icon or text. Then, use the Text tool (T) to add navigation links, applying the Body Text Style we created.

Finally, create a CTA button with the Rectangle and Text tools. Give it a fill color of Primary and assign the Button Text Style.

Step 4: Hero Section

Below the nav, let‘s create a bold hero section to introduce our product. Use the Rectangle tool to create a container with the Background color.

Add a heading and subheading with the Text tool, assigning Heading 1 and Heading 2 Text Styles respectively. Below that, add a hero image placeholder using the Rectangle or Place Image tools.

Finally, add a prominent CTA button, just like in the nav.

Step 5: Features Grid

In the next section, we‘ll showcase key features in a 3-column grid. Use the Grid tool to create an evenly spaced 3×2 grid.

For each feature, add an icon (using the Place Image tool), a title, and a short description. Apply the Heading 2 and Body Text Styles to keep the hierarchy consistent.

Step 6: Testimonial Carousel

Social proof is a powerful marketing tool, so let‘s add a section with customer testimonials. We‘ll create a carousel component that implies the ability to cycle through multiple quotes.

Start with a Rectangle container, then add:

• Testimonial text (Body style, italic)
• Customer name (Body style, bold)
• Customer title (Body style)
• Navigation dots (small circles to indicate multiple slides)

Step 7: CTA Section

As a final prompt for conversion, include a full-width CTA section with a heading and button, just like the hero.

Step 8: Footer

Finish off the page with a simple footer containing:

• Company logo
• Copyright text
• Social media icons
• Legal links (Terms, Privacy, etc)

Handoff and Collaboration

With the landing page design complete, it‘s time to prepare it for handoff to development. Here are a few key steps:

1. Organize the Figma File: Use the Layers panel to group related elements and give them clear, semantic names. This makes it easier for developers to navigate and inspect the file later.

2. Create Components: If there are any reusable elements in the design (buttons, cards, etc), convert them to Components. This allows them to be easily duplicated and maintained across the design.

3. Add Comments: Use the Comment tool to leave notes for developers about specific elements or interactions. You can also use the Inspect panel to add more detailed notes and specs.

4. Share and Permissions: When you‘re ready, share the Figma file with your development team. You can set granular permissions (view, edit, etc) and even create a custom share link for easy access.

5. Style Guide: Consider creating a living style guide in Figma that documents all the colors, typography, components and patterns used in the design. Figma can automatically generate CSS code snippets for these styles that developers can copy and paste.

The Future of Figma

With its meteoric rise and constant innovation, Figma shows no signs of slowing down. Some key trends and developments to watch:

• Interactive Components: Figma recently released Interactive Components, which allow for even richer prototyping capabilities within Figma. Developers can inspect and tinker with these components to better understand their behavior.

• FigJam: Figma‘s online whiteboarding tool, FigJam, is a powerful complement for ideation and planning. Expect more integrations and crossover functionality between FigJam and Figma.

• Plugin Ecosystem: Figma‘s burgeoning plugin ecosystem allows for extending its functionality in countless ways. Look for more powerful plugins for design automation, code generation, data visualization, and more.

• Design Systems: Figma is becoming the tool of choice for enterprises to build and maintain their design systems. Features like Variants, Auto Layout, and the Figma API make it well-suited for this use case.

Conclusion

Figma has revolutionized the world of UI/UX design and has become an indispensable tool for developers as well. Its real-time collaboration, developer-friendly features, and thriving community make it a compelling choice for teams of all sizes.

In this tutorial, we covered the basics of designing a landing page in Figma, complete with colors, typography, components, and developer handoff. But we‘ve only scratched the surface of what Figma can do.

I encourage you to dive deeper into Figma and explore its more advanced features. The Figma Help Center (https://help.figma.com/) is a great resource, as is the Figma YouTube channel (https://www.youtube.com/c/Figmadesign).

As a developer, I also recommend checking out the Figma API documentation (https://www.figma.com/developers/) to see how you can integrate Figma into your workflow and build custom tools on top of it.

With its constant innovation and growing ecosystem, Figma is poised to be a key part of the product design and development stack for years to come. By learning the tool and collaborating closely with your design team, you can help build better products, faster.

Do you use Figma in your development workflow? What are your favorite features or plugins? Let me know in the comments!