Design-bridge

About this plugin

Design-bridge works alongside the design-bridge Chrome extension to turn any live website into a fully structured, editable Figma design system, in one import.Important: design-bridge requires the free companion Chrome extension to extract design systems from websites. Once installed, download your JSON file and import it here. Chrome extension: https://chromewebstore.google.com/detail/design-bridge/cfodakgaggjlcbhpanigajmklfmihdolWhat you get when you import--------------------------------📖 Overview pageA summary of the extracted site showing the source URL, extraction date, total token counts and component counts at a glance.🎨 Design Tokens pageEvery visual token extracted from the site, organised into clearly labelled white-background sections so nothing gets lost against the canvas:Colour swatches: every unique colour found on the site, displayed with its hex value and token name, grouped by hue. Light colours get a border so they're visible on any background.Typography ramp: every font size and weight combination found, sorted largest to smallest, showing the font family, size, and weight as metadata beneath each sampleSpacing scale: every padding, margin and gap value found, shown as proportional bars so the scale relationship is immediately clearBorder radius samples: every corner radius value shown as a rounded square with its pixel value labelledShadow samples: every box shadow rendered on a white card so you can see exactly how each elevation level looks Base Components pageA master component library built from every UI pattern detected on the site. Each component is a proper Figma COMPONENT_SET with multiple variants, named using the Category/Name convention so they appear grouped in the Assets panel automatically. Components include:Buttons: with size variants (XS, SM, MD, LG) and theme variants (Primary, Secondary, Outline, Ghost, Destructive)Inputs, Selects, Checkboxes, Radios, TogglesBadges, Tags, PillsCards: with image placeholder rectangles sized to match the originalNavigation bars, Headers, FootersAlerts, Tooltips, Modals, DropdownsEach component is built with auto-layout, accurate padding extracted from the live site, correct border radii, shadows, and text labels using the site's actual font colours.Images are replaced with solid colour placeholder rectangles sized to the original image dimensions, clearly marked so you know where to drop in real assets.Kitchen Sink pageA ready-to-use reference page showing one live instance of every component's default variant, grouped by category inside white-background section frames. Because these are instances, editing the master in 🔩 Base Components updates every occurrence here automatically. This is the page you hand to your team.VariablesFour variable collections are created automatically:Colors: one variable per colour token, scoped to all fillsSpacing: float variables for every spacing step, scoped to gap and width/heightBorder Radius: float variables for every radius value, scoped to corner radiusTypography: float variables for every font size foundHow to use it:Install the free design-bridge Chrome extensionVisit any website and click Extract Design SystemClick Download JSONOpen this plugin in any Figma file → drop in your JSON → click Build LibraryPublish the file as a Figma library and share it with your teamWhat it works best onProduct dashboards, SaaS tools, design system documentation sites, e-commerce platforms, and any site with a consistent visual language. The more consistent the site, the richer the output.Created by Adeola Oyetade