January 11, 2018

Froala Design Block Sketch Template

Sharing Design Tools for Improving Design Thinking

As most agencies will tell you, the different tools used by designers and developers don’t always lead to seamless team communication. Developers and designers speak different languages and prioritize different aspects of the phases of producing a digital project. Reaction’s creative team dove deep into finding a solution that would minimize that gap in communication. We are pleased to tell you the story of how we found the Froala Design Blocks project and created our own custom Sketch library that we can use to ensure both teams are speaking the same framework language.

The Tools of Our Workflow

Our design team recently introduced the design software Sketch from Bohemian B.V. into our work flow. Our development team was already utilizing the benefits of the Bootstrap 4 framework to bring our custom designs to life. Integrating the flexible logic of Froala’s design blocks into a Sketch library allowed us to leverage a common vocabulary that both designers and developers could quickly see and understand. We’re excited to share the Sketch file with you here as our contribution to the design community.


Sharing within the Community

Froala Design Blocks were released in October 2017 using the recently updated Bootstrap 4 framework. The Froala team set out to create HTML/CSS code blocks that follow existing user experience patterns on various devices. Froala released Design Blocks as an open-source project under their own FOWDL 1.0 license. The blocks provide a strong foundation for the common standards and patterns users expect while still allowing custom designs and design ideas to be explored when a unique design solution is needed.

Froala provides all the required visual assets within their source code, but we wanted our design process to match our development workflow. For us, that meant creating design assets that lined up with the development ones in a format that our UX and UI designers could edit. We decided to create a Sketch-based version of the Froala Design Blocks that our design team could use to design and create custom solutions with when we create new digital projects for our clients.

The Benefits of Shared Knowledge

The open source HTML/CSS library with JPGs and visual asset PSDs helped speed development time; our creative team set forth to leverage the same system in Sketch. This meant recreating all elements available in the Froala Design Blocks as Sketch symbols that could easily be laid out into page structures.

One of the biggest benefits of Sketch is the ability for symbols to be created and nested within other symbols. At Reaction, we adhere to the Atomic Design Principles of Brad Frost and, in building our Sketch library of elements, we first created the design blocks and then the atomic components broken down into even smaller symbols. This allows us to be very dynamic in the design process and test our work with users and our clients more easily and quickly than ever. That’s why, within the Sketch file, you’ll find every element set up both as Froala Design Blocks within the Froala categories and also as Atoms and Molecules you can interchange very easily following the Atomic Design Principles. The best path to knowledge and execution of knowledge is to ensure you can combine the best philosophies and approaches and this is our gift to you.

Go Forth And Conquer

For Reaction, developing a Sketch library to match the Froala design blocks has enabled our design team to clearly and consistently communicate the details of their vision to our developers. Now, our development team knows exactly which usability pattern our designers have chosen to communicate our client’s objectives. The gap between design and development has closed considerably!

It is the entire Reaction team’s pleasure to share this valuable resource with you. We reached out directly to the Froala Design Blocks team to provide this resource for them to share as well.


If you haven’t already done so, please visit Froala Design Blocks to learn more about this exciting project. And while you’re adding to your knowledge, spend some time reading more about Brad Frosts’ Atomic Design Principles. The more you know, the better prepared you are to implement ‘Design Thinking’ into your work flow. Creativity is always a team and community approach and sharing through collaboration will always bring a higher level of success.