1 of 13

High Fidelity Prototyping with Figma

SP00: Design Sprint

CL25

Ajay Gandecha

UNC Department of Computer Science

COMP 423: Foundations of Software Engineering (Fall 2024)��Sit in your assigned tables!

TODO: Make an account on figma.com!

2 of 13

Announcements

COMP 423: Foundations of Software Engineering (Fall ‘24)

  • RD16 (Writing git Commit Messages) and RD17 (Code Reviews) now on GradeScope.
    • Due Wednesday, 10/30.
    • Goal is to get you more familiar with using git in a collaborative environment and industry best-practices.
  • Continue work on SP00.
    • Due Friday, 11/1.
  • Quiz 03 Announcement (Currently scheduled for Wed, 11/6)
    • Topics: RDBMS / SQLAlchemy, Fundamentals of Design, the Tech Stack, etc.

!

!

SP00: Design

High Fidelity Prototyping with Figma

CL25

3 of 13

  • Last Friday, your team made a low-fidelity prototype on a whiteboard for the following feature:
    • Add a page called “Lessons” to the XL site allowing student instructors to post short lessons and modules for other students to learn from.
  • Low-fidelity prototype:
    • Prototype that shows a rough sketch of a UI at a high level.
    • Often done using whiteboards or on sketch paper (often not digital)
    • Inexpensive.
      • Easy to create, change, less formal.

COMP 423: Foundations of Software Engineering (Fall ‘24)

Recall: Low-Fidelity Prototyping

​

SP00: Design

High Fidelity Prototyping with Figma

CL25

4 of 13

  • In contrast, a high-fidelity prototype is a more detailed design, often completed using digital software.�
  • Figma ( ): Popular free prototyping tool.�
  • Figma is an industry-standard tool, and is the primary tool we use to design the UI for the XL site.

​

COMP 423: Foundations of Software Engineering (Fall ‘24)

High-Fidelity Prototyping

​

SP00: Design

High Fidelity Prototyping with Figma

CL25

5 of 13

  • I will show you how to use Figma to replicate the To-Do list assignment’s UI.
  • Follow along:
    • https://go.unc.edu/csxl-figma

​

COMP 423: Foundations of Software Engineering (Fall ‘24)

Tour of Figma

​

SP00: Design

High Fidelity Prototyping with Figma

CL25

6 of 13

  • Task: Using the design you drew, play around with the existing Figma and the components.
  • Try to start prototyping your Lessons page design using Figma! We will spend 20 minutes on this.
  • TAs will be walking around to help.

​

  • Submit on GradeScope.

COMP 423: Foundations of Software Engineering (Fall ‘24)

Figma Workshop

!

SP00: Design

High Fidelity Prototyping with Figma

CL25

7 of 13

  • Task: Create a Figma design that brings your low-fidelity prototype to life as a high-fidelity prototype!
    • First, duplicate the template. You only need to do this once at your table.
    • All group members should work together on this!
      • Consider employing different pair programming strategies if needed.�
  • We will spend 20 minutes on this.
  • TAs will be walking around to help.
  • You will present to other tables around you after this activity.

COMP 423: Foundations of Software Engineering (Fall ‘24)

Figma Workshop

!

SP00: Design

High Fidelity Prototyping with Figma

CL25

8 of 13

  • Odd tables will stand up. Even tables stay seated. �
  • If you were at an odd table: walk to an even table in your zone. Ensure that every even table has a student watching!�
  • When we say go, the even tables will spend 2-3 minutes presenting their design and the features they intended to implement.
    • Odd students, feel free to ask questions!�
  • We will switch after.

COMP 423: Foundations of Software Engineering (Fall ‘24)

Figma Workshop Presentations - Part 1

!

SP00: Design

High Fidelity Prototyping with Figma

CL25

9 of 13

  • Even tables will stand up. Odd tables stay seated. �
  • If you were at an even table: walk to an even table in your zone. Ensure that every off table has a student watching!�
  • When we say go, the odd tables will spend 2-3 minutes presenting their design and the features they intended to implement.
    • Even students, feel free to ask questions!

COMP 423: Foundations of Software Engineering (Fall ‘24)

Figma Workshop Presentations - Part 2

!

SP00: Design

High Fidelity Prototyping with Figma

CL25

10 of 13

  • Submit a screenshot of your final design to GradeScope.

COMP 423: Foundations of Software Engineering (Fall ‘24)

Figma Workshop

!

SP00: Design

High Fidelity Prototyping with Figma

CL25

11 of 13

  • Open questions
    • How did your low-fidelity prototype make it easier to create your Figma design?
    • How many of you changed any features of your low-fidelity prototype once you started designing in Figma?
    • Any other thoughts?

COMP 423: Foundations of Software Engineering (Fall ‘24)

Figma Workshop Debrief

!

SP00: Design

High Fidelity Prototyping with Figma

CL25

12 of 13

  • When submitting prototypes for your design doc, submit at least one high-fidelity prototype (ideally made in Figma).
    • You may also submit extra low-fidelity prototypes if you like.
    • Remember – it is encouraged your team starts trying to make a low-fidelity prototype first!�
  • Questions?

COMP 423: Foundations of Software Engineering (Fall ‘24)

Design Document Prototype

SP00: Design

High Fidelity Prototyping with Figma

CL25

13 of 13

For the rest of class:

    • Work with your teams on SP00.
    • We recommend trying to:
  • Create a low-fidelity prototype of the feature you are working on with your group, keeping your user stories in mind.
  • Work on translating this low-fidelity prototype into a high-fidelity wireframe in Figma.

COMP 423: Foundations of Software Engineering (Fall ‘24)

Work Time

SP00: Design

High Fidelity Prototyping with Figma

CL25