Everyone should be designing in Figma in the S22 Core Interaction 2 Workspace. Please use the folder with your name on it.
📌Tips for Designing Websites(Figma and otherwise)
Make sure you have an art board on your page
To do so, press the keyboard letter“a” and select one of the presets on the right.
When designing a mobile-first website or application, you should use a phone sized art board.
Websites are responsive, so ultimately need to work on a variety of screen sizes, but initially I like to start with an art board that’s 1280 px wide for non-mobile designing. In Figma, that’s the“iMac” preset.
Name your art boards as soon as you create them. This prevents a headache later on.
You can make the art board as tall as you need it, just drag the bottom of it up/down
Always start with a grid
Figma has three different types of grid(uniform grid), column, and row. Uniform grids create a series of uniformly spaced fields across your frame(imagine a sheet grid paper) at whatever size you specify. The others have a few more options to create columns and rows. There are options for how it will scale, that we’ll cover at a later point. For now, let’s focus on creating a useful grid to start designing.
In the above, I set up a 12 column grid with 25 px margin and gutter. The margin indicates how much space on the left and the right of the art board. The gutter is how much space is in between each column.
12 column grids are most common, though I sometimes use a 14 column grid and 16 column grids are also common.
The shortcut for hiding/showing the grid is control + g
Everything item on the website should align to the grid
Images, as well as everything else you’ll place on the page, will appear as a layer on the left. You can change the order to adjust what’s in front of what.
When dropping images in, you can either drag them in or copy and paste.
To create a layer mask – have the image on top of the solid shape, select both, right click and select“Use as Mask”(Or use the keyboard shortcut ^ command m ). You can then adjust the image by dragging it around the frame.
Try to avoid having unnecessary variations in your type styles. Always have a system in mind.
To help with this, set up type styles so that you can keep everything organized. I usually add these in when I’m doing the final round of the design(when I’m no longer experimenting)
When you need to edit the type style, you can do so in the top right corner where it says“Design”
Additional Project Examples
👩💻 Workflow
📌Tips for Designing Websites (Figma and otherwise)
Small Group Meetings