A quick look at two powerful, but radically different prototyping tools available to designers in 2017.

1. Prototyping is…

2. Making ideas real

3. Agenda Overview: Framer vs CSS Grid
Framer
• What is it?
• How it works
• Animation example
• States example
• Pros and cons
CSS Grid
• How it works
• Grid template example
• NYT breakdown
• Pros and Cons
Resources
Questions
Hack Time!

4. Framer CSS Grid

5. Framer
Interactive prototyping tool.
50% Code. 50% Design.
2016
$15/month
CSS Grid
Layout method designed for the
two-dimensional layout of items.
100% Code
2016
Free

6. Framer

7. Framer

8. Framer - Animation, Event
Animation

9. Framer - Animation, Event
Flows

10. Framer - Animation, Event
States

11. Framer - Animation, Event
framer.cloud/pMKQl
framer.cloud/lhdYh

12. Framer - Animation, Event
Pros Cons
great community
very powerful
not real code
$$
might date
closed system
steep learning curve

13. CSS Grid

14. CSS Grid
“CSS Grid simplifies existing layout patterns and adds
new possibilities for graphic design.”

15. CSS Grid

16. CSS Grid
display: grid;

17. CSS Grid
How does it
work?

18. CSS Grid

19. CSS Grid
Example

20. CSS Grid

21. CSS Grid

22. CSS Grid
Pros Cons
fast
in browser
lots of resources
free
weird syntax
steep learning curve
web only, layout only

23. CSS Grid
Communities
Offline
meetup.com/CSS-Layout-Club
framer.com/community/meetups
Online
facebook.com/groups/framerjs
gridbyexample.com - Rachel Andrews

24. CSS Grid
Thanks!