Raven - Write, track and stay updated with your Figma designs

Raven - Write, track and stay updated with your Figma designs

Raven - Write, track and stay updated with your Figma designs

A Figma plugin that lets you document your design decisions, track and update your progress and seamlessly syncs to documentation tools like Trello

image

Plugins used by folks at

image

Overview

A case study about how we shipped a Figma plugin, Raven, made by designers for designers, that lets you document and track your designs at every stage of your process.

Goal

  • To document design decisions/notes for every single screen
  • Track and update your design progress with statuses like To-do, In Progress, Completed
  • Sync your data and status to tools like Trello for transparency

How the problem was identified

  • During my initial days at Freshworks, I identified multiple designers documenting their design decisions right beside their Figma mocks. In addition to this, they could also have some notes for the developers. Some of the designers could have their work in progress, some yet to start and some completed. But one thing was common, every decision was carefully written down beside a mock.
  • Another problem that I identified was - designers being unable to keep track of various mock iterations' status across multiple Figma pages especially during reviews. This leads to confusion for the designer which ones were to-do, work in progress, or completed. All these were especially hard when everyone went to WFH during the pandemic.

As a single source of truth, multiple design teams used Trello/Asana and the likes to track progress. After talking to multiple designers from several companies, we narrowed it down to Trello to integrate with Raven.

Validating the problem statement

Before you get on to build something new, it's highly essential for each and everyone to validate their problem state with the actual users. In this case, it's designers.

  • Learned how designers document their work and communicate with the team
  • Scraped the internet to check for competitors and then realized we're the first
  • Since it's a Figma plugin, we spoke to designers using only Figma.

Understanding the feasibility

Since we can't understand the nuances and the complexity behind an idea, it's always essential to onboard developers who can guide us regarding the feasibility of the solution.

  • Worked with 2 developers, one front-end and one back-end to under tech constraints.
  • Adhered to Figma's Design guidelines to design the plugin in a consistent way. This also helps the learning curve and eases the onboarding for first-time users.
  • Once we understood the feasibility, we finalized the high-level flow that helped the back-end developer build the architecture for the plugin.

Sketching the mocks

As and when we discussed the flows, I started sketching them down in my notebook and this image was shared amongst us as it helps us to align towards the common goal. By rapid sketches, one could definitely save so much time when designing in high-fidelity. In addition to this, it also helps me to understand all the scenarios and edge cases that are possible.

Moreover, low fidelity paper mocks help the back-end developer to design the architecture and the front-end developer to finalize which stack to use.

image

Designing the experience

We wanted to keep the plugin simple and easy to use with just 3 steps.

  • Onboarding
  • Exposing the features of Raven

  1. Whenever a new user installs the plugin, we take them through a set of steps to configure Raven for Figma. We also made sure we know our users effectively to further get in touch with them and get proper feedback from them!

A first-time user needs to know what the plugin does for them which is essentially the value proposition. To interact with Figma's elements and to understand our users we let the users authenticate their Figma accounts.

image
image

  1. Post authentication, we let the designers connect their Figma file's URL which helps the plugin to know on which screens have notes and statuses been used. Hence, whenever the designer comes back to the file at any given point in time, the notes and status of the screens are perfectly intact.

image
image

  1. Designers can quickly get a bird's eye view of the frames by status and jump to the ones that require immediate attention. All status and notes are synced to Trello if that's integrated!

image
image

Testing the plugin manually with designers

We integrated the first build of the plugin to multiple designers' Figma accounts to get a quick feedback from them. Some of the reactions from them -

"I haven't documented designs previously but this will definitely help me document my decisions which will help me in the long run.
"I generally use other tools like Abstract to document my screens but this is free! Once I'm done with my work, I can collect all my notes which will ease my portfolio creation process"
"I can see myself documenting a lot using this plugin. One concern I have is, Trello doesn't suit my workflow since my primary tool for task management is Asana"

We wanted to release Asana integration but it turns out that 70% of the users have Trello in their workflow and only when the demand is high, we wanted to launch Asana integration.

Never design/develop features for just 1 or 2 users. Make sure you've enough requests

After the initial set of feedback we received, we felt it's time to push to get feedback from a larger audience and get some insights so we decided to publish it

Submitting the plugin to Figma

💡 Tip - Figma takes up to 2 weeks of review wherein they check your entire plugin right from the design and functionality and approve it.

After a week of submitting, we got feedback from the Figma team that it was live on the Figma community! 🎉

image

We took a leap

After the plugin was live, we wanted to reach a wider set of audience and let them discover the plugin. What better way to reach people on a faster scale than Product Hunt?

🎉 And to our surprise, Raven was trending on the Product Hunt's main page and we got a DM from the Product Hunt team

image

Some feedback from the community

image