DesignDojo
Tool Setup

Figma Setup

Set up a clean Figma file and baseline styles for DesignDojo labs.

Official Documentation

Why Figma

Figma helps when you need polished layout decisions, reusable styles, and side-by-side before/after frames. It is ideal for component swap and dark-mode conversion practice.

Step-by-Step Setup

  1. Create or log in to your Figma account and start a new design file.
  2. Create two frames: Desktop (1440 wide) and Mobile (390 wide).
  3. Add text styles for heading, body, and caption so hierarchy stays consistent.
  4. Add color styles for background, surface, primary text, and secondary text.
  5. Build one small sample card using Auto Layout to confirm spacing behavior.
  6. Duplicate the sample card and create one variant change so you verify component reuse.

Test Your Setup

  • You can create frames and Auto Layout containers quickly.
  • You can apply text and color styles consistently.
  • You can duplicate and edit component variants without breaking layout.
  • You can share a view link to your file.

If all four checks pass, you're ready for component-swap and dark-mode-conversion.

Official References