Intro to Figma

Short intro!

What is UI/UX design?

UI stands for user interface, and UX is short for user experience. Both of these are similar disciplines that focus on how users interact with a software product: UI tends to be focused on the pixel-pushing and aesthetic details, while UX deals more broadly with what sort of flow would be most intuitive or useful for the user.

What is Figma?

Figma is a tool for prototyping user interfaces, providing an easy way to create visual representations of, say, a website or mobile app. Most importantly, you can use it to create ‘flows’, or sequences of interactions, that help you design what your product will look like in different scenarios. For example, you might want to display different pages or elements depending on what type of user is logging in to your application, and Figma makes it easy to visualize this sort of thing.

Figma can, of course, be used to create really high-fidelity mockups and such. In this context, though, I think it’s most useful for clarifying what you’re working towards and thinking out different user flows.

Getting started

Create your first design file + preview it! Go to figma.com and create an account. Once you’ve logged in, create a new design file. Hit F: you’ll see a menu of different device frames you can choose from to start with. Once you’ve selected one, you can hit R, T, and P to open the rectangle, text box, and pen tools respectively. From there, the design aspect is pretty much just Google Slides but cooler :) To preview your work, hit Ctrl + Alt + Enter or click the play button in the top right, and you will be able to see what your design looks like on the device you selected.

Interactions! To create an interaction, you should probably be at the stage of having multiple frames that you want to connect by, say, redirecting the user to a landing page once they click ‘Log In’. Select a frame and switch to the Prototype tab on the right, at which point you’ll see a little circle if you hover over your hypothetical login button. Click and drag to whichever frame you want the button to go to, and you’ll see a little curvy arrow that you can then customize in the Interactions section on the right. Common interactions include hovering, dragging, mouse-over/mouse-out, and the like.

Components make your life easier Finally, once you’ve gotten the hang of the above, you might realize that you end up copy-pasting elements a lot, and it can be really annoying to manually correct all of them if you decide you want to tweak something about, for example, your button style. Instead, you can create a component by selecting the elements you want to group (for example, a card) and hitting Ctrl + Alt + K or selecting the four diagonal squares in the middle of the menu at the top. Duplicate your component by going to the Layers panel on the left and hitting Ctrl + D, then rename your original component to something different so you know that it’s the master component. Now, if you duplicate the non-master component multiple times, then make changes to the master component, all of the components will be changed. However, if you make edits to a non-master component, those changes aren’t reflected in all of the others. If you’re interested, here’s a lot more to components than this: you can learn about them here.

General design stuff

Responsive design: When designing a layout for a website, it’s important to take into consideration how it will look on PCs, mobile devices, and, if you really want, tablets.

Visual hierarchy: This should be pretty intuitive to most people – important things, like titles, images, or call-to-action buttons, should stand out compared to other elements on your website.

Making stuff look good: Because design is pretty subjective, there is quite a bit of room for creativity, but there are some things that are generally frowned upon.

Some examples of this:

• Comic Sans. Don’t do it. Just don’t.
• Weird text color/background color combinations – you want text to stand out on your page, and some things (like red text on a bright green or blue background) can make it almost painful to read. Stick to high-contrast options that agree with the color wheel; here’s a list of 100 Canva-approved palettes to start with!
• Too many colors – you don’t need that many, I promise! Three or four colors besides black/dark grey and white/off-white is plenty. I would suggest having one or two contrasting “main” colors and the others used as accents.
• Too many fonts – often, people get really excited about their newfound freedom to choose whatever fonts they’d like, and this results in display fonts (usually stylized for larger, shorter headings) being used for paragraphs on end. Stick to one or two fonts, and make sure that you’re using something readable and vaguely professional for the body.
• Busy or weirdly formatted backgrounds – Hero visuals (large banner-style images or elements at the top of your page) are great! Beyond those, I would suggest keeping backgrounds minimalistic or solid: you want the users to focus on everything else about your product.

This is, of course, not a comprehensive list :)

Good things that you should be doing are a lot less definitive; I would honestly just stick to what is easiest or most doable given the frameworks you’re working with and the time you have. Also, you can take inspiration from website or app UIs in your life and try to incorporate some of the elements they use!

Further reading/references I like

Figma’s design guide!!
A list of poor design choices and what makes them bad
Bad text/background color combinations + accessibility
Apple’s design guidelines
A combination of intro tutorials, LOTS of clean layout examples, and a few other resources
An extensive list of really well-annotated design patterns from different digital products (requires account)

The last couple are really just if you have the time and are interested in this stuff; keep in mind that your goal is to build a product, not just design it (although maybe this resource has changed your mind :P)