How to Add Bullet Points in Figma

Figma is where modern product teams live. It’s where wireframes turn into shipped interfaces, where design handoffs stop being painful, and where entire product roadmaps get visualized before a single line of code is written.

And yet — something as simple as adding a bullet point still trips people up.

You’re in the middle of a design. You need a clean list. You start typing. The formatting doesn’t behave the way you expect. You end up manually copy-pasting dash characters, spacing things by eye, and wondering why a tool used by over 13 million monthly active users makes this harder than it should be.

It doesn’t have to be that way.

This guide covers every method to add bullet points in Figma — keyboard shortcuts, the Type Details panel, manual character input, indentation, spacing controls, and workarounds for the tool’s known limitations. Whether you’re building a presentation, a product spec, or a UI mockup, you’ll walk away knowing exactly how to get clean, formatted lists every time.

Why Bullet Points Matter More Than You Think

Before diving into the how, let’s be clear about the why.

Bullet points transform dense blocks of text into scannable, digestible content that keeps stakeholders engaged during design reviews and presentations. When you structure information hierarchically, you’re actually mimicking how users naturally process interface content. This formatting choice signals to developers and content teams exactly how information should be prioritized in the final product.

That’s not a small thing. 84% of designers collaborate with developers weekly. Every list you format correctly in Figma is one fewer miscommunication in Slack, one fewer revision cycle, one fewer “wait, which items are included again?” conversation.

Figma now supports 13 million monthly active users and is used by nearly 95% of Fortune 500 companies in their workflows. If you’re working inside this ecosystem, knowing it end-to-end — including text formatting — is a professional edge worth having.

The Three Main Methods to Add Bullet Points in Figma

Figma gives you multiple paths to the same result. Pick the one that fits your workflow.

Use the Keyboard Shortcut (Fastest Method)

This is the method most designers don’t know about — and once you do, you’ll never go back to manual dashes.

Here’s how it works:

Select the Text tool from the toolbar, or press T on your keyboard. Click on the canvas to create a new text layer or double-click into an existing one. Once you’re inside the text layer, enter one – or * followed by a Space on Mac or Windows to automatically start a bulleted list.

Figma detects the pattern and converts your text layer into a formatted list instantly.

You can also use ⌘ Command + Shift + 8 on Mac (or Ctrl + Shift + 8 on Windows) to turn an individual text selection or multiple text layers into a bulleted list.

Need a numbered list instead? Use ⌘ Command + Shift + 7 to turn an individual text selection or multiple text layers into a numbered list.

One thing to keep in mind: keyboard shortcuts will activate automatic list styling. Using ⌘ Command + Z immediately after a list shortcut removes the default styling — useful if you trigger it accidentally.

Use the Type Details Panel

If you prefer working through the sidebar rather than keyboard commands, the Type Details panel gives you precise control.

In the right sidebar, under the Text properties section, click to open the Type details panel. From the List style property, select Bulleted list.

Inside your Figma design canvas, find and select the text layer you wish to convert into a bulleted list. After that go to the right-side panel and click the ‘Type Settings’ icon under the Typography section. Locate List Style and select ‘Bulleted List’ from the provided options next to it. After completing these steps, the selected text layer will be transformed into a bulleted list instantly.

This method is especially useful when you’re batch-editing — select multiple text layers at once, open the panel, and apply the list style across all of them in a single action.

Type Bullet Characters Manually

Sometimes you don’t want Figma’s list formatting at all. You just want the bullet character itself — especially when building mockups where the visual appearance matters more than the technical list structure.

Type • by pressing Option + 8 on Mac or Alt + 0149 on Windows. Add a space and type your list item. Press Enter to go to the next line and repeat.

This method gives you full visual control. You’re not locked into Figma’s default bullet style, and you can combine it with any character, icon, or custom symbol you want. The tradeoff: it’s not a “real” list in Figma’s sense, so indentation and spacing controls won’t apply the same way.

Working with Indentation

Figma supports list nesting — which is something a lot of users don’t realize exists.

Figma bulleted and numbered lists currently support five levels of indentation.

To control indentation:

• Use Tab or ⌘ Command + ] (Control + ] on Windows) to increase the indentation of a line.
• Use Backspace or Delete at the beginning of a list item to delete the counter, but keep the same level of indentation. Each line’s indentation can be decreased individually.
• Use Return or Enter while on an empty list item to decrease indentation.

This makes Figma genuinely useful for building content hierarchies — feature lists, spec breakdowns, onboarding flows. Five levels of nesting is more than most design docs will ever need.

Controlling List Spacing

Spacing is where most designers lose time. The default list spacing in Figma isn’t always what you want.

List spacing lets you control the distance between each line item in a bulleted or numbered list. By default, list spacing is set to 0 when creating a new list and for any existing text styles.

To adjust it: open the Type Details panel (the same one you use to set list style), and find the list spacing control. Increase it to give your list room to breathe. Decrease it to tighten things up.

This is separate from line height — which controls spacing within a single list item. If your list looks cramped or too airy, check both settings before assuming something’s broken.

Hanging Lists: The Detail That Makes Your Layout Sharp

Here’s something most Figma users skip entirely — and it shows in their designs.

Toggle hanging lists to move bullet points or numbers of each list item outside of the bounding box. This aligns text content with the bounding box.

What does this mean in practice? Without hanging lists enabled, your bullet character sits inside the text bounding box — which means your actual text content shifts right, and the left edge of your layout looks uneven. Turning on hanging lists pushes the bullet outside the box so your text starts flush at the bounding edge.

It’s a small setting. It makes a visible difference, especially in presentation decks, product specs, and any design where typography precision matters.

Known Limitations — and How to Work Around Them

Figma’s native bullet system is powerful, but it has edges. Knowing where the friction lives saves you from wasting an hour debugging formatting that was never going to behave the way you wanted.

You can’t customize bullet characters natively. At the moment, bullets cannot be customized. Figma bullets will keep the same styling at all levels of indentation. If your brand uses a custom bullet — a checkmark, an arrow, a colored dot — you won’t get it through the native list system.

Bullet color follows the text block, not the list item. This catches designers who want their bullets in a different color than the surrounding text. When you create a list within a body of text and want that list to be a separate color, the bullet will not match the list item color, but instead match the color of the body text.

Numbered lists and mixed content don’t play well together. If you have portions of text where you want a number in the header but do not want the body copy text to have a bullet, the numbered list option will only create a consecutive list if the copy right after it is part of the bulleted list.

Workaround for all of the above: Build your list as a component. Create a component for an individual line item and auto-layout into a list. This approach gives you full control over bullet appearance, color, and spacing — at the cost of slightly more setup time upfront. For complex design systems or branded documents, it’s worth it every time.

Tips for Cleaner Bullet Point Design in Figma

Getting bullets to appear is the easy part. Getting them to look right is where most people cut corners. Don’t.

Keep text styles consistent. If your bullet text changes size or weight mid-list, it’s jarring. Set your list text as a shared text style so it stays consistent across frames.

Use separate text blocks for mixed content. Text settings, like list spacing, stay consistent for text within the same text block. As a workaround, use a separate text block for bullet points to have their own list spacing text setting. This means if you want different spacing for your header versus your list, split them into two layers.

Don’t ignore line height. List spacing and line height work together. A list with generous line height but no list spacing looks like a wall of text. A list with tight line height and too much list spacing looks fragmented. Calibrate both.

Test readability at actual screen size. Zoom out. View at 100%. The list that looks perfect at 200% zoom often looks cramped or oversized at real resolution. Always proof at the size users will actually see.

Stick to three levels of indentation maximum. Figma supports five, but anything beyond three starts reading like a legal document. Two levels is almost always enough for UI content. Three is fine for deep product specs. Beyond that, reconsider whether a list is the right format at all.

When Native Bullets Aren’t Enough: The Component Approach

If you’re working on a design system or producing content-heavy documents at scale, native bullets will hit their ceiling fast.

The component-based approach is the professional solution. Here’s the core workflow:

Create a single list item as a Figma component. Inside it, place your custom bullet character (an SVG icon, a colored shape, a checkbox — whatever your design requires) and a text layer in an auto layout frame. Configure padding, spacing, and alignment. Set the text layer as an overrideable property so each instance can hold different content.

Stack your list item components in a parent auto layout frame. Add as many instances as you need. Adjust spacing at the parent level.

This approach scales. It works across files. It enforces consistency. And it gives you the color control, icon flexibility, and component-level overrides that native Figma bullets simply can’t match.

In 2023, the share of designers using Figma had already ramped up to 90%, while that of Sketch dwindled to 4.5%. As Figma becomes the default, the designers who stand out are the ones who’ve moved past default behaviors — building systems, not just screens.

Conclusion

Adding bullet points in Figma is fast once you know the right methods. The keyboard shortcut (– or * + Space) gets you there in seconds. The Type Details panel gives you control. Manual characters give you flexibility. And the component approach gives you a scalable solution for anything complex.

The real skill isn’t in the mechanics — it’s in knowing which method fits the job. Use native lists for quick specs and wireframes. Use components when your design system needs consistency at scale. Use hanging lists whenever your typography needs to look sharp.

Figma is already where your team does its best work. Now your text formatting can match.