Figma
The Sprocket Rocket modules as a Figma design system, with every release and what changed.
Welcome to the Sprocket Rocket Design System, optimized for efficient and straightforward design in Figma. Perfectly integrated with Sprocket Rocket Stack and PRO, this system simplifies your design workflow, allowing you to focus on creating high-quality projects effortlessly.
- Section Components: one for every module in Sprocket Rocket
- Removed the need for external libraries, making the SR Design System compatible with Figma's Free plan
- New Content Block component to simplify spacing between commonly used content elements (Icon, Tagline, Heading, Subheading, Body, Buttons)
- New simplified Card component: now all cards have consistent padding
- New Flex Grid component to be used for accurate spacing when nested
- New Input / Input Group components for consistent spacing when creating forms
- Redesigned Style Guide
- Redesigned Welcome page
Download and use it
The design system comes with the Stack and PRO portal licenses. An organization with a portal on Stack or PRO, or a Stack or PRO license, downloads it in the app: open Organization settings, then Billing, then Figma. Only owners and admins see the tab. The latest release is at the top, and every earlier release with a file can still be downloaded there.
- Download the
.figfile from the Figma tab. - In Figma, open the file browser and import the
.figfile. It works on Figma's free plan. - Design your pages from the section components. Each one matches a module, so every section you place has a module to build it with.
- Apply the same colors, typography, and spacing in Theme settings so the built pages match the design.
- Build the pages in the Page Builder from the matching modules, or have Sprocket Rocket AI build them.
See Pricing for what each license includes.