Figma is a 2D design app that is popular for designing user interfaces, but is great for other creative work too. If you’ve used Adobe Illustrator before, you should feel right at home. Figma supports synchronous multiplayer editing, annotated comments, and other features to support online collaboration
To get started, sign up for a free Figma education account using your school email.
You can use Figma in your web browser or install a dedicated desktop app. Both versions are the same, with the desktop app making it a bit easier to use local fonts installed on your computer.
Once you’re logged in, note that you can create two types of files in Figma:
<aside> ℹ️ Want to learn all this in a class at Penn State? Take DART-100 to explore illustration, type design, and animation, or take DART-206 to use Figma for web design and 2D layout.
</aside>
Figma’s official Getting Started pages are the best place to begin, including these tutorials:
Figma has a huge ecosystem of plugins and Community files that you should explore. You can browse plugins and use them directly within your file!
The following are demos I’ve recorded for students in the past and kept for reference. These are not meant to be comprehensive, but focus on specific workflows and features of the app.
https://www.loom.com/share/0cb08555a0d44210937ba6b34d988037
https://www.loom.com/share/355091a758144aef804f0d954438bd85
https://www.loom.com/share/1b42eb77dfb84b77b559d45babe2a68c
Components are reusable elements that let you reuse “instances” of an original element throughout your file. Update it once and the changes apply to all the instances
Auto-layout is a way to control layouts based on fixed measurement and alignment settings (instead of placing elements manually). If you’ve done any web development, it’s based on the Flexbox layout method from CSS. It’s a nice way to set fixed gaps or padding in a layout to keep everything consistent. But it can be faster to just place things manually if you're at the early stage of a design.