UI Designing Figma Syllabus

Figma syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Figma in UI Designing, not a summary of it.

1. 1

   Introduction to Figma

   2 topics

   • What is Figma?
     • Overview of Figma
     • Why Use Figma?
     • Comparison with Other Design Tools
   • Setting Up Figma
     • Creating a Figma Account
     • Figma Interface Tour
     • Configuring Preferences and Settings
2. 2

   Basic Features and Tools

   4 topics

   • Frames and Layouts
     • Creating Frames
     • Using Grids and Layouts
     • Responsive Design Principles
   • Shapes and Vector Networks
     • Drawing Shapes
     • Using the Pen Tool
     • Editing Vector Paths
   • Text and Typography
     • Adding Text
     • Text Styles and Properties
     • Typography Best Practices
   • Colors and Styles
     • Using Color Picker
     • Creating and Applying Styles
     • Managing Color Libraries
3. 3

   Advanced Features

   3 topics

   • Components and Instances
     • Creating Components
     • Using Instances
     • Overriding Instance Properties
   • Prototyping
     • Creating Interactive Prototypes
     • Using Transitions and Animations
     • Sharing and Testing Prototypes
   • Collaboration Features
     • Real-time Collaboration
     • Commenting and Feedback
     • Version Control and History
4. 4

   Design Systems

   2 topics

   • Building a Design System
     • Creating a Component Library
     • Defining Design Tokens
     • Maintaining Consistency
   • Using Figma Libraries
     • Publishing Libraries
     • Using Shared Libraries
     • Updating and Managing Libraries
5. 5

   Plugins and Integrations

   3 topics

   • Installing Plugins
     • Finding and Installing Plugins
     • Popular Plugins for Designers
     • Managing Installed Plugins
   • Creating Custom Plugins
     • Introduction to Figma API
     • Building a Simple Plugin
     • Publishing Custom Plugins
   • Integrations
     • Using Figma with Other Tools
     • Exporting Designs
     • Integrating with Development Workflows
6. 6

   Best Practices and Tips

   3 topics

   • Design Workflow
     • Organizing Files and Projects
     • Efficient Layer Management
     • Using Templates
   • Collaboration Tips
     • Effective Team Collaboration
     • Handling Feedback
     • Conducting Design Reviews
   • Performance Optimization
     • Optimizing File Size
     • Reducing Load Times
     • Improving Prototype Performance

Figma flashcards for UI Designing

21 of 58 cards from the Figma deck — real questions with worked answers.

1. What is Figma, and what type of application is it?

   Figma is a cloud-based, collaborative interface design tool used for UI/UX design, prototyping, and design systems. It runs in the browser (and desktop/mobile apps) and stores files on Figma's servers so multiple people can work in real time.

2. What is the key architectural advantage of Figma over traditional design tools like Sketch or Photoshop?

   Figma is browser-based and cloud-native, enabling real-time multiplayer collaboration, automatic cloud saving/version history, and cross-platform access (Windows, macOS, Linux, ChromeOS) without local file management.

3. What rendering technology does Figma use to run in the browser at high performance?

   Figma is built on WebGL (with a C++ core compiled to WebAssembly), which lets it render vector graphics on the GPU inside the browser.

4. Name the four main products in the Figma ecosystem.

   Figma Design (the core editor), FigJam (online whiteboard), Figma Slides (presentations), and Dev Mode (developer handoff).

5. When setting up Figma, what account tiers are available?

   Starter (free), Professional, Organization, and Enterprise. The free Starter plan limits the number of edit files/projects and collaborators, while paid tiers add unlimited projects, team libraries, and advanced admin controls.

6. What is the difference between the Figma web app and the Figma desktop app during setup?

   Both offer identical features, but the desktop app adds local font access (uses installed system fonts directly) and better offline handling, whereas the web app requires the Figma Font Helper installer to access local fonts.

7. What is a Frame in Figma, and how does it differ from a Group?

   A Frame is a container that defines a bounded region (like an artboard) and can have its own layout, constraints, clipping, and grids. A Group only bundles layers for joint transformation and takes its bounds from its children, with no independent layout properties.

8. What is Auto Layout in Figma and what problem does it solve?

   Auto Layout is a property added to a frame that makes its children arrange automatically in a row or column with defined spacing, padding, and resizing rules. It solves the problem of manually repositioning elements when content changes, enabling responsive, dynamic components.

9. In Auto Layout, what are the three resizing behaviors for a child element?

   Fixed (keeps a set size), Hug contents (shrinks to fit its children/content), and Fill container (stretches to fill available space in the parent frame).

10. What are Layout Grids in Figma used for?

    Layout Grids overlay a frame with columns, rows, or a uniform grid to align elements consistently, establish structure, and maintain spacing rhythm across a responsive design.

11. What are Constraints in Figma and when do they take effect?

    Constraints define how a child element is pinned or scaled relative to its parent frame (Left, Right, Top, Bottom, Center, Scale, Left & Right, etc.). They take effect when the parent frame is resized, controlling responsive repositioning.

12. What is a Vector Network in Figma and how does it differ from a traditional vector path?

    A Vector Network allows any number of edges to connect at a single vertex, unlike a traditional path which is a single continuous line of connected points. This gives more flexible, non-linear editing of vector shapes.

13. Which tool/mode do you enter in Figma to edit the individual anchor points of a shape?

    Edit mode via the Vector/Pen tool (double-click a shape or press Enter), which reveals vertices and handles for direct manipulation of the vector network.

14. What Boolean operations does Figma provide for combining shapes?

    Union (Union selection), Subtract (Subtract selection), Intersect, and Exclude. They merge, cut, overlap, or remove overlapping regions of two or more shapes non-destructively.

15. What does 'Flatten' do to a Boolean group or vector in Figma?

    Flatten (Cmd/Ctrl+E) merges the selected shapes or Boolean operation into a single, non-editable vector path, permanently combining them into one layer.

16. In Figma typography, what is the difference between line height set in pixels versus set as a percentage?

    Pixel line height sets a fixed distance between baselines regardless of font size, while percentage line height scales relative to the font size (e.g., $150\%$ of a $16$ px font gives $24$ px line height).

17. What is letter spacing (tracking) in Figma and how is it typically expressed?

    Letter spacing adjusts the horizontal space between characters. It can be set in absolute pixels or as a percentage of the font size (e.g., $2\%$), where positive values spread letters apart and negative values tighten them.

18. What are the resizing (auto-resize) options for a Figma text box?

    Auto width (grows horizontally as you type, single line), Auto height (fixed width, grows vertically), and Fixed size (fixed width and height with overflow clipped or truncated).

19. What is the difference between a Color Style and a Text Style in Figma?

    A Color Style saves a reusable fill/stroke color (or gradient) that can be applied across objects, while a Text Style saves a reusable set of typographic properties (font, size, weight, line height, spacing). Both update all linked instances when edited.

20. How does Figma handle color formats, and which values can you input?

    Figma supports HEX, RGB, RGBA, HSL, HSB, and CSS color names. Opacity is set separately (0–100%), and the alpha channel can also be embedded in RGBA/HEX8 values.

21. What is the difference between a Fill and a Stroke in Figma?

    A Fill is the interior color, gradient, or image of a shape, while a Stroke is the outline/border along the shape's path, with its own color, weight, alignment (inside/center/outside), and cap/join style.

See more Figma flashcards →

Planning Figma for UI Designing

Figma (UI Designing) FAQ