How we came together to build a city with Figma

I am giving online classes for UX and UI basics. The main tool in these classes was the Sketch App, but now the competition in the form of Figma and XD needs a place of its own. The Figma software is attracting more and more people, and for me it was clear that this is where the innovation is happening at the moment (Bye Adobe;)

These programs are not that far apart. What are symbols here are called components there, and artboards are frames, but the general functionality is the same. The biggest and most striking feature that Figma has to offer is the possibility to work together in one document in real-time. The future of collaborative working is here.

One of the methods I used in this 2-week course really led to amazing results and a boost in motivation – let's just call it fun!

A collaborative city building project for UX/UI students. Cover.

A “LOW-THRESHOLD APPROACH” for real teamwork

The challenge was to get people with different levels of experience together to get into this new software and unfamiliar working environment. It had to be something simple without the constraints of technical requirements or processes, something that can motivate people and that does not require a great deal of qualification … like a game.

Playing a game with the freedom to explore and test, to communicate over something simple, a topic that is easy to understand, to combine different skill levels and aesthetic demands, having a common goal.

I stumbled over pictures of the game SimCity that I loved to play centuries ago, and I found many isometric illustrations. The use of an isometric grid makes it possible to establish a simple starting rule and then leave the rest to the students. For an isometric representation, no knowledge of perspective drawing is necessary, because everything takes place in a 30° angle.

A basic isometric-grid
A basic isometric-grid as a starting point

We opened a Figma Education Team and starting a new project called „FigmaCity“. The starting point was a brainstorming session in which everyone participated. We collected and noted down possible themes and for a city together. I created several pages in Figma and breakoutsession in zoom, and my students spread out and got started right away.

From the road construction office to the land office, energy supply, housing or business, etc. Everyone chose a favorite and they started to organise themselves as a team. Like a team in a company that wants to develop a new product, they automatically had to think in an interdisciplinary way, identify their key competences, share, compromise, collaborate, set and achieve goals.

The result was a shared library with many creative items that could then be tested in the first attempt build  a small city.

Flow and motivation

We came back to this project again and again within 3 days. Some were stepping up their efforts to move this city forward and had their “flow moments”, others rather used the environment for discussion and exchange of opinions.

The test areal. Build by the class.
Courtesy of the students

Outcome

The outcome is a vibrant collage of different structures and ideas, sometimes chaotic sometimes very consistent. A picture of the different characters and experiences of the participants. Insights into the difficulties of coordinating optimally and in a short time. The fine line between the ability to understand and compromise on different opinions and the ability to defend and justify important ideas.

Notes on my inspiration

  • Playing SimCity when I was a kid
  • Studying media art & design
  • Teaching ux /ui in a fully remote environment (pushed by a pandemic)
  • User centric design and design thinking processes
  • Modular art and architecture projects I saw or participated in
  • The deep belief that work, learning and teaching should be fun!

About the author

Justus Wunschik is a freelance art director based in Berlin. He studied media art & design at the Bauhaus University, Weimar, lived in Moscow and worked in an international advertising agency, specialized in corporate communications online and currently also gives courses for cimdata.de