UI Designing Figma Flashcards

24 sample cards from the Figma deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. What is Version History in Figma and how is it useful?

   Version History automatically saves snapshots of a file over time and lets users name versions, restore previous states, and review changes — providing a safety net and audit trail for collaborative work.

2. What is Observation mode (Spotlight/Follow) in Figma collaboration?

   Clicking a collaborator's avatar enters Follow mode, mirroring their viewport as they navigate. 'Spotlight me' invites everyone to follow the presenter — useful for live walkthroughs and design reviews.

3. What is a Design System in the context of Figma?

   A Design System is a centralized, reusable collection of components, styles (color/text/effect), tokens, and guidelines that ensures visual and functional consistency across products and teams.

4. What are the core building blocks you should define first when building a design system in Figma?

   Foundations (design tokens): color styles, typography scale, spacing/grid system, elevation/shadows, and iconography — which then feed into reusable components like buttons, inputs, and cards.

5. What are Variables (Design Tokens) in Figma, and how do they differ from Styles?

   Variables store reusable single values (color, number, string, boolean) that can be organized into collections and modes (e.g., light/dark, spacing scales). Unlike Styles, variables support multiple modes, aliasing, and are closer to code tokens for theming and responsive logic.

6. What variable modes enable in a Figma design system, with an example.

   Modes let one variable hold different values per context — for example a color variable 'surface' can resolve to white in Light mode and near-black in Dark mode, so switching a frame's mode retheme the whole UI instantly.

7. What is a Figma Library?

   A Figma Library is a published collection of components, styles, and variables from a file that other files can subscribe to and reuse, keeping shared assets synchronized across projects.

8. How do you make components and styles from a file available as a Library to other files?

   Open the Assets panel or Libraries menu, then Publish the file's components/styles/variables. Other files enable that library to consume its assets; updates are pushed and can be reviewed/accepted by subscribers.

9. How are library updates propagated to files that use them?

   When a library is republished, subscribing files receive an update notification; the user can review and accept updates, which then apply the changed components/styles/variables to all their instances.

10. What is a Figma Plugin?

    A plugin is a third-party or custom extension that adds functionality to Figma (e.g., icon libraries, content generation, accessibility checks, export tools) by running code against the document via Figma's Plugin API.

11. How do you install a plugin in Figma?

    Browse the Figma Community/plugin section, open a plugin's page, and click Run or Save/Install. Installed plugins are accessed via right-click > Plugins, or the main menu > Plugins in the editor.

12. What technologies are used to build a custom Figma plugin?

    Figma plugins are built with JavaScript/TypeScript using the Figma Plugin API, an optional HTML/CSS UI (iframe), and a manifest.json file that declares the plugin's name, entry files, permissions, and editor type.

13. What is the role of the manifest.json file in a custom Figma plugin?

    manifest.json is the required configuration file that defines the plugin's metadata: name, id, API version, main code file, UI file, supported editor types, network access permissions, and menu commands.

14. In the Figma plugin architecture, why is there a separation between the 'main' code and the 'UI' code?

    The main code (code.js) runs in the Figma sandbox with access to the document API but no direct DOM, while the UI runs in a sandboxed iframe with DOM/browser access but no document API. They communicate via postMessage, keeping document manipulation and interface concerns separated for security.

15. What are Integrations in the Figma context? Give examples.

    Integrations connect Figma to external tools and workflows — for example Slack (notifications), Jira/Asana (task linking), Zeplin/Storybook (handoff), Notion/Confluence embeds, and the REST API/webhooks for custom automation.

16. What does the Figma REST API allow developers to do?

    The Figma REST API lets developers programmatically read file contents, nodes, comments, styles, and components, export images, and (via webhooks) react to file events — enabling design-to-code pipelines and automation outside the editor.

17. What is a recommended high-level design workflow in Figma from start to finish?

    Research/brief → set up frames and grids → low-fidelity wireframes → build/apply design system components and styles → high-fidelity UI design → prototype interactions → gather feedback via comments → hand off in Dev Mode. It is iterative, looping back as feedback arrives.

18. What is Dev Mode in Figma and who is it for?

    Dev Mode is a dedicated workspace for developers to inspect designs — viewing measurements, spacing, colors, tokens, and auto-generated CSS/iOS/Android code snippets, marking sections as ready for development, and linking to code repositories.

19. Give three practical collaboration tips for working effectively in a shared Figma file.

    1) Name layers, frames, and pages clearly and organize with sections. 2) Use components, shared libraries, and consistent styles so everyone reuses the same assets. 3) Communicate via comments/@mentions and use version naming rather than editing over teammates' work.

20. Why is consistent layer and page naming considered a key collaboration best practice in Figma?

    Clear naming makes files navigable for teammates and developers, improves searchability, ensures Smart Animate matches layers correctly, and produces cleaner Dev Mode handoff and exported assets.

21. What performance optimization practices help keep a large Figma file fast?

    Reduce excessive layers and nested groups, use components instead of duplicated elements, minimize heavy raster images and large embedded assets, split very large files into multiple pages/files, flatten complex unused vectors, and detach/clean up unused styles and hidden layers.

22. Why can too many high-resolution images or complex effects slow down a Figma file?

    Images and effects like blurs, multiple shadows, and large vector networks increase GPU rendering load and memory usage; since Figma renders via WebGL in the browser, heavy assets cause lag, slower loading, and reduced responsiveness.

23. How does using components and libraries improve both consistency and performance in Figma?

    Reusing linked instances of a component means the design references one shared definition rather than many independent copies, which lowers file complexity/memory, speeds up global edits, and guarantees uniform appearance across the product.

24. What keyboard-driven feature helps quickly find any menu action, plugin, or command in Figma?

    The Quick Actions / command search bar, opened with Cmd/Ctrl+/ (or Cmd/Ctrl+P), lets you type to run any menu command, plugin, or setting without navigating menus — a major workflow accelerator.

What this deck covers

Figma flashcards FAQ