Matt D. Smith walks through Figma's interface and core features for beginners. This is the first video in a 12-part series designed to get you productive with the design tool quickly.
Welcome to the exciting world of figma, one of the most powerful and versatile tools for interface design. I'm your host, Matt D. Smith, better known on the Internet as mds. Now, I've designed professionally for nearly two decades and I've put virtually every single design tool to the test, but I've never found a design tool as enjoyable as Figma. No sponsorship here. Figma did not pay me for this, it's just my personal opinion. Figma, as you probably already know, is a cloud based design tool. It's great for UI and UX design, prototyping, graphic design, and a whole lot more. In Figma, you create designs, collaborate in real time with others, and share your work with anyone, all with a simple URL. Let's take a look at the different areas of the interface inside an actual Figma file. There's a toolbar at the top, giving you access to various design tools like the Move Tool, the Frame tool, and the Shape tool, among others. Over here on the left, you'll find the Layers panel. It lets you manage the design elements in your file, along with library assets and pages within your design file. Over here on the right, there's the Properties panel. It lets you adjust the details of your selections. In the center you'll find the Canvas. This is where all of our designs will take shape. We'll get into all of this a lot more, but for now we're familiarizing ourselves with where things are and what things do. Lastly, let's take a look at a few different ways to actually use Figma. You'll start your Figma journey by visiting figma.com if you haven't already. Once you've created an account, you'll see the File Browser, also known as the Home tab. The File browser is your landing spot every time you launch figma. Here you can manage files, create new ones, and access shared files. This is also where you can organize your files into projects and further organize projects into teams. You can access recently opened files in the Recents section. Any newly created files that haven't been assigned to a project or a team will show up in the Drafts section. There's a few different ways to create new files, but for now we'll look at clicking this plus icon in the very top of the file browser. We can also hit command t or command n. For this series, we'll keep our focus on Figma and not cover figjam, as it's technically a different product. From here, we're going to choose a new design file and we'll start with a blank canvas to start. Designing the desktop app gives you a few extra features over the web version, like access to custom fonts installed on your computer, better performance with larger files, and the ability to work offline. To install the desktop app, go to figma.comdownloads and and select the version for your operating system. Once it's installed and you've logged in with your Figma account, you'll see the exact same file browser as in the web version. Any changes you make in the desktop app sync to the web version and vice versa, so you can switch between the web and the desktop apps seamlessly. Lastly, Figma has a mobile app for both iOS and Android which is perfect for reviewing your designs and prototypes on your device. The mobile app is great for leaving comments and interacting directly with prototypes, which can help with user testing. To use the mobile app, download it from the App Store or the Google Play Store and log in with your Figma account. Just remember the mobile app is mainly for viewing and commenting. While there is an iPad app that does provide some editing capability, I found that the mobile apps are best used as tools for testing mobile designs in a real world context. All right, now that we know how to get started with Figma, let's get ready to dive deeper into its features in the next videos. If you find this course content useful, don't keep it to yourself. Share it with a friend, a co worker, or anyone you know who could benefit. So let's do this together.
