Figma Fundamentals: Complete Tutorial

02What this Rishtaara course covers

• Interface, frames, layers, and file hygiene
• Shapes, typography, color, and Auto Layout
• Components, variants, styles, and libraries
• Prototyping, collaboration, and developer handoff
• A mini project: mobile app screen + landing hero

03Figma vs other design tools

• Figma — browser + desktop, real-time collab, strong for UI/product.
• Sketch — Mac-only; many teams migrated to Figma for collaboration.
• Adobe XD — similar UI focus; Figma won most team workflows.
• Photoshop / Illustrator — great for photos and illustration; weaker for multi-screen product UI and handoff.

04Create your first file

Sign in → New design file. Name it clearly: Rishtaara — Figma Practice. Files live in drafts or in a team project.

Real-life example: Treat each product or client as a project folder. Keep practice files in Drafts so your team space stays clean.

• Toolbar (top) — move, frame, shape, pen, text, hand, comment
• Layers panel (left) — every frame, group, and object
• Assets panel (left) — components and libraries
• Properties panel (right) — fill, stroke, typography, Auto Layout, constraints
• Canvas (center) — infinite artboard where you design

05Essential shortcuts

• V — Move tool; F — Frame; R — Rectangle; O — Ellipse; T — Text
• Cmd/Ctrl + D — Duplicate; Cmd/Ctrl + G — Group
• Cmd/Ctrl + / — Quick actions search
• Shift + A — Add Auto Layout; Option/Alt + drag — duplicate while dragging
• Cmd/Ctrl + Shift + K — Place image

06Pages inside a file

Use pages like chapters: Cover, Wireframes, UI Screens, Components, Archive. Never dump every experiment on one endless page.

Name pages and frames so teammates (and future you) can find work in seconds.

07Frames are your screens

A frame is a container for a screen or section. Press F, then pick a device preset (iPhone 14, Desktop, or custom size) from the right panel.

Design inside frames — not loose shapes floating on the canvas. Frames clip content, support Auto Layout, and map cleanly to developer viewports.

Real-life example: A frame is like a phone or laptop screen. Everything the user sees lives inside that glass.

08Layer hygiene

• Name layers: Header / Nav / Logo — not Rectangle 47.
• Group related items (Cmd/Ctrl + G) or prefer frames with Auto Layout.
• Lock background layers so you do not drag them by accident.
• Hide unused experiments instead of leaving them overlapping the main screen.

09Constraints (for fixed layouts)

When a frame resizes, constraints tell children how to stick: left/right, top/bottom, center, scale, or left-and-right (stretch).

Use constraints for fixed chrome (sticky headers). Prefer Auto Layout for most modern UI — it is more flexible than constraints alone.

10Basic shapes

Rectangles, ellipses, lines, and polygons cover most UI chrome. Round corners with the corner radius field. Use independent corners for cards with one sharp edge.

Strokes add borders; fills add solid color, gradients, or images. Multiple fills/strokes stack like layers.

11Typography basics

• Press T, click, and type. Pick a font family, weight, size, line height, and letter spacing in the right panel.
• For UI, start with Inter, SF Pro, or system fonts; pair one display face with one body face.
• Use consistent type scale: e.g. 12 / 14 / 16 / 20 / 24 / 32 — not random sizes per screen.
• Line height ~1.4–1.6 for body text; tighter for large headings.

12Color that stays consistent

Pick a primary brand color, neutrals (grays), and semantic colors (success, warning, danger). Store them as Color Styles so every button uses the same token.

Real-life example: Color styles are like branded paint cans. You do not remix a slightly different blue for every wall.

• Check contrast — light gray on white fails accessibility.
• Design in grayscale first for wireframes, then apply color.
• Use HSL or hex consistently; document hex values for developers.

13Why Auto Layout matters

Auto Layout makes frames behave like Flexbox: items stack horizontally or vertically with gap, padding, and alignment. When text grows, the card grows with it.

Almost every modern Figma UI — buttons, lists, navbars, forms — should use Auto Layout.

Real-life example: Auto Layout is like a packing box that expands when you add more items, instead of a rigid wooden crate you must rebuild.

14Create Auto Layout

• Select objects → Shift + A (or right-click → Add auto layout).
• Set direction: horizontal or vertical.
• Set gap between items and padding around the edge.
• Alignment: start, center, end, or space between.
• Hug contents vs Fill container — hug sizes to children; fill stretches to parent width.

15Nested Auto Layout patterns

Nest layouts: a vertical card (image + text stack + button row) with a horizontal button row inside. This mirrors how CSS Flexbox nests in code.

• Buttons: horizontal Auto Layout, padding 12×24, hug contents.
• Lists: vertical Auto Layout, gap 8–12, fill width.
• Navbars: horizontal, space between logo and links.
• Absolute position (sparingly) for badges overlapping an avatar.

16Components = reusable UI

Select a designed button → Create component (Cmd/Ctrl + Option/Alt + K). Instances of that component stay linked to the main. Edit the main once; every instance updates.

Real-life example: A component is a rubber stamp. Change the master stamp and every stamped copy can inherit the update.

17Variants

Variants group related states in one component set: Primary / Secondary / Ghost, or Default / Hover / Disabled / Loading.

Combine properties: Size (sm, md, lg) × Type (primary, secondary). Designers pick properties from the right panel instead of hunting separate components.

• Name properties clearly: Type, Size, State, Icon.
• Keep variant grids tidy — same structure inside each variant.
• Use boolean properties for optional icons or badges when available.

18Overrides vs breaking the link

You can override text and some nested content on an instance without detaching. Detach instance only when you truly need a one-off design — otherwise you lose future updates.

19Text and color styles

Create Color Styles for brand and neutrals. Create Text Styles for Heading / Body / Caption. Apply styles from the style picker — never hardcode random hex or font sizes on every layer.

20Variables (design tokens)

Figma Variables store colors, numbers (spacing, radius), strings, and boolean values. Modes support light/dark themes from one set of tokens.

Map variables to CSS custom properties or Tailwind theme tokens during handoff so design and code share the same language.

• color/bg/primary, color/text/muted
• space/100 = 4, space/200 = 8, space/400 = 16
• radius/sm, radius/md, radius/pill

21Effect styles

Save drop shadows and blurs as Effect Styles (e.g. elevation/sm, elevation/lg) so cards and modals share consistent depth.

Real-life example: Tokens are the recipe book. Styles and variables stop every cook from inventing a new spice mix for the same dish.

22Connect flows

Switch to Prototype mode in the right panel. Drag the connection node from a button to the destination frame. Choose trigger (On click, While hovering, After delay) and animation (Instant, Dissolve, Smart animate, Move in).

23Useful interaction patterns

• Navigate to — move between screens.
• Open overlay — modals and menus without duplicating full screens.
• Swap overlay — switch tabs inside a modal.
• Back — return to previous frame in the flow.
• Scroll to — jump to a section inside a long page.

24Present and test

Press Present (play icon) to click through the prototype. Share a prototype link with stakeholders so they can try the flow without editing the file.

Real-life example: A prototype is a movie trailer of the product. Catch confusing navigation before engineering builds the full film.

25Team libraries

Publish components and styles as a library. Other files enable that library and pull updates. Product teams keep one Foundations file (colors, type, buttons) and many feature files.

26What belongs in a starter design system

• Color and type styles / variables
• Spacing and radius tokens
• Buttons, inputs, checkboxes, toggles
• Cards, navbars, tabs, modals
• Icons as components (consistent size and stroke)

27Versioning mindset

When you publish library updates, consumers review changes before accepting. Breaking a primary button without notice breaks every screen that uses it — communicate major updates like an API change.

Real-life example: A design system is the shared kitchen of a restaurant chain. One recipe for the burger; every branch serves the same quality.

28Work together in real time

Invite editors or viewers with a link. Multiplayer cursors show who is on which frame. Use Observe to follow a teammate during a review.

29Comments

• C for comment tool — pin feedback to a spot on the design.
• Resolve threads when fixed so the file stays clean.
• @mention teammates so they get notified.
• Keep critique specific: 'Increase tap target to 44px' beats 'make it better'.

30FigJam for workshops

FigJam is Figma's whiteboard for brainstorms, user journey maps, and affinity diagrams. Start messy there, then move decisions into design frames.

Real-life example: FigJam is the sticky-note wall; Figma Design is the blueprint that builders follow.

31Inspect mode

Developers open the file (or Dev Mode) to inspect spacing, fonts, colors, and CSS/iOS/Android snippets. Clean Auto Layout and styles make inspect output useful; messy absolute positioning does not.

32What to include in handoff

• All interaction states: default, hover, focus, error, empty, loading
• Responsive frames: mobile, tablet, desktop when layout changes
• Export assets: icons SVG, photos @1x/@2x as needed
• Redlines or notes for animation timing and accessibility (contrast, focus order)
• Link to the prototype for flow context

33Talk like an engineer

Name components to match code (Button / Primary, Input / Error). Document tokens that map to CSS variables or Tailwind theme keys.

Real-life example: Handoff is the recipe card for the kitchen. Missing states force developers to invent behavior — and inventing creates bugs.

34Build this mini portfolio piece

Create one Figma file with two frames: (1) a mobile home screen for a learning app, and (2) a desktop landing hero. Use Auto Layout, components, and color/text styles throughout.

• Frame A — iPhone: status-safe header, course card list, bottom tab bar
• Frame B — Desktop 1440: navbar, headline + CTA, feature row of three cards
• Components: Button (Primary/Secondary), CourseCard, NavItem
• Styles: brand primary, neutrals, Heading and Body text styles
• Prototype: tap a course card → detail frame (optional third screen)

35Acceptance checklist

• No unnamed Rectangle layers on final screens
• Buttons are components with at least two variants
• Spacing uses consistent 4/8pt rhythm
• Text contrast passes a basic WCAG eye check
• Share link works in View mode for feedback

36Continue learning

• Subject hub: /learn/ui-ux-design
• Workflow article: /knowledge/figma-ui-design-workflow
• Full guide mirror: /knowledge/figma-fundamentals
• Next: practice design systems — expand your button and input library
• Pair with HTML/CSS or Tailwind courses to implement your screens in code