Roll for UI
An adventurous way to learn Figma wireframing and sprints, confidently
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/
User Inyerface
UI Adrian eBooks
Figma on Youtube
Gaps
- eBooks and Figma Pro cost money
- Videos only provide so much interactivity and retention
- eBooks only provide a basic understanding
- User Inyerface provides short, intuitive exercises and no expansion after
Opportunities
- Provide community and inclusion for newer designers with Slack channel and social
- Create a template for people to work on every week
- Every new roll provides new challenges and constraints
- Have mini case studies at the end to reflect on your designs and process
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 1
Orientation - D6
Orientation is the format and size of your frame. Taken from Figma frame formats.
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
1. iPhone 14 & 15 Pro Max
3. Tablet - D4
4. Desktop - D6
5. Watch - D4
6. Archive - D12
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
10. Human interface guidelines 1987
Step 4
Company - D20
For the company roll, we will use the app or webpage homepage.
Company - D20
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:
- Writing helps walk through step by step design on a smaller scale (before getting involved in larger applications)
- It is easier to pinpoint questions to ask fellow peers about Figma
- Understand design decisions
- An introduction for new designers to practice sprints and learn how to create in public
- Watch yourself improve in Figma week to week
Weekly Sprints
- Monday - Inspiration finding
- Tuesday - Sketches/low fidelity
- Wednesday - ideas should be forming for your direction
- Thursday - Test out your favorite ideas in whatever format of fidelity you're comfortable with at this point
- Friday - By now you should have some mid-fidelity frames forming
- Saturday - Pick your best iteration and polish it up!
- Sunday - Final touches and share!
Common Questions
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:
- Create templates for scalability
- Incorporate Figma specific restraints eg. (Use boolean variants in your wireframes)
- Incorporate User Experience exercises eg. (Creating flows, prototypes, etc for future iterations)
- Encourage more people who want to learn Figma to try themselves
