The Brand SDK is currently in Beta.
Start using our Brand SDK to create custom Content Blocks to extend the Guidelines' visual and functional control.
Before diving into the Brand SDK, we quickly mention that the Brand SDK is a significant component within our available Developer Platform Capabilities. It also includes specific APIs (GraphQL & Asset Processing, Webhooks) and Widgets (Finder, Authenticator), making Frontify an open platform for all Brand Builders.
What is the Brand SDK?
Frontify Guidelines come along with about 40 pre-built Content Blocks such as Color, Typography, Image Grids, Do & Don't, and much more. Using our Brand SDK (built for Devs), you can create your custom Content Blocks living next to those pre-built blocks within the same environment. You can either use them privately (within your environment) or make them public throughout the Frontify Ecosystem.
The Brand SDK connects all the essentials for Developers making this a thought-through experience.
The Brand SDK includes
1 – Command-line Interface (CLI)
Run and test your Content Block, including these use cases:
Generate an example Content Block from our template for a fast and easy start
Run your Content Block locally for testing and development
Deploy your Content Block to the Marketplace for publication
2 – Design System
Make use of an ever-expanding Design System. Start using pre-built React UI components from our Design System.
3 – App Bridge
Connect your Content Block with Frontify assets. Customize and save your Content Block settings.
4 – Marketplace
Submit your Content Block through our built-in Marketplace
How to Build your first Content Block by using the Brand SDK
(Timing & Planning, Preconditions & Step by Step approach)
Before you start, we recommend following this simple step-by-step approach and reading through the preconditions to make the creation of your first Content Block a success.
Timing & Planning
It’s possible to develop a Content Block within a few days, but please be aware that building the first block requires more time to get familiar with the Brand SDK and the underlying concept.
Preconditions
You need an idea (What type of Content Block do you want to build?)
You need ReactJS & TypeScript know-how and developer capacity
You should familiarize yourself with our Brand SDK and check out our Documentation
Step by Step approach to creating your first custom Content Block
Concept Phase
Create a high-level concept of the custom Content Block. We’re continuously adding material for your design/prototyping needs (see documentation). We recommend familiarizing you with the block settings concept to make your block editable.
Setup Development Environment
Setup the Development Environment and familiarize yourself with how you can create, run and test your first block (see documentation).
Start Developing your Content Block
Familiarize yourself with the Guideline settings we provide and how you can store them via the AppBridge and make your block editable.
The rollout of your Content Block
Finally, you can roll out your first block (soon via the Marketplace) to a specific Frontify Environment. Reach out to us for the Block deployment while the Brand SDK is still in Beta.
Maintenance & Improvements
Once your Content Block is available within your private Frontify instance (or public), you can submit updates and maintain your block (e.g., fixing a bug).
Support
We are here to support you – Join our Slack Channel (#brandsdk-blocks) for specific questions while building.
Sample – Creating a Typeform Block (Step-by-Step Guide)
To learn from best practices, we recommend reading this step-by-step guide about creating a Typeform Content Block living in Frontify.
Have you got any questions? Get personal support from our team.
If you have any further questions, please don't hesitate to join our dedicated Brand-SDK Slack channel or contact our support team.