Common terms used in Figma tool.

 Figma, a powerful design tool, employs a plethora of common terms crucial for mastering its functionalities. An "Artboard" is a design canvas, while "Frames" organize elements within it. "Components" are reusable design units, while "Instances" are their derivatives. The "Prototype" feature enables interactive user experiences. "Layers" comprise individual elements, "Groups" hold them collectively. "Masks" hide portions, "Gradients" blend colors. "Alignment" and "Distribute" ensure precision, "Grids" and "Guides" provide layout structure. "Plugins" extend functionality, "Export" saves assets. "Master Components" govern instances, fostering consistency. "Auto Layout" aids responsive design. These "Terms" form the vocabulary for crafting seamless and user-centric designs in the Figma environment.

Here's a more detailed explanation of the terms commonly used in the Figma design tool:

1.    Artboard: A canvas or workspace where you design your user interface. It represents a specific screen or page within your design project.

2.    Canvas: The larger area within Figma where you arrange and design your artboards and other design elements.

3.    Frame: A container that holds design elements such as layers, groups, and components. Frames help organize your design and can be used to define areas of focus.

4.    Layer: A single element within a design, such as text, shapes, images, etc. Layers are organized hierarchically to help manage and structure your design.

5.    Group: A collection of multiple layers or objects grouped together. Groups can be used to organize and manipulate multiple elements at once.

6.    Component: A reusable design element that can be used throughout your project. Changes made to the master component will be reflected in all instances of that component.

7.    Instance: A copy of a master component with the ability to have unique overrides for specific properties while still inheriting most attributes from the master component.

8.    Master Component: The original component that serves as a template. Changes made to the master component affect all instances of that component.

9.    Prototype: Creating interactive links between different frames or artboards to simulate user interactions and flow within your design.

10.                   Wireframe: A low-fidelity, simplified visual representation of a design that outlines the basic structure and content without focusing on visual details.

11.                   Vector: Graphics created using mathematical formulas, allowing them to be resized without loss of quality.

12.                   Shape: Basic design elements like rectangles, circles, and triangles used to create visual components.

13.                   Text: Typography elements that can be added to your design, allowing you to communicate information to users.

14.                   Image: Visual content that you can add to your design, such as photos, illustrations, icons, etc.

15.                   Export: The process of saving or generating design assets (like images) from your Figma project for use in development or other contexts.

16.                   Mask: A layer that defines the visible area of another layer, allowing you to create various effects and crop visuals.

17.                   Gradient: A gradual blend between two or more colors, creating a smooth transition.

18.                   Fill: The interior color or pattern of a shape or text box.

19.                   Stroke: The outline or border of a shape or text, which can be customized in terms of color, thickness, and style.

20.                   Alignment: Arranging elements in relation to each other or a specific point to ensure consistency and visual harmony.

21.                   Distribute: Evenly spacing out multiple elements horizontally or vertically.

22.                   Grid: A visual layout guide that helps you align and organize design elements on the canvas.

23.                   Guides: Horizontal or vertical lines used as visual guides to help align and position elements accurately.

24.                   Pixels: The smallest unit of measurement in digital design, used to define the size and position of elements.

25.                   Zoom: Adjusting the view to make elements appear larger or smaller on the canvas.

26.                   Transform: Changing the size, rotation, or position of an element.

27.                   Rotate: Changing the angle of an element.

28.                   Duplicate: Creating a copy of an element or group of elements.

29.                   Undo: Reverting the most recent action.

30.                   Redo: Reapplying an action that was previously undone.

31.                   Layers Panel: A panel that displays the layers within your design, allowing you to manage their hierarchy and properties.

32.                   Properties Panel: A panel that shows the properties and attributes of the selected design element, such as its size, position, color, etc.

33.                   Assets Panel: A panel where you can store and manage design assets, such as colors, text styles, and components.

34.                   Libraries: Collections of design assets (like components and styles) that can be shared and reused across different projects.

35.                   Constraints: Rules that define how elements within a layout behave when the layout is resized.

36.                   Auto Layout: A feature that automatically adjusts the layout and positioning of elements as you resize the frame.

37.                   Interactive: Design elements that users can interact with, such as buttons or links.

38.                   Click-through: An interactive area that allows users to click on elements behind it.

39.                   Hover: An interaction that occurs when a user hovers their cursor over an element.

40.                   Prototype Link: A link between frames that simulates user navigation through your design.

41.                   Transition: The animation or effect that occurs when navigating between frames.

42.                   Animation: Adding movement and effects to design elements to create a dynamic user experience.

43.                   Easing: The rate of acceleration or deceleration of an animation, affecting its smoothness.

44.                   Overlay: A layer or frame that is shown on top of another frame during interactions.

45.                   Comment: Notes or annotations that can be added to specific elements or areas in the design to provide feedback or instructions.

46.                   Collaboration: The ability to work on a design project simultaneously with other team members.

47.                   Version History: A record of changes made to a design, allowing you to revert to previous versions if needed.

48.                   Shared Styles: Consistent design attributes that can be applied to multiple elements, ensuring visual consistency.

49.                   Typography: The use of fonts, sizes, and spacing to style text in a visually appealing way.

50.                   Color Palette: A collection of colors that are used consistently throughout your design.

51.                   Swatch: A sample of a specific color, often used for consistent color application.

52.                   Export Settings: Configuration options for exporting design assets in various formats and sizes.

53.                   Artboard Background: The base layer of an artboard where your design elements are placed.

54.                   Plugins: Custom scripts or extensions that add extra functionality to Figma.

55.                   Plugin Library: A collection of plugins available for use within Figma.

56.                   Developer Handoff: The process of providing design specifications and assets to developers for implementation.

57.                   Design Tokens: A set of design values (such as colors, typography, spacing) stored in a standardized format for consistency across design and development.

58.                   Responsive Design: Designing interfaces that adapt and look good on different screen sizes and devices.

59.                   Breakpoint: A specific screen size at which the layout of a responsive design adjusts.

60.                   Resizing: Changing the dimensions of an element while maintaining its proportions.

61.                   Inspector: A panel that provides detailed information about the selected element's properties and attributes.

62.                   Vector Editing: The ability to modify vector-based shapes and paths.

63.                   Boolean Operations: Combining or subtracting shapes using operations like Union, Subtract, Intersect, and Exclude.

64.                   Smart Selection: A feature that helps you select multiple elements easily, even if they're partially covered by other elements.

65.                   Slice: A defined area within an artboard that can be exported separately.

66.                   Vectorize: Converting raster images (pixels) into vector graphics (mathematical formulas).

67.                   Scissors Tool: A tool that allows you to cut shapes or paths.

68.                   Pen Tool: A tool for creating custom shapes and paths using anchor points and control handles.

69.                   Masking: Using one layer to hide portions of another layer.

70.                   Opacity: The transparency of an element or layer.

71.                   Blending Modes: Effects applied to layers that control how they interact with the layers below.

72.                   Alignment Guides: Visual cues that appear when you move or resize elements, helping you align them accurately.

73.                   Grid Layout: A layout structure based on rows and columns to create organized designs.

74.                   Pixel Preview: A mode that shows how your design will look at its actual pixel dimensions.

75.                   Device Preview: A feature that allows you to preview your design on different devices and screen sizes.

76.                   Smart Animate: An animation feature that automatically creates smooth transitions between frames.

77.                   Fixed Position: Elements that remain in a specific position even when the user scrolls.

78.                   Auto Height: Adjusting the height of a component or frame automatically based on its content.

79.                   Overflow Behavior: How elements behave when their content extends beyond their boundaries.

80.                   Frame Linking: Connecting frames together to create interactive user flows.

81.                   Background Blur: Applying a blur effect to the background of an element, often used for overlays or modals.

82.                   Component Library: A collection of components that can be reused across multiple projects.

83.                   Plugin API: The interface that allows developers to create plugins for extending Figma's functionality.

84.                   Symbols: An older term for components, representing reusable design elements.

85.                   UI Design: Designing user interfaces for digital products or applications.

86.                   User Flow: The path a user takes through a design or application.

87.                   Hi-Fi Prototype: A high-fidelity prototype with detailed visual and interactive elements.

88.                   Low-Fi Prototype: A low-fidelity prototype with basic visual representations of elements.

89.                   Hotspot: An interactive area that triggers a specific action when clicked or interacted with.

90.                   Color Picker: A tool that allows you to select colors from a palette or enter specific color values.

91.                   Rescale: Changing the size of an element while maintaining its proportions based on predefined ratios.

92.                   SVG Export: Exporting elements or designs as scalable vector graphics for use in web development.

93.                   Code Export: Extracting design assets and specifications for use in coding the actual user interface.

94.                   Collaboration: The ability for multiple users to work together on a design project simultaneously.

95.                   Handoff: The process of transferring design assets, specifications, and resources to developers for implementation.

96.                   Constraints: Rules that define how elements respond to changes in the layout, such as resizing.

97.                   Layer Styles: Preset visual attributes that can be applied to layers for consistent styling.

98.                   Grid Styles: Preset grid layouts that can be applied to frames for consistent alignment.

99.                   Inspect Mode: A mode that developers can use to view design specifications and assets for implementation.

Please note that Figma's features and terminology may evolve over time, so it's a good idea to refer to the official Figma documentation or resources for the most current information.