What is Figma?

Heard the buzz about Figma but not sure where to start? In this blog post, I'll give you a rundown on this powerful UX and UI design tool. We’ll cover the costs, common use cases, and core functionality. Let’s dive in.

Figma is a cloud-based design tool that is used to create and test apps and websites. While it provides similar functionality to other competitors, such as Sketch and Adobe Xd, the ability for real-time team collaboration is a key differentiator. There are a lot of different tools out there used for prototyping and testing apps and websites, so today we'll dive into the unique features and functionality of Figma.

How much does Figma cost?

Unlike other design tools in the Adobe Suite and most other options out there, Figma is free to start using.

It's the free entry and low cost makes Figma one of the most popular playgrounds for mocking up interfaces and web pages.

What is UI/UX Design?

UI is User Interface design - the creation and design of web pages, apps, software...anything where real people need to interact with your digital experience.

To put a (really) simple frame around these ideas, UI is the (graphic) design of an app, website, or software interface.

UX (User eXperience design) is testing and refining how real people use the 'interface' you created. Later in this article, we'll have a look at the growing demand for UX and UI designers.

The Basics of Figma

You can use Figma to take an idea and then create a web page, a wireframe, or mock up a prototype. From there, you can collaborate on the design and then test your work with an audience. All with real-time collaboration, asset management (everyone has the same version and files all the time) and feedback tools. Figma's design system features also make it easy to create and maintain a consistent visual language across multiple projects, which is particularly useful for larger design teams.

Figma is a powerful UI/UX dream tool and it's quite easy to use. But, there are a couple of things Figma doesn't do - and these are important.

Creating and Testing Prototypes in Figma

Figma is a prototyping and testing tool. You can't publish the end results as a working website or an app. It won't do the code for you. You can use many of the assets you create in other apps - but the point of Figma is to allow a team to quickly sketch, design and test - not develop code or publish a finished app or website.

Despair not, fair designers - because all those hours designing are not wasted! You are able to to export your work. We’ll cover that shortly.

Figma Offers Multiple Integrations

Figma integrates with a wide range of other tools, such as Jira, Slack, and Trello, making it easy to incorporate design into the broader workflow of a project. BYOL teaches courses on most aspects of digital design and, of course (sorry, pun!), we have courses for all the most popular tools and challenges.

Exporting Files from Figma

Figma allows you to export your designs as PNG, JPEG, or SVG files. You can choose to export individual frames or selections, or entire pages or artboards.

You can create interactive prototypes in Figma and export them as a clickable HTML file, which can be shared with the team, stakeholders, developers, or code gurus. Or, you can use the exported content for user testing. Helpful if you're not sure how that puce color scheme makes the end user feel!

Figma also allows you to export CSS and SVG code snippets, making it easier for developers to implement your designs in code. Figma's design specs feature enables you to generate a detailed specification document (like a really detailed style guide) that includes all the design details, such as typography, colors, and measurements.

Figma also allows you to export individual components and assets, such as icons or illustrations, as separate files.

Flexibility in Figma

Overall, Figma's export options provide a lot of flexibility and allow designers to share their designs in a variety of formats, depending on the needs of the project and whoever is paying the bills. Ahem, stakeholders.

Testing is awesome because you not only get to build, test and refine the exact specs you need (phone sized, PC screen, tablet, you spec it) but all those measurements and design standards are exportable.

How does Figma Support Your Workflow?

Speaking with my 'experienced-designer-hat' on, while Figma won't finish the job for you, it will make the often huge task of teamwork and testing between client, designer(s) and end-user far more manageable.

Figma is not the only tool you need to finish a job, but it's a fantastic place to start. It offers an easy way to brainstorm and organize your thoughts.

You probably already know there are lots of tools and techniques you need to master as a designer or developer. This is why BYOL has many easy-to-follow courses with industrial strength techniques and projects to help you develop your skills.

Figma vs Competitors

Figma is not the only game in town, but it does have some standout abilities that make it (very) popular. It's a great place to start your journey as UX or UI designer - or to add another skill to your portfolio.

Figma, XD, Framer, and Sketch are some of the most popular design tools used by UI and UX designers to create digital designs. Here is how they're different from each other.

Collaboration in Figma

Figma is known for its strong collaboration features, which allow teams to work together in real time on a single design file or an entire project. Sketch also offers some collaboration features, but they are not as robust as Figma's. XD and Framer do not have real-time collaboration features.

Platform Support for Figma

Figma is a web-based application that can be used on any platform with a web browser, including Mac, Windows, and Linux. Sketch is only available on Mac, while XD and Framer are available on both Mac and Windows.

Prototyping in Figma

XD and Framer have strong prototyping capabilities, allowing designers to create interactive and animated prototypes. Figma and Sketch have basic prototyping features, but they are not as advanced as XD and Framer.

Plugins and Integrations for Figma

Sketch has a large ecosystem of plugins and integrations, allowing designers to extend its functionality. Figma also has a growing list of plugins and integrations, while XD and Framer have a more limited selection. Figma has a huge online community of free assets to save a lot of time or take your design to the next level.

Design Systems

A design system is a collection of reusable components, guidelines, and assets that define the visual style (e.g., what the buttons look like), user interface patterns (e.g., where the buttons go), and brand elements for a digital product (how big can we make the logo on every page). It provides a set of standards and rules so everything has a repeatable design. Figma and Sketch have strong design system features, allowing designers to create and maintain a library of design assets and components. In Figma, you can manage entire projects with all the different pages, assets, and designs across large or small creations. XD and Framer have some design system features, but they don't stack up to Figma and Sketch's abilities.

Overall, each tool has its own strengths and weaknesses, and the choice of tool will depend on the specific needs and preferences of the designers and their team.

Figma has a very powerful set of management and collaboration tools and is very affordable, especially for a team. Adobe XD has a very established reputation and user base. It's going to be a very strong advantage to learn both as you work with different teams and clients.

Getting the Right Figma Training

Go farther with Figma in my Figma Essentials course which will teach you how to create wireframes, implement colors and images in your designs, as well as create icons, buttons, and other UI components. Plus, so much more.

Some of the things I'll be showing you (as you actually complete practical work) in my Figma Essentials course:

1. How to use vectors and shape tools to build a wireframe model of your app or site

2. How to create color palettes, type choices and styles for your whole project

3. How to smart animate objects

4. Setting project parameters like screen sizes and testing the result on multiple devices

5. Creating transitions

6. Building components to use throughout your project

7. Testing, sharing and exporting

8. Working with vector shapes

9. Importing shapes and assets from other programs

Once you've mastered the basics, further your skills with my Figma Advanced Tutorial. From there you can do more advanced training, or start using Figma with other tools to broaden your horizons. We’re not going to list everything here – that would be boring. We don’t do boring. What we do love is a comprehensive set of basic (and some more advanced) skills that you can learn by doing while watching me. We want you to have the foundation that lets you get the most out of Figma.

What Career Opportunities are Available in UI/UX Design?

With more people using digital devices and services than ever before, the need for well-designed, user-friendly interfaces has never been greater. Many companies are now placing a greater emphasis on customer experience and are investing in UI and UX design (and testing) to improve the usability and overall experience of their digital products and services.

Well-designed products and services can provide a competitive advantage for businesses, helping them stand out from their competitors and attract more customers.

Get the Skills, Increase Your Value

There is currently a high demand for UX (user experience) designers in many industries. The field of UX design has grown significantly in recent years, as many businesses embrace the creation of digital products and services that are easy and enjoyable to use.

With more people using digital devices and services than ever before, the need for well-designed, user-friendly interfaces has never been greater.

Many companies are now placing a greater emphasis on customer experience and are investing in UI and UX design (and testing) to improve the usability and overall experience of their digital products and services.

Well-designed products and services can provide a competitive advantage for businesses, helping them stand out from their competitors to attract more customers.

A well-designed product involves everything from the idea for an app or web service to the prototyping, design and testing. And most of this work is done in teams - hence the importance of a tool like Figma where all that development, testing and collaboration happens in the same easy-to-use app.

Design work in general, and specifically UI and UX design is valuable (hint: can pay well) and important in many different industries, from technology to healthcare to finance, so there's a huge range of job opportunities out there - even at the entry-level.

Overall, the demand for UX designers is expected to continue to grow in the coming years, making it a promising field for those interested in pursuing a career in design.

If you're a graphic designer or a web designer, you will almost certainly have the chance to use Figma and similar tools to develop projects and products for your clients - or work as part of a team with other designers. What matters is that you have the training (that's where BYOL is made for you) and some portfolio pieces to demonstrate your ability.

Our courses teach you by doing real-world design tasks - we don't simply repeat the user manual to you. You'd die of boredom, and we've been around long enough to know how to keep you interested and get your skills job ready.

We don't train you to get a piece of paper on the wall - we want to create a fundamental knowledge base that makes you a useful team member, or an employable freelancer.

There is a high demand for designers who are proficient in using Figma. With BYOL courses, you can get your design skills in Figma from 'up and running' to 'ninja master of many talents.'

Why Figma?

To recap, here's a quick reminder of why you could and should learn Figma, let's cover the basics again.

Figma is a (very) popular (hint: makes you employable!) design tool used by many UX and UI designers to create user interfaces, prototypes, and design systems.

Overall, there are many job opportunities available for designers who are proficient in using Figma, particularly in the fields of UX and UI design. By mastering this tool, you can increase your employability and become more competitive in the job market.

And for some of you, this is the doorway to becoming a professional designer, or the next chance to move into larger jobs and greater chances to flex your ninja skills.

Ready to dive into Figma?

Become a BYOL member and you'll gain access to my Figma Essentials and Figma Advanced courses as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Get started here.

See you in class! - Dan