Accelerate your collaborative design & prototyping with Figma

Anil Kumar
Aug 26, 2017 · 4 min read
Prototyping with Figma at SAP Berlin

On August 16th 2017 we had Turn Ideas into Products Faster with Figma event as part of Berlin Lean Prototyping meetup group.

How Figma is different from other existing prototyping tools?

Figma is Sketch plus Google docs plus Git on the Browser.

Yes, in a nutshell it’s all in one tool! You can draw & create icons, share your design just like sharing google docs with collaborative live editing and version control of your designs. It has tons of great features for designer to build high fidelity designs & prototype in a single tool.

In this Introduction to Figma workshop I introduced following Figma concepts with hands-on exercise to meetup participants.
1. Frames
2. Components
3. Import/Export
4. Prototype
5. Versioning
6. Creating icons

Introduction to Figma

Prototyping challenge

Design Podcast mobile App

After the introduction to Figma, we had a design challenge session, group of 2 to 3 people in a team designing, prototyping & user testing using Figma.

For designing mobile podcast app we used Spotify sketch template from Sketch App resource. You can download sketch files here. Since it’s a prototyping challenge, we spent most of the time on working with designing, prototyping & user testing. We didn’t spend time on discovery phase or user research.

1. Designing

Importing Spotify sketch template file into the Figma, changing themes, creating reusable UI components. While importing Sketch file into Figma, Artboards are converted into groups, make sure to change it’s layer type to Frame from group so that you can connect to frames during prototyping.

Discussing & Designing on Figma

2. Prototyping

Started transforming frames(kind of artboards) into a testable prototype using hotspots in the prototype mode. Learn more about Figma prototyping.

https://help.figma.com/prototyping/prototyping-presenting

3. User testing

Using Figma’s share link option, all teams tested other teams prototypes.

Links to few prototypes created during the workshop.

1.https://www.figma.com/file/yQZ0wOyRzC7hthUgpPTmvP/BLP-Figma-Spotify-design-Spotify-Material-Copy

2. https://www.figma.com/file/fkPA3ggwNcleU0ArUABEbz/BLP-Figma-Spotify-design-Spotify-Material-Copy

3. https://www.figma.com/file/VxUkrMldrrPkpKAbQNCzhw/Facebook-iOS-10-Figma-Copy-Copy

4. Pitch Session

All teams presented their approach, prototype and experience with Figma.

Feedback from participants

  • Great option for Windows user, I don’t have to buy to work on Sketch, I can work with Figma- meetup participant
  • Figma is a state of the art tool — meetup participant
  • Figma functionalities are very intuitive — meetup participant
  • Figma live collaboration feature is awesome — meetup participant
  • Impressed with how 3 people are working on same design, quick & instant feedback — Anil Kumar

Thanks

Thanks Figma, for supporting us and SAP Berlin for sponsoring venue, drinks & food.

Lessons learned

  1. Had a blast giving my first workshop on Introduction to Figma. Will be doing it more in coming months.
  2. Again proved, it is possible to Build Measure Learn within 2 hours!

Follow us on Twitter @Berlinlean & Anil Kumar to get more information on Lean Prototyping.

Lean Prototyping

Lean Prototyping

)

Anil Kumar

Written by

Lean Product Manager, Prototyper, Javascript Developer, Founder of Berlin lean prototyping

Lean Prototyping

Lean Prototyping

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade