Figma Training Plan

I’m not much of a developer. I know a little about a few different things, but not anywhere near where I need to be for creating nice looking applications. I’d consider myself more of a bad back end developer and have historically avoided anything user facing. Honestly, UI design and positioning stuff with CSS frustrates me to the point of tears.

There are a lot of tools that can help with UI / UX design. Unfortunately none seem to do exactly what I’d hoped. I half expected that I’d be able to take my UI mock ups, paste them into some ChatGPT style interface and have aworking UI built by robots automatically. Unfortunatelt, I couldn’t find anything that looks like it’ll do what I need. I’ll keep an eye out tho as the speed that things are moving currently, I wouldn’t be surprised if someone comes out with an AI driven tool in the next few days. There are a few tools around that’ll do bits of the job, but it looks like they either won’t work for anything complex, or would require using multiple tools to get where I need to go. So, it looks like I’m going to have to learn Figma and do it myself. I figured this is probably a decent use of my time as any design skills I pickup will certainly come in handy for other projects.

So my guy ChatGPT has given me an outline of some self paced training which I’ll work through over the next couple of weeks. My plan is to learn figma well enough to knowck up a working prototype for my application between now and the end of my almost 2 week Easter / Anzac day extended holiday.

The ChatGPT proposed training schedule is outlined below. I’m feeling excited to get into it!

Figma is one of the most powerful tools in your product-building toolkit — and learning it quickly will give you total creative control over your startup’s user interface. Whether you’re solo or working with a team, this 7-day plan will get you fluent in the essential Figma workflows.

⚡️ Overview

💡 Goal: Learn to design interfaces with real-world layout, interactivity, and structure.
⏱️ Time required: 30–60 minutes per day
🧠 Output: Reusable components, screen layouts, and clickable prototypes for your app.

✅ Day 1: Setup + Figma Basics

Goal: Understand the workspace and core tools.

Sign up: https://figma.com
Create a new project: ProveItsMe UI Kit
Learn:
- Frames vs Artboards
- Shapes, Text, Alignment tools
- How to place and size layers

🎥 Intro to Figma UI (10 min)

✅ Day 2: Components, Text Styles & Buttons

Goal: Learn reusability and consistency.

Create:
- Primary / secondary / disabled buttons
- Components from these buttons
- Text styles (Headings, Body, Labels)

🎥 Components & Variants in Figma

✅ Day 3: Rebuild Your Upload Flow

Goal: Recreate one full screen.

Use 1440x1024 frame for web
Rebuild your file upload screen
Apply consistent spacing and auto layout

Bonus: Add a Tailwind Figma kit for styling consistency.

✅ Day 4: Auto Layout Mastery

Goal: Make your designs responsive and clean.

Use auto layout for:
- Vertical spacing
- Button padding
- Input + icon alignment

🎥 Master Auto Layout (12 min)

✅ Day 5: Create a Clickable Prototype

Goal: Build interactive flows.

Use Prototype tab to:
- Link screens
- Simulate user clicks
- Create modals and “back” buttons

🎥 Figma Prototyping Basics

✅ Day 6: Polish & Style System

Goal: Make it beautiful and scalable.

Create:
- Shared color styles
- Grid or column system
- Shadows, borders, spacing rules
Reuse components across pages (upload, preview, registry)

Goal: Create a linkable prototype and working system.

Add titles to each screen
Use Share → View Only for dev or investor handoff
Create a home screen linking to other flows

🔧 Resources

Figma Playground: https://www.figma.com/resources/learn-design
Tailwind UI Kit (Figma): https://www.figma.com/community/file/979174586072892508
Figma + Tailwind Tips: https://tailwindui.com

Good luck — and go build something beautiful! 🚀
Let me know if you want the same plan built around React, Framer, or Uizard next!

UI Design Crash Course