Wirefigma - Wireframe design system for web and mobile

What is Wirefigma?

Wirefigma is a design system optimized for wireframing. It allows you to design web and mobile applications or websites and allows you to iterate fast. You can turn your wireframes into production mockups in only a few minutes.

Why Wirefigma?

Wirefigma was built with a design system under the hood, modeled after the most popular design systems (Google Material 3, IBM Carbon, Shopify Polaris) with all the industry standards on mind. By customizing variables, you can easily integrate your brand in a few minutes and your mockups are ready for development.

Library (38)

• Accordion (Size, Expanded, Disabled)
• Avatar (Size, Inverse)
• Breadcrumb (Active, Icon)
• Button (Type, Size, Disabled, Icon leading, Icon trailing)
• Button group (Size, Active, Icon leading, Icon trailing)
• Button icon (Type, Size, Disabled)
• Button split (Type, Size, Disabled)
• Card (Horizontal, Card—Image, Padding, Title, Text, CTA)
• Checkbox (Checked, Indeterminate, Disabled, Label)
• Date picker (Size, Focus, Disabled, Label, Calendar)
• Dialog (Close, Button left, Button center, Button right)
• Dropdown (Extra items, Icon leading, Icon trailing, Disabled)
• Icon (Size, Symbol)
• Image (Custom)
• Image carousel (Pagination)
• Link (Icon leading, Icon trailing)
• Logo (Inverse)
• Loader (Size, Completion)
• Media map
• Media player
• Navigation top iOS (Button left, Top title, Button right, Large title, Search)
• Navigation top Android (Type, Button left, Top title, Button right)
• Navigation bottom (Active, Bottom direction, Icon, Label)
• Notification (Icon, Button, Close)
• Pagination (Active, Disabled)
• Radio button (On, Disabled, Label)
• Rating (0, 1, 2, 3, 4, 5)
• Select (Size, Focused, Disabled, Label, Text)
• Slider (0%, 25%, 50%, 75%, 100%, Disabled)
• Table (Size, Extra rows)
• Tabs (Active, Top marker)
• Tag (Size, Disabled, Icon leading, Icon trailing)
• Text area (Size, Focused, Disabled, Label, Text)
• Text input (Size, Focused, Disabled, Label, Icon leading, Text, Icon trailing)
• Toggle (Size, On, Disabled, Label)
• Tooltip (Top, Bottom, Right, Left, Wrap)

Tools (7)

• Sticky note
• Callout
• Scrollbar
• Device phone (Status bar, Keyboard)
• Device tablet (Status bar, Keyboard)
• Device desktop (Browser bar)
• Flowlines

Use in FigJam

Share library—In Figma, open Wirefigma and press ALT + 3, then press Publish to publish the library.

Add library—In FigJam, press CMD/CTRL + Option + O to get straight to shared libraries. (Or on the bottom bar click More, select Stickers and then Libraries. Then click + Add your own and select Wirefigma shared library to add it. Next, select Wirefigma library to turn it on in your document.)

Add component—Press CMD/CTRL + 2 to open the search then select the Wirefigma to open the library. Choose any component to be added on the whiteboard.

Swap component—Select the component, click the diamond icon and choose any variant.

Support

Issue reports and feature requests to wirefigma@tiborlovas.com.

Become an affiliate