Free ebook on Figma fundamentals: create UI frames, reusable components, responsive layouts, and clickable prototypes.
Free ebook content
-
Figma for Beginners: Setting Up Files, Pages, and Frames for UX Screens
+ Exercise: You want a “Log in” button placed near the bottom of a mobile frame to stay near the bottom even if the frame height changes. Which constraint should you set for the button’s vertical behavior?
-
Figma Fundamentals: Shapes, Text, and Basic Layout Control Inside Frames
+ Exercise: When designing an avatar placeholder that needs consistent cropping, which approach best keeps the layout uniform in Figma?
-
Building Consistency with Color, Typography, Effects, and Styles in Figma
+ Exercise: While auditing a screen in Figma, which outcome best indicates that the design is truly using reusable styles (not one-off values)?
-
Components in Figma for Beginners: Buttons, Inputs, Icons, and Variants
+ Exercise: What is the best approach when you need many buttons to share the same design but differ by state (Default/Hover/Disabled) and sometimes include an icon?
-
Auto Layout in Figma: Responsive UI Rows, Stacks, and Spacing Systems
+ Exercise: In a card header row with a title on the left and an icon/menu on the right, which Auto Layout setup keeps the left and right elements separated automatically while allowing the title to take remaining space?
-
Layout Basics for Product Screens: Grids, Constraints, and Repeatable Patterns in Figma
+ Exercise: When resizing a mobile screen frame wider in Figma, which constraint setup best keeps a header background spanning the width while keeping the title on the left and an icon on the right?
-
Prototyping in Figma: Clickable Flows, Interactions, and Screen Transitions
+ Exercise: When building a prototype, which navigation behavior should you use for a back arrow on the Settings screen so it returns to the previous screen the user came from?
-
Collaboration and Handoff Basics in Figma: Comments, Versioning, and Share Settings
+ Exercise: You’re sharing a Figma prototype for stakeholder review and want them to give feedback without changing the design. Which share setup best matches this goal?
-
Capstone: Creating a Mini UI Kit and Stakeholder-Ready Prototype in Figma
+ Exercise: When assembling the final screens in a capstone Figma file, what practice best keeps the UI kit as the source of truth and avoids rework?
About the free ebook
Figma for Beginners: From Frames to Prototypes
Learn the practical foundations of Figma for UX and UI design, from organizing files and creating frames to building clickable prototypes. This free ebook helps new designers turn early screen ideas into clear, reusable interface designs.
Create organized UI screens
Start with files, pages, frames, shapes, text, and layout controls. Learn how to structure product screens so design work stays easy to edit as a project grows.
Build a consistent interface system
Use color, typography, effects, styles, components, and variants to create reliable interface elements such as buttons, inputs, and icons. Explore Auto Layout, spacing systems, grids, and constraints for responsive screen patterns.
Make designs interactive and ready to share
Connect screens with interactions and transitions to create prototype flows that communicate product behavior. The ebook also introduces comments, versioning, sharing settings, and handoff practices for smoother collaboration.
Apply the workflow in a capstone project
Bring the skills together by creating a mini UI kit and a stakeholder-ready prototype. You will practice designing reusable patterns and presenting a focused product flow with confidence.
What you will practice
- Setting up Figma files, pages, and frames
- Creating styles and reusable components
- Using Auto Layout and constraints for adaptable screens
- Building clickable prototype interactions
- Preparing designs for collaboration and handoff
How do frames work in Figma for UI design?
Frames act as screen or container boundaries, helping you organize layers, apply layouts, and prototype app or web screens.
What is the difference between Figma components and variants?
Components are reusable UI elements; variants group related states or versions, such as default, hover, disabled, or size options.
How does Auto Layout help create responsive Figma designs?
Auto Layout automatically manages direction, spacing, padding, and resizing behavior when content or container sizes change.
This ebook includes:
9 content chapters
Digital certificate of course completion (Free)
Exercises to train your knowledge
100% free, from content to certificate
Ready to get started?
recommended
In the app you will also find...
Over 5,000 free courses
Programming, English, Digital Marketing and much more! Learn whatever you want, for free.
Study plan with AI
Our app's Artificial Intelligence can create a study schedule for the course you choose.
From zero to professional success
Improve your resume with our free Certificate and then use our Artificial Intelligence to find your dream job.
You can also use the QR Code or the links below.
