UI Designing Figma Syllabus

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.

What is a Component in Figma, and what is its relationship to an Instance?

A Component is a reusable master element (the source of truth). An Instance is a copy linked to that master; changes to the main component propagate to all instances, while instances can still override certain properties locally.

What property overrides can an Instance have that won't be lost when the main component updates?

Overrides such as text content, fill/color, visibility of layers, swapped nested instances, and resized dimensions persist on the instance, while structural changes from the main component still flow through.

What are Component Variants in Figma?

Variants group related components (e.g., a button's states: default, hover, disabled; or sizes) into a single component set with named properties, so users switch between them via dropdowns instead of managing separate components.

What are Component Properties in Figma, and name the four types.

Component Properties expose configurable controls on a component without digging into layers. The four types are: Boolean (show/hide a layer), Instance swap (swap a nested instance), Text (edit a text value), and Variant (switch variant options).

How do you detach an instance from its main component in Figma, and what is the effect?

Right-click the instance and choose 'Detach instance' (Cmd/Ctrl+Alt+B). This breaks the link so it becomes a plain frame/group that no longer receives updates from the main component.

What is Prototyping in Figma?

Prototyping is connecting frames with interactions and animations to simulate how a design behaves, creating a clickable, interactive preview of user flows without writing code.

In Figma prototyping, what are the main trigger types for an interaction?

Triggers include On click/tap, On drag, While hovering, While pressing, Key/gamepad, Mouse enter, Mouse leave, Mouse down, Mouse up, and After delay.

What is Smart Animate in Figma prototyping?

Smart Animate automatically animates (tweens) matching layers between two frames by interpolating their differences in position, size, opacity, and rotation, creating smooth transitions when layers share the same name and hierarchy.

Name common prototype transition animations available in Figma.

Instant, Dissolve, Smart Animate, Move in, Move out, Push, and Slide in/out — each with easing options (Linear, Ease in, Ease out, Ease in and out, and custom cubic Bezier).

What is an Overlay in Figma prototyping?

An Overlay is a frame that opens on top of the current screen (like a modal, dropdown, or tooltip) without navigating away, with configurable position, background, and close-on-click-outside behavior.

What collaboration feature lets multiple designers edit the same Figma file simultaneously?

Multiplayer editing (real-time collaboration), which shows each collaborator's live cursor, selection, and presence in the file at the same time.

What are the sharing permission levels in Figma?

can view (view and comment only) and can edit (full editing). Access can be granted to specific people, anyone with the link, or restricted within an organization; Dev Mode adds a 'can view Dev Mode' access.

What is the Comments feature in Figma used for?

Comments let collaborators and stakeholders pin feedback directly onto specific spots in the canvas or on prototypes, with threads, @mentions, and resolution status, enabling asynchronous review without editing the design.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.