Figma guides

Absolute position in Figma is Ignore auto layout. How to free one child to overlap others, change z-index with canvas stacking, and why you can't move a layer.

Figma auto layout wrap not working? Wrap only exists in Horizontal flow, and a Fill container child never wraps without a min width. Here's how to fix both.

Fill container only shows on children of an auto layout frame, and Hug only on auto layout frames. How Fixed, Hug and Fill work, plus min and max width fixes.

How to use Figma auto layout: add it with Shift+A, pick a flow, then set gap, padding, alignment and resizing. Plus fixes for extra space and missing options.

Figma frame vs group: groups take the size of their children, frames have their own size, clip content and auto layout. Shortcuts to group, frame and unframe.

Figma's auto layout Grid flow puts children into rows and columns. How to set it up, size tracks, span cells, and how it differs from layout guides.

Figma shows only the variants you draw. Here's how to lay out every combination of variant, boolean and nested props as a matrix, by hand or with Instancer.

How to design a skeleton loader in Figma: grey blocks with auto layout, a component with variants, a Smart Animate shimmer, and a plugin that converts frames.

Add boolean, text, instance swap, variant and slot properties to a Figma component, link them to layers, and fix 'not used within component' warnings.

Detach a Figma instance with ⌥⌘B or Ctrl+Alt+B. Why Detach is missing, how to detach a nested instance, and how to turn a main component back into a frame.

Create a Figma component with ⌥⌘K or Ctrl+Alt+K, the Create component button or a right-click. Plus bulk creation, instances and what the purple icon means.

Expose nested instance properties in Figma, fix 'components can't contain instances of themselves' and the swapped-with-parent error, and see what can't change.

Swap a Figma instance from the Instance menu, with Quick insert (Shift+I) or by Alt-dragging a component onto it. Plus go to main, reset and restore shortcuts.

Add a slot to a Figma component with Convert to slot (⌘⇧S or Ctrl+Shift+S) or Wrap in new slot. Settings, limits, and when to use slots vs instance swap.

Export Figma variables to JSON natively, convert them to CSS or Tailwind with Style Dictionary, and move variables between files with Variable Master.

Figma variables now open from the Variables tab in the left nav. If one won't appear in a picker, check its type, scoping and library. Mode switch fixes too.

Bind a boolean variable to layer visibility, then toggle it on click with Set variable and a not expression. Plus why boolean variables stop working in Figma.

Set up Light and Dark modes in one Figma color collection, switch a frame or page with Apply variable mode, and fix modes that won't change in prototypes.

Create text and color styles in Figma, organise them into folders, edit or delete them, fix styles not showing in other files, and know when to use variables.

Create Figma variables from the Variables tab, pick the right type, group and duplicate them, delete the ones you don't need and clear leftover used variables.

How to fill Figma designs with realistic mock data: names, emails, addresses, and AI-written text. Native Figma AI, lorem ipsum plugins, and Mock Master AI.

Local fonts missing in Figma? Check the font installer and Chrome's Local network access permission, restart FigmaAgent, then replace missing fonts in the file.

Dragging a text box in Figma resizes the box, not the type. Press K for the Scale tool to scale text in proportion, or use resizing modes and truncation to fit.

Can't edit text in Figma? Check your seat and can edit access, unlock the layer, edit component text through a text property, and fix missing fonts. Fixes here.

Add a font to Figma: install the .TTF or .OTF file, restart the desktop app or use the font installer in a browser, or upload it to your account for every file.

Add bullet points in Figma with ⌘⇧8, numbered lists with ⌘⇧7, or type - or 1. then a space. Indent up to five levels with Tab and remove a list with No list.

Curve text in Figma with the Text on a path tool: hover a vector path, click and type. Drag the blue handle to move the start, or flip text to the other side.

Set line height in Figma as Auto, px or % in the Typography section. Also covers letter spacing, paragraph spacing, and size and weight shortcuts.

Make a seamless pattern in Figma: pick a tile size, wrap shapes that cross an edge to the opposite side, preview with a pattern fill, and generate grids faster.

Mask in Figma with Ctrl+Cmd+M: put the shape below the content, select both, apply. Why Use as mask fails, how to edit or remove a mask, and inverse masks.

Outline stroke in Figma turns a stroke into a filled shape with Cmd+Option+O. How it differs from Flatten and Outline mode, plus the shortcuts for each one.

Remove an image background in Figma with the Remove background AI action, a free plugin, or a pen-tool mask. Credit costs, plan limits and why it isn't working.

Crop an image in Figma: double-click it, choose Crop image, drag the handles, press Enter. Plus the Cmd/Ctrl-drag quick crop and hiding excess outside a frame.

Union, Subtract, Intersect and Exclude in Figma: the Alt+Shift shortcuts, which layer sets the style, why booleans fail on frames, and how to undo a union.

Add images in Figma with Shift+Cmd+K, drag and drop or the fill picker. How to put an image in a shape, replace it, and choose Fill, Fit, Crop or Tile mode.

Glass and background blur in Figma don't show on a layer with a 100% opacity fill. Fix it, build glassmorphism, and add grain with the Noise and Texture effect.

Figma Design can't paste Excel cells as a table. Build one with auto layout, fill it from CSV or Google Sheets, or import .xlsx files with a free plugin.

Pick a Figma frame size from the Phone, Tablet, Desktop or Paper presets, change an existing frame's size, and why you design at viewport size, not resolution.

Constraints in Figma not showing? In UI3 they sit in the Position section, and only for layers inside a plain frame. Here's why they vanish and how to fix it.

Add a column, row or uniform grid to a Figma frame with layout guides, set count, margin and gutter, remove it, and fix a layout grid that isn't showing up.

Where Figma's snap settings live, how to pause snapping while you drag, why frames always snap to whole pixels, and how to change the nudge amount in Figma.

Turn on rulers in Figma, drag out guides, remove the red guide lines, and measure the distance between layers with Option or Alt. Plus a note on units.

Change Figma's canvas background color, switch the interface to dark or light mode, and set the prototype background. Three different settings, found here.

Figma Design has no connector tool, but you can still draw flow arrows that stick to frames. The native options, the FigJam copy trick, and plugins, explained.

Fixed (stay in place) is disabled when the layer sits in an auto layout frame. Turn on Ignore auto layout or remove auto layout, then set the layer to Fixed.

Most broken Figma prototypes come down to structure: designs outside frames, frames with no connections, nested targets. Fix On click, After delay and more.

Make Default and Hover variants, connect them with While hovering, Change to and Smart animate. Plus why Figma hover states stick or don't fire, and the fix.

Figma scrolling only works when content is bigger than the frame. Set Overflow, clip the content, and fix horizontal, vertical and Scroll to that won't work.

Open a Figma prototype on a phone with the mobile app, a shared link or Mirror. Plus how to fix a zoomed-in prototype, set the device, and fit it to any screen.

Press Shift+E, drag the + from a layer to a frame, and pick a trigger, action and animation. How to add overlays, flows and share a Figma prototype link.

Smart animate tweens layers with matching names between two frames. What it animates, what it skips, and why Figma Smart animate isn't working for you.

Place an MP4, MOV or WebM up to 300MB with Shift+Cmd+K. Which plans can upload video, how GIFs play in Figma prototypes, and what to do about sound.

Make a GIF in Figma from frames with a plugin, export a Figma Motion animation as GIF, or record a prototype. Steps, loop and timing settings, and trade-offs.

Why Figma exports look blurry or pixelated and how to fix it: export at 2x to 4x, pick the right format, check JPG quality and the 4096px image limit.

Export Figma frames as PDF from the Export section or File > Export, keep file size down, and combine several frames into one PDF with a plugin.

Figma has no DPI setting: exports are 72 DPI times the scale. For 300 DPI, export at about 4.17x or set a pixel width. What to do about PDF and CMYK too.

Export from Figma as PNG, JPG, SVG or PDF: the Export section, scale, bulk export shortcut, transparent backgrounds, and what to do if Export is missing.

Save a Figma file to your computer with Main menu → File → Save local copy. You get a .fig file without version history or comments that reopens as a new file.

Figma library or components not showing? Add the library to the file, publish and accept updates, and check the Invalid list. Every cause, most common first.

Change Figma edit access from the Share menu: set a person or the link to can view or can edit. Stuck on view-only? You also need a seat that covers the file.

Open Figma version history from the file name menu, save named versions with Cmd+Option+S, and restore or duplicate any earlier version. Limits by plan inside.

Create a Figma library: build components, styles or variables in one file, then Assets → Libraries → Publish. Plan and seat rules, drafts, hiding assets.

Share a Figma file from the Share menu: choose who the link works for and whether they can view or edit. Plus private files, prototype links and ownership.

Press C and click to add a comment in Figma, then Enter to post. Shift+C shows or hides comments. Where resolved and missing comments go, and who can comment.

How Figma annotations work in Design and Dev Mode, which seats can add and view them, how they differ from comments, and when an annotation plugin helps.

What a Figma design spec should include, how to build a component spec template by hand, what Dev Mode already covers, and how to generate specs with Autospec.

Open Figma Dev Mode with Shift+D or the toolbar toggle. Which plans and seats get it, why you see "can't access Dev Mode", and how to inspect without it.

Every Figma keyboard shortcut Figma documents, for Mac and Windows: tools, layers, auto layout, components, text, zoom, prototyping and panels, in one list.

The Figma auto layout shortcut is Shift+A on Mac and Windows. Here are the keys to remove and suggest auto layout, plus what to do for Ignore auto layout.

The Figma shortcuts to show or hide layout guides and the pixel grid on Mac and Windows, why Figma's own pages list two different keys, and when the grid shows.

Zoom in and out in Figma, zoom to fit or to a selection, hide the UI and scale the interface, with Mac and Windows shortcuts and fixes for when zoom gets stuck.

Figma text shortcuts for underline, bold, italic, links, font size, weight, line height, letter spacing and lists on Mac and Windows, plus a fix for stuck caps.

Figma plugins not loading, missing or greyed out? Check your seat and edit access, org approval, network blocks and cache. A step-by-step checklist that works.

Fix Figma's "WebGL isn't supported" error: turn on graphics acceleration, check WebGL, update to a supported browser, and fix Edge tracking prevention.

Figma not loading, showing a blank white screen or crashing? Check Figma's status, your browser version, WebGL, the desktop cache and file memory, in order.

Figma slow or laggy? Each file gets 2GB of memory. Check the memory meter, find heavy layers, and cut hidden layers, variants, big images and extra pages.

Figma shortcuts or Ctrl+Z not working? Figma assumes a US QWERTY keyboard. Set your real layout in Preferences, then check undo, redo and Show/Hide UI keys.

Clear the Figma desktop cache with Help > Troubleshooting > Reset Figma and Restart, or delete the cache folders on Mac or Windows. Plus the browser method.

Figma plugins don't need installing: open one from the Community or run it inside a file. Steps for Figma Design, Dev Mode, FigJam, Slides, saving and admins.

A Figma plugin runs for one person and closes when done. A widget is an object on the canvas everyone can see and use. When to pick which, with examples.

Figma Design has no table tool. Build one from a cell component and nested auto layout, add rows in one keystroke, or generate a styled table with a plugin.

Add icons in Figma with an icon plugin, a shared icon library, or by pasting SVG code, which imports as editable vectors. Plus how to recolour and export icons.

Figma has no chart tool. Build a simple bar chart from auto layout rectangles, or use a chart plugin to draw line, bar and pie charts from your own data.