The goal of this learning activity is to give you a tool to use for your Envision a Design final project.
You will learn the basics of “Figma”, a tool for creating high-fidelity prototypes (for websites or mobile apps) that you may find helpful as you work on your final project.
There are two videos you need to watch to complete this assignment. You’re encouraged to pause throughout, and the benefit of online classes is that you can go back in case anything went wrong or you didn’t quite see how to do something.
To get started, first – sign up for Figma
Links to an external site. with your UW email. (If you want more features in the future, you can verify your student status).
We’ll also be using a small template file, which you can find here
Links to an external site.. Once you log in to figma.com, make a copy of this by clicking “Duplicate to your Drafts”, which can be found in the menu next to the title.
If you want to build your final project with Figma, we’d highly recommend checking out the Material Design Kit.
Links to an external site.Check out all of the pages, there are many controls and features you can re-use without having to re-create them yourself, and they follow the Material Design UI guidelines, which means they will look/work the same as many other apps.
Figma Learning Part 1
After you complete the steps in this video, take a screenshot showing your work on creating the three screens. You will submit the screenshot in Module 6 Activity [FIGMA].
Video 1 Frequently Asked Questions:
- You mentioned rounding corners but never came back to it – how do you do this?
- To round corners, select the object (like the get started button) and modify the radius attribute.
- You said that I hold down Control and press a key for certain shortcuts, and it’s not working!
- If you’re on a Mac, the Control equivalent is Command.
- I saw you zoomed in and out, how do I do this?
- Hold down Control/Command and scroll in or out to zoom. You can also use your touch screen if you have one.
- My components are getting stretched when I make the screen taller!
- Ctrl+Z to revert it back to normal. Then, click on the offending objects and look at the constraints. Set it to be Left and Top instead of Scale and Scale.
- I can only see a part of a component from the template! (ie only the search bar out of the top search/tab menu)
- Make sure you’re selecting the entire frame when you copy it over. You’ll know this because in the tab menu you will see the # element highlighted. Click on the title to select it!
- I can’t select an object! (like a text box)
- Make sure you keep clicking to get to the bottom level. If it’s grouped, you may need to double click a few times.
- ‘m lost and everything is broken and I can’t keep up!
- Everything we’re doing is really only a few steps, so if things get really messed up I’d recommend just starting a new frame and redoing the steps. If I’m talking too fast, you can put the speed down to .75x.
Figma Learning Part 2
Video 2 Frequently Asked Questions:
- I can’t see my component when I go into the present mode!
- Your component likely isn’t in the right frame. Make sure the group is nested within the frame (ie Welcome Screen) and not just hanging loose in the artboard.
- I don’t see an option to “Fix Position When Scrolling”!
- Make sure you’re selecting the full group and that it’s a top-level group. It should be right inside the frame.
- When I share it with my phone, I don’t see the design screen of Figma!
- Make sure you’re copying the prototype link from the Present tab, not the design tab. It should say Share Prototype, not Share.
- can’t figure out how to make it into an app!
- iPhone: Open the full version of Safari by clicking the icon at the bottom. Then you can click the share icon in the center and scroll to find an option to add to your home screen. You can’t do this on most third-party browsers!
- Android: On Chrome, make sure you’re in the full version as well. Then, click the three-dot menu and click add to home screen. This will be similar on other browsers. On Samsung Internet, click the menu and click Add to > Add to home page.
ASSIGNMENTS
What to submit:
1. Submit a screenshot showing the 3 screens you created by watching video 1.
2. Submit a link to your working prototype, after you have added the transitions and animations described during video 2.
Rubric
INFO200Sp21 – Figma (1)
| Criteria | Ratings | Pts | ||
|---|---|---|---|---|
|
This criterion is linked to a Learning Outcome3 different, original, screens |
|
2 pts |
||
|
This criterion is linked to a Learning Outcomeworking prototype – transition/s |
|
3 pts |
||
|
This criterion is linked to a Learning Outcomeworking prototype – animation/s |
|
3 pts |
||
|
This criterion is linked to a Learning Outcomeworking prototype – overall design |
|
2 pts |
||
|
Total Points: 10 |
||||