figma design tool - an alternative for windows users
TRANSCRIPT
![Page 1: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/1.jpg)
Figma
![Page 2: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/2.jpg)
What is Figma?• In comparison it‘s like Sketch on a browser
![Page 3: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/3.jpg)
So what‘s so special about it?
![Page 4: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/4.jpg)
MultiDesign• Creating Live• Comments• All in one place• Simple to share
• Collaboration level: MAX
![Page 5: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/5.jpg)
DEMO
![Page 6: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/6.jpg)
My recommendations• 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!
![Page 7: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/7.jpg)
Vectors
• Figma is vector• But it has a pixel
preview• Vector networks• Easy and seamless
working with icons
![Page 8: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/8.jpg)
DEMO
![Page 9: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/9.jpg)
Constrains / Grid
![Page 10: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/10.jpg)
DEMO
![Page 11: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/11.jpg)
Components
![Page 12: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/12.jpg)
DEMO
![Page 13: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/13.jpg)
Other
Import Sketch files Figma App iOS
Component libraries:• Material• iOS (thanks Facebook)
* SF font hack - Helvetica Neue with 5% letter spacing
![Page 14: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/14.jpg)
Workflow
![Page 15: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/15.jpg)
Workflow
![Page 16: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/16.jpg)
![Page 17: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/17.jpg)
Bugs?Yes.
Problem?No. Figma saves every secondof your work
In my practice, I didn’t encounter a bug that would not let me continue my work
![Page 18: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/18.jpg)
Hand-off• Integrated Copy element CSS for developers• Measurents like in Adobe
![Page 19: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/19.jpg)
Price• ???• Still free• Still beta, page states that prices will be announced early 2017
*Free forever for students! (yay)
![Page 20: Figma design tool - an alternative for windows users](https://reader035.vdocuments.net/reader035/viewer/2022070600/58b8902f1a28ab3e3a8b58f7/html5/thumbnails/20.jpg)
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)