Getting started in design with Figma.
Design (User interface and User experience ) is one of the fastest growing fields in the tech industry, with tech giants like Facebook, Google, Uber, IBM etc investing a lot in design and design thinking.
My journey into UI/UX design was a lonely 😩 and tough path, with little help from people around and a lot of confusion on 😖;
1. how to get started,
2. what to learn first,
3. what is the best workflow,
4. what is the best design tool,
5. are wireframes important,
6. which design principle should I take more serious etc..
Even with the high demand for UI/UX designers in the tech field, the path to becoming one is, but a confusing and draining one deterring most people from seeing opportunities in UI/UX design especially in Africa. It’s because of this experience, that I was really excited 🕺🕺 to be a Figma Africa ambassador to help others have a more exciting and easy journey in design.
So what is Figma?
Figma is the first interface design tool based in the browser, making it easier for teams to create User interface designs for software or any design work. As part of their goals to grow design communities and getting people started in design in Africa, Figma introduced the Figma Africa program.
Figma has a Learn Design Program to help get newbies started in user interface design, in a matter of 3–4 weeks (cool right? 😎). The Figma Africa community helps to connect and grow its members through design challenges and mentorship.
You can join Figma Africa on SLACK: https://figma-africa.slack.com
This post breaks down the Figma learn design curriculum with resources and exercises, to help guide anyone interested in user interface design to get started smoothly.
In order not to overwhelm you, am going to break this post into 6 parts. Just so we are more structured, focus and pumped up 💪💪💪.
🥁 🥁🥁🥁🥁
1.0 Introduction to Figma Design Tool.
There are a lot of design tools you could consider and use, beginning your user interface design career but I will recommend Figma to you and I know you will love it.
You can find out more about Figma’s features and why great designers are making the switch from other design tools to Figma below.
Note: most of the bullet points are links so remember to click on them 😉
- Sketch vs Figma — Why I switched!
- Prototyping and Developer Handoff
- Emojis
- Figma website
- Figma 3.0 features
- 30 days deep into figma.
- Why I left Sketch + Invision like a old sock. (or why I love Figma)
1.1 Types of devices Figma Runs on.
- Chromebooks
- Smart Phones
- Windows PC
- Linus PC
- Macbooks.
1.2 How to start using figma.
Let's get you started using the figma design tool.
- Signing up and downloading desktop app.
- Installation and introduction to Figma.
- Getting started with Figma
1.3 What Figma can be used for.
- Open source investor pitch deck.
- https://goo.gl/1CgKVY
- 5 ways to use Figma that you probably never thought of
So by now, I know you are convinced 😆 about figma and you have already created an account ✅. Next, let’s get familiar with the various awesome features of figma design tool and how to use them 👌.
For a quick overview of some of this component, you can read the article below.
1.4 Frames
1.5 Color Picker and color libraries
1.6 Constraints
1.7 Layout Grids
- https://www.youtube.com/watch?v=zd8wrAdURN0&t=59s
- https://www.youtube.com/watch?v=RgXFzz_lBzk
- https://www.youtube.com/watch?v=zd8wrAdURN0&t=66s
1.8 Using guides in Figma
1.9 Realtime Collaboration.
This is one of the features in figma, that’s going to make you love Figma more. Figma’s real-time collaborations make it easy to work on a design project with friends at the same time. It’s just like using google docs.
Just so you know how fun designing with friends is going to be like, watch the videos below.
- Pixel Pong: Robichaud/Mezzell vs Eliasen/Putnam
- Pixel Pong: Bee/King vs Lee/Slater
- Pixel Pong: Ngo/Schomburg vs Mierle/Speace
Activity
- Create a file in Figma
- Invite some friends to help you design a salon car in Figma with basic shapes (Just try it, we will talk about shapes latter).
- Share the final work on social media with the hashtag #WhyILoveFigma #FigmaAfrica #FigmaLearnDesign.
1.10 Comments and Notification
1.11 Prototyping, Transition and presentation mode in Figma
- Figma Tutorial: Prototyping & Transitions
- https://www.youtube.com/watch?v=syjmJGdI7H8
- https://www.youtube.com/watch?v=-sAAa-CCOcg
1.12 Importing and Exporting in Figma.
1.13 Working with Shapes
1.14 Rounded corners
1.15 Mask
1.16 Boolean Operations in Figma.
- The Boolean Complexity by James Baduor
- Boolean Operations
- How to create compound shapes using the boolean group in Figma.
1.17 Figma Alignment and Distribution tool.
1.18 Drop shadows, Layer Blur, background blur
1.19 Using images in Figma.
Activity
- Clip an image of yourself into your name as text in figma
- Share on social media with the hashtag #WhyILoveFigma #FigmaAfrica #FigmaLearnDesign.
1.20 Gradients
- https://www.youtube.com/watch?v=WjPU67lKKgc
- Working with gradient layers in figma
- Creative Tips for Using Gradients in Figma
1.21 Texts and Fonts in Figma
1.22 Running Figma Offline.
Even though Figma is a web-based design tool, it is possible to use it without any internet connection. The post below by James Baduor explains how to use Figma offline.
So, in conclusion, this is the first part of this post. In this first part I’ve talked about the most basic features you will need to start kicking ass 😎 in design.
Note that there are more advanced features in Figma like components, styles, and stuff but we will not touch on them now since this is a beginners course.
Watch out for the next part soon and don’t forget to 👏👏👏.
Learn more about Figma and Design using the following resources:
Also, to be part of the Figma Community;
Join Figma on SLACK: https://figma-africa.slack.com
TWITTER: https://twitter.com/figma_africa
INSTAGRAM: https://instagram.com/figmaafrica
