Designing NationBuilder with Figma



The small but formidable NationBuilder design team has been collaborating remotely now for years. As such, we've experimented with various tools to improve our collaboration and communicate our ideas amongst the team with clarity. Because our product has a very large footprint, there's a whole lot of ground to cover. Whether we're exploring concepts for new features, or improving the core user experience, efficiency as a small team is critical.

Recently we replaced Sketch, Abstract and Marvel with Figma, and the improvement has been dramatic. Consolidating multiple tools into one has its obvious benefits (as customers of NationBuilder know!), but the way we're able to collaborate directly on the same canvas in real-time is huge. Discussing complex prototypes can be done with confidence usually only found when in the same room with someone. In general there's less to manage: our work is autosaved into the cloud (with version history), and accessible instantly to anyone (even via a web browser). The comparison to Google Docs is apt.

Our biggest stumbling block was converting our pattern library with hundreds of distinct user interfaces from Sketch to Figma. I kept searching for a quick way to make the imported component library quickly usable but never found one. Ultimately there was a considerable amount of manual work required to rebuild what was imported into what is native to Figma. Thankfully that's a one time chore, and I would encourage others in a similar situation to take the plunge: it will be worth it.

Of course thriving as a remote team requires a lot more than a great tool. It's such a pleasure collaborating with such a fierce and talented set of humans... but Figma is pretty great.