Roll for UI

An adventurous way to learn Figma wireframing and sprints, confidently

My Role
Product Designer
Project
Design Education
Timeline
3 days for Webflow site
Continuous improvement
Tools
Figma, Webflow, Slack


I have been trying to learn Figma auto-layout and components for the last two years and something has not clicked. I’ve watched the Figma YouTube tutorials, bought countless courses, read some books, and everything you could think of. I’ve followed along with these courses, but if I didn’t get something, I would just quit, get bored, or forget about it.

Then came along, Roll for UI! I have been watching every version of Roll for Sandwich (Adventures in Aardia) on Tik Tok, from Roll for Grilled Cheese, Roll for Pizza, Roll for Coffee… you get the idea. Creating new things in different formats/mediums is what I really excel at.

Website: https://roll-for-ui.webflow.io/

Existing Solutions

User Inyerface

UI Adrian eBooks

Figma on Youtube

Gaps

Opportunities

Rolling the Dice

We will be using Dungeons and Dragons dice that include D4 (4 sided), D6 (6 sided), D8 (8 sided), D10 (10 sided), D12 (12 sided), and D20 (20 sided). I like to use the Google Dice, but you can use what you're comfortable with.

Step 2

Roll the number from your orientation roll listed below.For example, if you rolled a 1, you will now roll D8 for iPhone.

1. iPhone - D8
Purple dice with number 8
1. iPhone 14 & 15 Pro Max
2. iPhone 14 & 15 Pro
3. iPhone 13 & 14
4. iPhone 14 Plus
5. iPhone 13 mini
6. iPhone SE
7. iPhone 8 plus
8. iPhone 8
2. Android - Coin flip!
Android Small
Tails
Android Large
Heads
3. Tablet - D4
Green Dice with number 4
1. Surface Pro 8
2. iPad mini 8.3
3. iPad Pro 11"
4. iPad Pro 12.9"
4. Desktop - D6
Blue dice with number 6
1. MacBook Air
2. MacBook Pro 14"
3. MacBook Pro 16"
4. Desktop
5. Wireframe
6. TV
5. Watch - D4
Green Dice with number 4
1. Apple Watch 40mm
2. Apple Watch 41mm
3. Apple Watch 44mm
4. Apple Watch 45mm
6. Archive - D12
Red dice with number 12
1. iPhone 13 Pro Max
2. iPhone 13 / 13 Pro
3. iPhone 11 Pro Max
4. iPhone 11 Pro / X
5. Google Pixel 2
6. Google Pixel 2 XL
7. iPad mini 5
8. Surface Pro 4
9. MacBook
10. MacBook Pro
11. iMac
12. Macintosh 128k

Step 3

Style - D10

Style includes different ways to express your UI. Using style will be an added layer of complexity and exploration.

Style - D10
Pink dice with number 10
1. Y2K
2. Skeuomorphism
3. Neobrutalist
4. Minimalism
5. Flat design
6. Bauhaus
7. Neumorphism
8. Glassmorphism
9. Retro Futurism
10. Human interface guidelines 1987

Step 4

Company - D20

For the company roll, we will use the app or webpage homepage.

Company - D20
Orange dice with number 20
1. LinkedIn
2. DoorDash
3. Uber
4. Starbucks
5. Internet Explorer
6. AOL
7. Facebook
8. YouTube
9. Tik Tok
10. Instagram
11. Spotify
12. Reddit
13. Slack
14. Venmo
15. Notion
16. Amazon
17. Mail
18. Netflix
19. ParkMobile
20. Venmo

After the roll

Once you have four dice rolls, start designing! This is how I organize my Figma file. Depending on what you roll, the feel and process can be wildly different each week.

How to write your case study

I decided to have mini case studies at the end of each week to reflect on how I create and use Figma. This has already been beneficial for a variety of reasons:

Weekly Sprints

Common Questions

Why weekly sprints?
Sprints are commonly used in professional settings, as well as you get into your own rhythm working in these constraints.
Do I have to do the same roll?
No, you can work on your own roll. You can also do this exercise in as long of time, or short of time as you like.
Why do I have to write a mini case study?
This will help you reflect on your choices, and be a written log of how much you've grown!

Next Steps

I plan to expand this project and eventually have weekly or monthly live workshops of either doing the exercise, answering questions, design crits, etc. Documenting how much you grow and learn is what makes this industry invaluable.


Website: https://roll-for-ui.webflow.io/

Roadmap for ideas and expansion:

Website design and content © 2023-2024 Katie Knecht.