Figma is a browser-based vector graphics and prototyping tool that allows for real-time collaboration. It provides features like multi-user editing, comments, and component libraries. Figma saves work continuously so there is no risk of losing data. While still in beta, Figma is free to use and offers cross-platform capabilities for designing and sharing work across computers and mobile devices.

1. Figma

2. What is
Figma?
• In comparison it‘s like Sketch on a
browser

3. So what‘s so special
about it?

4. MultiDesign
• Creating Live
• Comments
• All in one place
• Simple to share
• Collaboration
level: MAX

5. DEMO

6. My
recommendation
s
• Don‘t design in the same
file
• Figure out and agree
about the icons / fonts
/ color palletes
• Agree on your base
resolution
• Share your work!

7. Vectors
• Figma is vector
• But it has a pixel
preview
• Vector networks
• Easy and seamless
working with icons

8. DEMO

9. Constrains / Grid

10. DEMO

11. Components

12. DEMO

13. Other
Import Sketch
files
Figma App iOS
Component
libraries:
• Material
• iOS (thanks Facebook)
* SF font hack -
Helvetica Neue with 5%
letter spacing

14. Workflow

15. Workflow

17. Bugs?
Yes.
Problem?
No. Figma saves every second
of your work
In my practice, I didn’t encounter a bug
that would not let me continue my work

18. Hand-off
• Integrated Copy element CSS for developers
• Measurents like in Adobe

19. Price
• ???
• Still free
• Still beta, page states that prices will be
announced early 2017
*Free forever for students! (yay)

20. In the end…
PRO‘S
• Very fast
• Never lose anything!
• Cross platform
capabilities
• Collaborate like no
other
• Intuitive vector
networks
• Best thing you can have
on windows
• Easy to use
CON‘S
• Works only online (you
have to have internet
connection)
• Only an iOS app
• Has bugs (like WebGL crashes and
you have to wait a few seconds until the
page reloads)
• Overly targeting mac
users (docs are mostly mac commands,
more shortcuts for macs, no PS import)