HI

Built by

hieumessideptrai

Computer Science

Figma UI/UX Design: Designing with a Developer's Mindset

Bridge your existing React and CSS Box Model knowledge to build interactive, responsive designs in Figma. You will design a complete, high-fidelity SaaS Task Workspace from scratch, learning professional UI/UX workflows along the way.

Build it yourself, get guided when you are stuck, and leave with proof you can actually show.

In web development, you write HTML to build structure and CSS to style it. In Figma, you do the exact same thing, but visually.

Instead of typing <div> tags, you draw Frames. Instead of setting a background-color in CSS, you apply a Fill in the properties panel.

Let's open Figma and map what you already know about HTML nesting to Figma's layers.

In Figma, the primary container is called a Frame. Think of a Frame as a <div> with position: relative and overflow: hidden optionality.

Tasks

  1. Open a new, blank design file in Figma.
  2. Press the F key on your keyboard (this activates the Frame tool).
  3. Click and drag on the canvas to draw a medium-sized rectangle.

Look at the left sidebar (the Layers Panel). You will see a new layer called Frame 1 with a small grid icon next to it.

Tasks

To make this feel like a real component, let's give it some CSS-like properties using the right sidebar (the Design Panel):

  • Under Frame on the right, set the width (W) to 350 and the height (H) to 200.
  • Under Fill, click the color square and change it from white to a light gray (like #F0F0F0).

Tasks

Now let's nest some shapes inside our container, just like putting tags inside a <div>.

  1. Press the R key (the Rectangle tool).
  2. Click and drag inside your Frame to draw a smaller box. This will be a placeholder for an image.
  3. Press the O key (the Ellipse tool).
  4. Hold Shift (to keep it a perfect circle) and drag inside the Frame to create an avatar placeholder.

Look back at your Layers Panel on the left.

Notice how the Rectangle 1 and Ellipse 1 layers are slightly indented underneath Frame 1? Figma did this automatically because you drew them inside the boundaries of the Frame.

You have just created this HTML structure visually:

<div class="frame-1">
  <div class="rectangle-1"></div>
  <div class="ellipse-1"></div>
</div>

Tasks

If you drag the circle completely outside of the gray Frame on your canvas, look at the Layers Panel again. What happened to its position in the layer tree? Drag it back inside to see it nest again.

Tasks

In HTML/CSS, elements stack based on their order in the document, or via z-index. Figma uses the order of the Layers Panel to determine what sits on top.

  1. Drag your circle (Ellipse) so it partially overlaps your rectangle.
  2. In the left Layers Panel, click and drag the Ellipse layer below the Rectangle layer.

What to look for: Observe which shape is now hiding behind the other on your canvas. This is the visual equivalent of changing their DOM order or z-index.

Tasks

Just like writing clean class names in HTML, a professional designer never leaves layers named "Frame 1" or "Rectangle 2".

  1. In the left Layers Panel, double-click the name Frame 1 and rename it to Profile Card.
  2. Rename the Ellipse layer to Avatar.
  3. Rename the Rectangle layer to Cover Image.

Tasks

Now that you have your structure, let's style it. Select the Avatar circle on your canvas.

Go to the right sidebar (the Design Panel) and try to:

  1. Change its Fill to your favorite color.
  2. Add a Stroke (border) to it. Make it 3px thick and white.
  3. Add an Effects setting (this defaults to a Drop Shadow). Click the sun icon next to "Drop Shadow" to adjust how blurry or dark the shadow is.

Explain it back

Put it in your own words

When you are done, look at your Layers Panel. You should have a clean, semantic tree structure of a Profile Card with nested, styled elements. How does the hierarchy feel compared to writing raw CSS?

20 more characters

How this build unfolds

From DOM to Canvas: Figma Interface & Layout Foundations

Translate your HTML structural knowledge into Figma's infinite canvas. You'll master vector basics and organize elements using Frames instead of generic groups.

Visual Flexbox: Designing with Figma Auto Layout

Connect your CSS Box Model skills directly to Figma's most powerful feature: Auto Layout. Build self-resizing cards and responsive lists.

Visual Systems: Typography, Colors, and Style Libraries

Step away from arbitrary styling. Build a consistent design system that can translate seamlessly to CSS custom properties.

Component-Driven Design: Reusability and Variants

Apply your React Component and Props mental models directly in Figma by creating master components, variants, and component properties.

Prototyping, Motion, and Developer Handoff

Animate your SaaS workspace to bring it to life and prepare design assets for development.

Learn by building your own version.

Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.