Shipfaster UI: Figma UI Kit & Design System

Meet Shipfaster UI v2.6: Your new and improved design UI kit! 🚀 We've upgraded our components and added user-friendly variants to simplify your design process. Get ready for clearer labels, more dynamic states, and a sleeker interface. Plus, we've fixed the small issues and made finding icons a breeze.

Shipfaster UI v2.6 is all about making your design work faster and easier. Speed up your workflow—see the changes below.

Changelog:

• Improvement and configuration of all the main components
• Refined semantic naming and dynamic states
• New & improved variants for:
• Progress Step and Progress Bar
• Sidebar
• Input Fields
• Stats
• A new set of icons for File Formats
• Improved semantic naming and states
• New header variants in the marketing samples
• Modified neutrals for better contrast and compatibility with our main primary color
• Improved Video Player component
• Fixed missing component properties and variants
• Descriptions and tags for easier searching of icons
• New and refined visuals for marketing sections
• Off-site component documentation

Shipfaster UI v.2.6 is updated just for you. We aim to bring you an elevated design experience with regular design system updates. Be the first to know about the latest news and changes to Shipfaster UI by subscribing to our newsletter.

Variety matters. A wider selection of component variants to work with ensures a broader audience gets the best possible experience. That’s why Shipfaster UI 2.5 is packed with new components, even more variants, and refined states. 

Changelog: 

• Updated icon set in the latest heroicon
• New "labels" text style in typography foundation to differentiate from paragraphs and headings
• More grid layouts for a responsive guide to sidebar grids
• More sizes and enhanced colors for Focused rings 
• New flag resource with complete country names and ISO
• Added updated social and media logo icons
• New pie chart components
• New chip components
• New video player components
• More variant styles and enhanced states for accordions
• More variant styles for badges
• More variant styles and enhanced states for breadcrumbs
• New icon, social, and social group components for buttons
• New organizational components and templates for data display
• New and specific date and time picker with more variants
• More variant styles and enhanced states for file uploads
• More variant styles and enhanced states for form control
• More variant styles and enhanced states for inline alerts
• Enhanced states, layout and component properties for input fields
• More variant styles and enhanced states for loaders
• More variant styles and enhanced states for progress bars
• Marketing pages samples now have all responsive views from desktop to mobile

Shipfaster UI v.2.5 is updated just for you. We aim to bring you an elevated design experience with regular design system updates. Be the first to know about the latest news and changes to Shipfaster UI by subscribing to our newsletter.

With Shipfaster 2.4, we’ve focused on adding new styles and components in the Foundation section. There are new secondary color ranges, graphic elements and an all new featured Mockup page to supercharge the way you present your designs. We’ve fine-tuned every detail in v.2.4 of Shipfaster UI to help elevate your designs and keep up with the latest trends in the industry.

• 10 new linear palette gradient options 
• 10 new mesh gradient palette options 
• Enhance Shadows to complement UI designs with natural-looking shadows
• New blurred option (XXL) for Blurs
• New 3D graphic elements to enhance your designs visuals
• New divider lines to create spaces and sections in your designs 
• An all-new dedicated Mockup page which includes:
  ‍
• Credit card
• iPhone 14
• iPhone 14 Pro
• Screen Mock Up
• iPad landscape & portrait
• iMac
• Macbook Pro

• New avatar components including:
  ‍
• Integrated avatar icons with indicator for badges, status, and notifications
• Shape variant for the master component to easily switch up avatar shape

• New breadcrumb variants with updated indicators
• Updated designed marketing sections and pages with all new mock-ups and avatars, new secondary color palette (with over 12 color ranges) for more color options

Figma made some major updates to their platform in May 2022. This included component properties, a re-designed Autolayout, dark mode and much more. In v.2.3 of Shipfaster UI, we have decided to introduce a number of updates that have helped improve the kit’s performance and it’s relevancy with the latest updates.

• Removed .styled components to improve the performance of our design system.
• Updated all components with the new component properties and Autolayout feature.
• Updated all templates with the revised components.
• Migrated our icon system from ‘component variants’ to individual components, to allow for an improved toggling experience.
• Added tablet and mobile versions for all templates.
• Provided pre-designed templates for quick use.
• Included a Shipfaster Starter template for anyone that wants to use a lighter version of our design system.

A few members reported seeing ‘3 missing libraries’ upon importing the design system.

• Fixed mission libraries issue.
  

We realised there was a small issue with some members not being able to load all the images in the design file. What we have learnt is that Figma is a browser-based app which means it’s subjected to a 2GB available memory limit that applies to each browser tab, including those in the desktop app. When loading or editing Figma files nears or or exceeds this memory limit, it can cause performance issues like long load times, crashes and others. Please keep in mind when using our design system, to limit the number of browser tabs you have opened.

• Updated file thumbnails.
• Moved checkboxes, radio buttons and toggles into a new section called Form Controls.
• Compressed all JPG images in the file to reduce file size.
• Members that raised images not loading have confirmed this has solved their issues.
  

Today we’re excited to announce the launch of our Shipfaster UI - A Figma Design System 2.0 🎉 This is our first major upgrade and overhaul to our design system.

• 150+ new global design styles.
• 2,800+ new media assets.
• 6,000+ components and variants.
• 140+ template examples.
• Written instructions for every key component.
• Master components provided with all primary components.