What is Figma? - A Fun Design Tool

What Can You Do With Figma?

Figma is an all-in-one design tool that lets you create amazing things with simple drag-and-drop controls.

Design Apps & Websites

Create beautiful interfaces for phone apps or websites with easy-to-use tools.

Collaborate in Real-Time

Work with friends on the same project at the same time, even if you're far apart!

Bring Ideas to Life

Turn your sketches and ideas into professional-looking designs in minutes.

How Does Figma Work?

It's easier than you think! Follow these simple steps to start creating.

1

Create a New File

Start with a blank canvas or choose from hundreds of templates made by other creators.

2

Add Elements

Drag and drop shapes, text, images, and more. Resize and rearrange until it looks perfect.

3

Customize Everything

Change colors, fonts, and sizes with simple controls. Make it match your unique style.

4

Share Your Work

Show your design to friends, get feedback, or even publish it online for everyone to see.

Figma interface showing a design project with various elements and tools

Figma in Action

See how designers use Figma with this simple example.

simple-button.fig

// Creating a button component in Figma
const button = figma.createFrame();
button.name = "Awesome Button";
button.resize(200, 50);
button.cornerRadius = 8;
button.fills = [{ type: "SOLID", color: { r: 0.95, g: 0.31, b: 0.12 } }]; // Figma orange

// Add text to the button
const text = figma.createText();
text.characters = "Click Me!";
text.fontName = { family: "Inter", style: "Bold" };
text.fontSize = 16;
text.fills = [{ type: "SOLID", color: { r: 1, g: 1, b: 1 } }]; // White text

// Center text in button
text.x = button.width / 2 - text.width / 2;
text.y = button.height / 2 - text.height / 2;

// Add button to canvas
button.appendChild(text);
figma.currentPage.appendChild(button);

// Make it interactive
button.on("click", () => {
  alert("Button clicked!");
});