Bootstrap to Figma: A Migration Guide for Bootstrap Teams

Why Bootstrap Teams Migrate to Figma

Bootstrap is still the most-installed CSS framework on the web. Millions of production apps — admin dashboards, SaaS products, internal tools — were built with Bootstrap 4 or 5 and have never had a Figma counterpart. That creates a real problem when a design system initiative kicks off, a rebrand lands, or a new designer joins the team and needs accurate references.

The standard answer is to buy a Bootstrap UI kit for Figma and customize it. The problem: those kits reflect vanilla Bootstrap, not your Bootstrap — not your custom theme variables, your overridden components, your brand colors. You're starting from a generic baseline and manually bridging to reality.

A faster path exists: convert your actual rendered Bootstrap HTML into Figma. The browser already knows exactly what every btn-primary, card, and row looks like after your theme variables are applied. html2design lets you capture that rendered output and import it directly as native Figma layers.

How the Conversion Works

Bootstrap's utility classes like text-primary, p-3, and d-flex are just CSS. When the browser renders your page, it resolves every class — including your custom $primary Sass variable — into computed pixel values. By the time you inspect an element in DevTools, Bootstrap's class names are gone: what you see is color: rgb(13, 110, 253), padding: 16px, and display: flex.

html2design reads that resolved HTML and CSS output — not the class names — and maps it to Figma's native primitives. Flexbox containers become Auto Layout frames. Colors become fills. Border radii, shadows, and typography all transfer correctly. This is why it works with Bootstrap without any special Bootstrap support: the hard part (resolving the cascade) is already done by the browser before you even click Copy.

Step-by-Step: Convert Bootstrap to Figma

Handling Bootstrap's Grid System

Bootstrap's grid is one of the most common things teams want to migrate. A typical layout uses .container, .row, and .col-md-6-style classes to create responsive columns. Here's what happens when you convert it:

• .container — Renders as a max-width block. In Figma, it becomes a Frame with a fixed or fluid width and horizontal centering.
• .row — Bootstrap rows use display: flex; flex-wrap: wrap. In Figma, this becomes an Auto Layout frame with Wrap enabled and negative margin resolved.
• .col-md-6 — At the md breakpoint, this resolves to flex: 0 0 auto; width: 50%. In Figma, it maps to an Auto Layout child with a fill or fixed width depending on context.
• .g-3 (gutters) — Bootstrap 5 gutters apply --bs-gutter-x and --bs-gutter-y CSS variables, which resolve to padding on columns. html2design captures the computed padding values.

The cleanest migration strategy for grid layouts is to convert each row separately, then assemble the columns in Figma. Converting an entire .container at once works but produces a deeply nested layer tree. Working row by row keeps the output manageable.

Bootstrap Utility → Figma Auto Layout Mapping

Bootstrap 5's utility system and Figma's Auto Layout cover much of the same territory. Here's how the most common Bootstrap layout utilities map after html2design processes them:

Bootstrap's spacing scale (p-1 through p-5, m-auto, etc.) resolves to concrete pixel values based on the $spacer variable in your build — typically 4px through 48px. Because html2design captures the computed values, any customizations to that scale are automatically preserved.

Capturing Bootstrap Responsive Breakpoints

Bootstrap's responsive classes — col-sm-12 col-md-6 col-lg-4 — activate at different viewport widths. To capture each breakpoint in Figma:

1. Open DevTools and click the device toolbar icon (or press Cmd+Shift+M in Chrome)
2. Set the viewport width to the target breakpoint:
   • xs: below 576px — set to 375 (mobile)
   • sm: 576px — set to 576
   • md: 768px — set to 768
   • lg: 992px — set to 992
   • xl: 1200px — set to 1200
   • xxl: 1400px — set to 1400
3. Wait for the layout to reflow at that width
4. In the Elements panel, copy the outerHTML of the component
5. Import it into html2design
6. In Figma, name the resulting frame to reflect the breakpoint: Card / Mobile, Card / Tablet, Card / Desktop

Pair the breakpoint frames as Figma Component Variants so designers can toggle between them in one place. This is the closest Bootstrap-to-Figma equivalent to a responsive component set.

Bootstrap Components: What Converts Cleanly

Bootstrap's component library covers a wide range. Here's what to expect from each category:

Cards, alerts, and badges

These convert with high fidelity. They're simple flex containers with padding, border, border-radius, and background fills — all of which html2design handles fully. Import these component-by-component and you'll have a complete set in Figma within minutes.

Buttons

Bootstrap buttons (btn btn-primary, btn btn-outline-secondary, etc.) convert correctly including border, border-radius, padding, and text styling. For interactive states (hover, active, disabled), use DevTools' Force element state to trigger the state before copying, or manually add the disabled attribute to capture the disabled variant.

Navbars

Navbars are best converted at desktop width where they render in their horizontal expanded form. The mobile collapsed state (hamburger menu) is a separate layout — capture it at xs/sm viewport width. The result in Figma is two separate frames; use Variants to switch between them.

Modals and dropdowns

Modals require a small DevTools trick: open the modal via your app's normal interaction, then copy the .modal.show element before it disappears. Alternatively, open DevTools, find the modal in the Elements panel, and manually add the show class and display: block style to render it without JavaScript. Then copy its outerHTML.

Forms

Form inputs (form-control, form-select, form-check) convert well for their default, focused, and error states. Use DevTools' Force element state for :focus to capture the focused ring appearance before copying.

Tables

Bootstrap tables (table table-striped, etc.) convert to a grid of frame rows and text cells. The output is functional but often benefits from being rebuilt as a proper Figma table component after the initial import — use the import as a reference for dimensions and typography rather than the final deliverable.

Migrating a Complete Bootstrap Design System

If your goal is a full Bootstrap-to-Figma design system migration, a phased approach works best:

• Phase 1 — Tokens: Identify your Bootstrap Sass variables ($primary, $spacer, $font-size-base, etc.) and register them as Figma Variables. Use one reference component import to verify that the pixel values match.
• Phase 2 — Atoms: Import buttons, badges, form inputs, and icons. These are the smallest reusable pieces. Convert each state (default, hover, disabled, error) and create Figma Components with Variants.
• Phase 3 — Molecules: Import cards, alerts, list groups, and input groups. Link atom components from Phase 2 where applicable.
• Phase 4 — Organisms: Import navbars, sidebars, modals, and full-page section layouts. These reference the molecules you've already set up.
• Phase 5 — Pages: Assemble page templates from the component library. These are mostly layout — grab the grid structure from html2design and place the components from your library.

A team of two (one developer exporting HTML, one designer assembling in Figma) can typically cover all Bootstrap atoms in a day and molecules in another day. Full organisms and page templates add another two to three days depending on complexity.

Compared to Bootstrap Figma UI Kits

Bootstrap Figma UI kits give you a generic starting point, but they can't capture your customizations. When you've extended Bootstrap with a custom color palette, overridden button border-radius, or added your own component variants, no kit reflects that. You'd spend days manually aligning the kit to your actual application.

html2design converts your running application — custom theme and all. The tradeoff is that you're capturing snapshots rather than receiving a pre-organized kit. That's actually fine for design system work: you want to document what your components look like in production, not what an idealized kit suggests they should look like.

For a full breakdown of HTML-to-Figma approaches, see our comparison of HTML to Figma tools.

Frequently Asked Questions

Can I convert Bootstrap components to Figma?

Yes. Open your Bootstrap project in a browser, right-click any component in DevTools, and copy its outerHTML. Paste it into html2design. The browser resolves Bootstrap's utility classes to computed CSS before you copy, so html2design receives exact pixel values — not class names.

Does html2design support Bootstrap's grid system?

Yes. Bootstrap's grid is built on CSS Flexbox. When the browser renders a .row and its .col-* children, the computed layout is a flex container with flex-basis and width values. html2design maps these to Figma Auto Layout frames.

How do I capture different Bootstrap breakpoints?

Resize DevTools' viewport to the target breakpoint (e.g., 768px for md), wait for the layout to reflow, then copy the outerHTML. Import each breakpoint separately and pair the resulting Figma frames as Component Variants.

Do I need to install a Bootstrap Figma plugin or kit?

No. html2design works from the rendered HTML of your actual Bootstrap project. Your custom theme, Sass variable overrides, and brand colors are all preserved automatically. No generic kit configuration required.