Course Outline
Overview on Design Concept
Beginner Level
- 1. Introduction to Figma
o Overview of Figma’s interface and tools o Setting up a Figma account and understanding Figma’s cloud-based nature o Navigating projects, files, and pages
- 2. Basic Tools and Features
o Working with frames, shapes, and layers o Using the selection, move, and alignment tools o Understanding the color picker and text tools o Introduction to grids and layouts
- 3. Creating Simple Designs
o Designing basic elements like buttons and cards o Practicing with basic icons and components o Introduction to Auto Layout for simple layouts
- 4. Working with Text and Typography
o Exploring font options, text styles, and alignment o Setting up typography scales for consistent design o Basic typographic hierarchy and readability practices
- 5. Basic Prototyping
o Introduction to interactions and animations o Setting up simple transitions (e.g., on click or hover) o Creating a simple multi-screen navigation flow
Intermediate Level
- 1. Intermediate Layouts and Auto Layout
o Mastering Auto Layout for responsive design o Using constraints for scalable layouts
Course Outline :: Figma Beginner to Advanced Training ::
o Stacking and spacing elements effectively
- 2. Components and Variants
o Creating reusable components and understanding the component hierarchy o Using and managing variants for different states (e.g., buttons with hover states) o Building and updating a small design system
- 3. Collaborative Tools
o Working with comments and feedback o Sharing files for design handoff to developers o Using version history and branching
- 4. Advanced Prototyping and Animation
o Using advanced interactions like overlays, scrolling, and animations o Introduction to smart animate for smoother transitions o Creating complex interaction flows
- 5. Working with Plugins
o Installing and using essential Figma plugins (e.g., Content Reel, Unsplash, Iconify) o Exploring plugins for workflow improvement and design enhancement o Integrating Figma with third-party tools (e.g., Slack, Jira)
Advanced Level
- 1. Design Systems and Style Guide Creation
o Building a comprehensive design system with color, typography, and components o Creating and managing shared libraries for team projects o Updating and scaling design systems for larger projects
- 2. Advanced Responsive Design Techniques
o Using advanced constraints and grid layouts for complex responsive designs o Designing for multiple devices (desktop, tablet, mobile) in one project o Best practices for adaptive and responsive design
- 3. Collaboration and Handoff to Development
o Best practices for design handoff, including asset exporting and spec-sharing o Setting up styles and tokens for developer-friendly handoff o Integrating Figma prototypes into a developer workflow with tools like Zeplin or Avocode
- 4. User Testing and Feedback Loops
o Setting up Figma prototypes for user testing o Gathering and implementing feedback from stakeholders and users
Course Outline :: Figma Beginner to Advanced Training ::
o Iterating on designs based on testing outcomes
- 5. Mastering Figma Plugins and Widgets
o Using advanced plugins for design automation and efficiency o Customizing workflows with widgets and templates o Building custom plugins for unique needs (optional, advanced)
Programme scope, delivery arrangements and suitability are confirmed during enquiry.