Loading...
Loading...
Master UI/UX design with essential Figma tools, prototyping, and design systems.
Create containers for your designs. Frames act as artboards and can hold layers, components, and nested frames.
Draw perfect rectangles and squares with customizable corner radius and stroke properties.
Draw perfect circles, ovals, and arcs. Hold Shift to constrain proportions to a perfect circle.
Draw straight lines and connectors. Hold Shift to constrain to 45-degree angles.
Draw custom vector shapes and paths using bezier curves and anchor points for precise illustration.
Draw freehand vector shapes and paths. Perfect for sketching, handwriting, and organic illustrations.
Add and edit text layers. Supports auto-layout, responsive resizing, and rich typographic controls.
Pan around the canvas to navigate large designs. Hold the Spacebar for temporary access.
Resize objects and their contents proportionally. Unlike regular resize handles, Scale Tool scales text and stroke widths.
Create reusable design elements. Changes to the main component update all instances across your designs.
Create responsive designs that automatically adapt when content changes. Stack and space child layers dynamically.
Define how layers behave when their parent frame is resized. Essential for responsive and adaptive design.
Save and reuse colors, text styles, and effects across your entire design system for consistency.
Create dynamic design tokens for theming, prototyping, and responsive design with reusable values.
Connect frames to create interactive flows with transitions, animations, and overlay navigation.
Create smooth, automatic animations between frames by matching layer names and identical properties.
Add micro-interactions to components with hover states, button clicks, toggles, and nested interactions.
Leave feedback directly on designs. Tag team members, resolve threads, and maintain design reviews.
Switch to Dev Mode for developers to inspect designs, copy production-ready code, and export assets.
Extend Figma with community plugins for icons, images, accessibility, data visualization, and more.
Draw custom polygons with any number of sides. Adjust corners and create star shapes.
Draw perfect stars with customizable points, inner radius, and rotation.
Draw arrows with customizable heads and tails. Essential for diagrams, flows, and calling out elements.
Combine shapes using Union, Subtract, Intersect, and Exclude to create complex vector forms.
Edit individual anchor points and bezier handles on vector paths for precise shape control.
Use a shape as a mask to hide portions of layers above it. Create clipping masks for images.
Apply layer blend modes like Multiply, Screen, Overlay, and more for creative compositing effects.
Add drop shadows, inner shadows, layer blurs, and background blurs to enhance depth and dimension.
Group related component states (default, hover, pressed, disabled) into a single component set.
Create Boolean, Text, Instance Swap, and Variant properties for flexible, customizable components.
Build complex components by nesting smaller components inside each other for scalable design systems.
Break the link between a component instance and its main component for independent editing.
Replace one component instance with another while maintaining its position, size, and overrides.
The source component that controls all its instances. Changes here update all copies automatically.
Create scrollable content areas within frames. Set horizontal, vertical, or both directions.
Pin elements like headers, footers, or navbars to stay fixed while the rest of the content scrolls.
Create modals, dropdowns, tooltips, and popups that appear over the current screen content.
Automatically trigger prototype interactions after a set time delay for loading states and animations.
Create hover states and button press interactions that revert when the user stops interacting.
Enable dragging on elements for sliders, carousels, swipeable cards, and sortable lists.
View, restore, and manage previous versions of your Figma files with named snapshots.
Publish components, styles, and variables to Team Libraries for sharing across projects.
Organize design files into projects and control team member access and permissions.
See other team members cursors and selections in real-time while collaborating on a file.
Present your designs in full-screen slideshow mode with interactive prototypes.
View detailed CSS, iOS, and Android code for selected elements in Dev Mode.
Export layers and frames as PNG, JPG, SVG, or PDF with customizable settings.
View exact pixel distances between elements by holding Alt and hovering over layers.
Copy ready-to-use CSS, iOS, or Android code snippets for colors, typography, and effects.
Mark layers for export to generate production-ready assets for development handoff.