Design

Do you hear the Slack bots sing?

We created our first Figma Community file, the Slack Starter Kit.

Author photo
Lucy Hinton
November 19, 2021

TL;DR–we created a Slack Starter Kit and released it to the Figma Community for all to remix! Duplicate it now and get started building your very own Slack apps.

It was a crispy fall afternoon when Paige and Lucy, Foundry’s newest product designers, started figuring out how to design some Slack bots. The previous week, a couple of teams kicked off some new internal projects the way Foundry always kicks off projects: with a workshop. Ideas were swapped, problems were framed, assumptions were defined. Newly armed with insights from the Foundry folk and a slew of resources from Slack, the two designers were ready to plan out the bots. All they had to do was brush up on best practices for designing a Slack app to get started.  

Miro workshop with many brightly colored sticky notes and charts
Internal Tree Bot workshop led by Paige

Have you ever read Les Misérables by Victor Hugo? At 1,456 pages, it pales in comparison to the amount of documentation Slack has for app building. It is a veritable mountain of information. While it is well written and laid out (we’d definitely give it a Dundie Award), it can be difficult for visual learners to parse through. To assist with the visual design aspect, Slack created Block Kit UI, a Figma Community resource. (Figma is a popular digital design and prototyping tool that enables creators to share and remix design files.) 

Slack interface with a conversation about the new Slack Starter Kit
Interface sample remixed by Paige

Slack’s Figma file is older, and it doesn’t utilize some of the newest features, such as auto-layout and variants. It is also missing Slack’s full interface frame and built-out components that can be useful for remixing. These absent features presented an opportunity to update and design a better user experience for both Foundry internal projects and the Figma Community. 

Paige focused on updating the UI file, building out the Slack interface design, and defining a style guide. Meanwhile, Lucy devised the planning kit and storyboarded ideas to communicate the vital aspects of app planning. The Slack Starter Kit community file is the result of their collaboration.

Storyboard made up of three frames showing a new user how Tree bot works
Tree Bot storyboard by Lucy (who has no idea what a tree-planting drone looks like)

This kit was created as a companion to all of the excellent documentation provided by Slack. It is a space for ideation and creativity (and tree appreciation). For Foundry, this file helps accelerate our ability to create Slack apps. As a bonus, we had the opportunity to publish our first Figma Community file - something we have wanted to do for a while now.

Duplicate the file from our Figma Community page and brainstorm, storyboard, and design your own Slack App and let us know what you create! And keep an eye out for future releases to add even more functionality to your Slack app-building lifestyle.