Scribd
Upload
89 views2 pages

Figma Bootcamp

The Figma Bootcamp covers three days of training, starting with an introduction to Figma and basic design principles, including setting up accounts and understanding UI/UX concepts. The second day focuses on intermediate tools for designing interactive prototypes, such as using shapes, text, and linking screens. The final day emphasizes advanced features like collaboration, creating reusable components, responsive design, and exporting assets for sharing with stakeholders.

Uploaded by

megh94001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
89 views2 pages

Figma Bootcamp

The Figma Bootcamp covers three days of training, starting with an introduction to Figma and basic design principles, including setting up accounts and understanding UI/UX concepts. The second day focuses on intermediate tools for designing interactive prototypes, such as using shapes, text, and linking screens. The final day emphasizes advanced features like collaboration, creating reusable components, responsive design, and exporting assets for sharing with stakeholders.

Uploaded by

megh94001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

# Notes - Figma Bootcamp

### **Day 1: Introduction to Figma and Basic Design Principles**

**Module: Getting Started with Figma**

- **Introduction to Figma**

Overview of Figma and its importance in modern design workflows

- Real-life example: How companies like Airbnb use Figma for UI/UX design
- **Setting Up Your Figma Account**
- Creating a free account
- Exploring the Figma interface
- **Navigating the Figma Workspace**
- Tools and panels: Toolbar, Layers panel, and Properties panel
- Understanding the canvas and frames
- Example: Creating your first workspace for a mobile app design
- **Basic Design Concepts**
- Understanding UI/UX principles
- Colors, typography, and alignment
- Example: Designing a login screen for an app

---

### **Day 2: Intermediate Tools and Prototyping**

**Module: Designing Interactive Prototypes**

- **Using Shapes and Frames**


- Drawing shapes and working with frames
- Resizing and aligning elements
- Example: Designing a card layout for a social media post
- **Working with Text and Typography**
- Adding text layers
- Choosing fonts and adjusting text properties
- Example: Creating a header and paragraph for a webpage
- **Prototyping Basics**
- Linking screens and frames
- Creating interactive navigation between screens
- Example: Designing and linking a two-page app prototype
- **Adding Images and Icons**
- Importing and using images
- Using Figma plugins for icons
- Example: Adding a profile picture and navigation icons to your app design

---

### **Day 3: Advanced Features and Collaboration**

**Module: Mastering Collaboration and Exporting Assets**

- **Collaborative Design in Figma**


- Inviting team members to a project
- Real-time collaboration features
- Example: Working together on a landing page design for a website
- **Using Components and Variants**
- Creating reusable components (e.g., buttons)
- Building variants for components (e.g., hover states)
- Example: Designing a button with default and hover states for an e-commerce
site
- **Responsive Design**
- Adapting designs for different screen sizes
- Using constraints for responsive layouts
- Example: Designing a homepage that works on both mobile and desktop screens
- **Exporting and Sharing Designs**
- Exporting assets for developers
- Sharing prototypes with stakeholders
- Example: Sharing your app prototype link for client feedback

You might also like