Rocksite Kit
Figma UI Kit + WordPress Plugin to streamline the process of designing and building websites in Figma & Gutenberg
Figma UI Kit:
Design your website to fit for the WordPress Kadence Blocks from start.
UI Kit that helps you start out any Kadence Blocks project. It includes basic styleguide and design variables that can be mapped in Kadence block settings, such as colors, spacing and typography.
Rocksite Design Library:
Implement your design based on predefined section templates coded by experts.
Rocksite Sections is a collection of sections and blocks using Kadence Blocks, which is built to speed up your WordPress website developments effectively. You can easily deploy your design prepared in Figma or start creating directly in the editor. Select all the necessary sections from the catalog and add them with one click to the editor. You can also import all design variables from Figma with a dedicated option.
HOW IT WORKS
Streamline the process in 4 steps
Step 1
Figma: Open Rocksite Kit
Customize Colors, Typographs and Design variables in the integrated styleguide. Create your layouts using sections and components
Step 2
Figma: Export Design Tokens
Use variables2css Free Figma Plugin to export design variables. Choose Kadence Variables collection. Click on Generate Button and copy generated variables
Step 3
WordPress: Install Rocksite
Downlowad Rocksite Sections Plugin from WordPress directory. After Installation go to seetings page and copy variables generated by Figma Plugin
Step 4
WordPress: Create your layout
Open your WordPress editor, click on Design Library button
and insert all necessary sections based on your design. Now you can publish the project
Our Pricing
The whole set is free
Figma UI Kit
$0
Gutenberg Design Library
$0