This course aims to help beginners learn the basics of Figma for UI design. By following a real-world example of building a website from scratch, students will cover topics such as setting up a Figma account, working with design assets, creating frames, grids, shapes, importing images, text manipulation, and designing various website elements like navigation bars, buttons, headers, and footers. The course also delves into advanced features like auto layout, prototyping, and exporting designs. The teaching method involves practical demonstrations and step-by-step guidance. This course is intended for individuals looking to enhance their UI/UX design skills for websites and applications.
Overview
Syllabus
- Figma Introduction
- Figma account setup
- Figma design file
- Figma design assets
- Figma starting basics
- Figma frame
- Figma grid columns and rows
- Figma shapes
- Figma import images
- Figma labeling and grouping
- Figma text
- Figma navigation bar
- Figma button design
- Figma header title & scaling
- Figma text additional settings
- Figma hero section & figma layers
- Figma groups and sections
- Figma fonts and figma colors
- Figma text line height and spacing
- Figma alignment and snapping 2
- Figma masking with shapes and images
- Figma copying groups and sections
- Figma updating sections
- Figma color picker & copying sections continued
- Figma color selecting and picking correct hue
- Figma testimonial section
- Figma autolayout
- Figma auto layout options
- Figma auto layout alignment
- Figma auto layout content
- Figma gallery images
- Figma resize images
- Figma footer
- Figma SVG color and overlay edits
- Figma auto layout menu footer
- Figma layers toolbar, hide and lock
- Figma prototype viewer
- Figma frames and pages
- Figma prototype interactions
- Figma prototype interaction navigation to page
- Figma share test and preview prototypes
- Figma export pages
- Figma export groups or sections
Taught by
Adrian Twarog
