Figma flashcards
Design screens, build clickable prototypes and hand off to developers in one shared file.
Beginner friendly, starts from zero
0
FigmaStart from zero · 1 of 10
What is Figma, in one plain sentence?
Think of the answer, then tap
Figma is a design tool in your browser (or desktop app) where you draw app and website screens, link them into clickable models, and share them live with your team.
One file, everyone in it, always the latest.
Show again
10 left
Got it
Tap to turn over. Swipe right if you know it, left to see it again.
What you will learn
Start from zero
- What Figma is3 cards
- Key words5 cards
- Getting ready2 cards
Core basics
- Frames and layers4 cards
- Auto layout5 cards
- Components5 cards
- Styles and assets3 cards
Next steps
- Variables and modes5 cards
- Prototyping5 cards
- Responsive layout3 cards
- Developer handoff3 cards
- Team libraries2 cards
Go deeper
- Design systems at scale4 cards
- Performance and file health3 cards
- Plugins and API3 cards
- Advanced prototyping3 cards
- AI features and judgment2 cards
- Working as a professional2 cards
Final test and certificate
10 questions drawn fresh from the whole topic, about 15 minutes. Sign in, score 80% or more and get a free certificate with your name and a public check link anyone can open, such as an employer or a teacher. Not signed in? Try a practice test from the cards.
Take the final testAbout these cards
- Reviewed 26 October 2026
- CoversFigma (October 2026)Design Tokens Format Module 2025.10
Checked against
Figma at a glance
Figma is a design tool that runs in the browser, where a whole team can draw screens, link them into prototypes and share them with developers.
Figma is like a shared whiteboard with superpowers: everyone sees the same board live, and anything you draw once can be stamped many times and updated everywhere.
Words you will meet
- Canvas
- The endless drawing space in a Figma file
- Frame
- A box on the canvas that holds a screen or a part of one
- Layer
- Each item in the file, listed on the left, from shapes to text
- Auto layout
- A setting that makes a frame grow and line up its contents by itself
- Component
- A master design, like a button, that you reuse many times
- Instance
- A copy of a component that updates when the master changes
- Prototype
- Screens linked together so people can click through them
- Dev Mode
- A view for developers that shows sizes, colours and code hints
The steps
- 1. Start from zero (10 cards): What Figma is, how a file is organised and the key words you will use.
- 2. Core basics (17 cards): Frames, layers, auto layout, components, variants, styles, export and sharing.
- 3. Next steps (18 cards): Variables and modes, prototyping, responsive layouts, Dev Mode handoff and team libraries.
- 4. Go deeper (17 cards): Design systems at scale, file health, plugins and API, advanced prototypes and AI features.
All 10 cards in Start from zero
- What is Figma, in one plain sentence?
- Figma is a design tool in your browser (or desktop app) where you draw app and website screens, link them into clickable models, and share them live with your team.
- Why do teams use Figma instead of sending image files around?
- Everyone opens the same live file, so there is never a 'final_v7' copy. Teammates can comment, developers can measure, and changes show instantly.
- What else is in the Figma family besides the design tool?
- FigJam is a whiteboard for brainstorming and flows, Figma Slides makes presentations, and Dev Mode is the developer view of design files. Newer tools build sites and prototypes from prompts.
- What are the canvas, a frame and a layer?
- The canvas is the endless space in a file. A frame is a box that holds a screen, like a phone screen. Every shape, text or image inside is a layer, listed in the left panel.
- What does auto layout do, in plain words?
- Auto layout makes a frame arrange its contents in a row or column with even gaps, and grow or shrink when text changes. Change 'Pay' to 'Pay now' and the button widens by itself.
- What is the difference between a component and an instance?
- A component is the master design, like one perfect button. Instances are copies placed around the file. Edit the master and every instance updates.
- What is a prototype in Figma?
- A prototype links frames together with clicks, swipes and animations, so you can tap through the design like a real app on a phone or in the browser.
- What is Dev Mode?
- Dev Mode is a view for developers that shows exact sizes, spacing, colours and code hints for anything they select, and lets designers mark screens as ready for development.
- What do you need to start with Figma?
- A free Figma account, a modern browser (or the desktop app) and a mouse or trackpad. The free Starter plan is enough to learn everything in this topic.
- What will you be able to do after this topic?
- Build tidy responsive screens, reusable components, colour and spacing systems with light and dark modes, clickable prototypes, and handoffs developers love.
Figma cheatsheet
Draw and select
FFrame toolR / O / LRectangle, ellipse, lineTTextPPenKScale tool, resizes everything insideCtrl/Cmd + clickSelect a deep layerAlt/Option + hoverMeasure distance
Organise
Shift + AAdd auto layoutCtrl/Cmd + Alt/Option + GFrame selectionCtrl/Cmd + GGroupCtrl/Cmd + Alt/Option + KCreate componentCtrl/Cmd + Alt/Option + BDetach instanceCtrl/Cmd + Shift + HShow or hide
View and copy
Shift + 1Zoom to fit allShift + 2Zoom to selectionCtrl/Cmd + DDuplicateCtrl/Cmd + Alt/Option + CCopy propertiesCtrl/Cmd + Alt/Option + VPaste propertiesCtrl/Cmd + /Quick actions searchCComment
Auto layout sizing
HugFit the contentsFillTake spare space in parentFixedExact sizeGapSpace between itemsPaddingSpace inside the edgesMin / max widthLimits for Fill children
Prototype actions
Navigate toGo to another frameOpen overlayShow sheet or menu on topSwap overlayReplace current overlayBackReturn to previous frameSet variableChange a stored valueConditionalIf and else logic