This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Darrin Henein
Posted Oct 29 - Read on Facebook

Hi everyone :) Just wanted to share how we iterate quickly on prototypes at Mozilla using Framer, Gulp and Sketch!

13 Comments

Stephen Crowley

Love these posts! Thanks for sharing Darrin

Darrin Henein

No problem Stephen, thanks for reading :)

Joshua Tucker

Darrin Henein Thanks Darrin! Amazing. Super appreciate you explaining the Gulp integration. Very, very helpful!

Andreas Mitschke

The gulp pipes look like you are using another editor than framer studio. So this is basically a set-up with using your own editor/IDE of choice ?

Darrin Henein

Andreas yes, this is using framer.js only. Framer Studio is amazing but wanted something that was completely automated (even the Sketch file automatically updating) :) I also prefer using my own editor (i.e vim) which is also important to me for speed.

Ryan Gonzalez

Thanks for this! Was thinking about putting together a Yeoman generator for non-Framer Studio developing, this will definitely help make that easier :D

Andreas Mitschke

I basically have a similar set-up, but with some more pipes such as js concatenation, a js linter in combination with emmet livestyle and without coffee - need to get into the coffee syntax, it's too open for me atm.

Not aware of browsersync, but I'd take a look into it as livestyle is kinda unstable.

Darrin Henein

Andreas awesome! I've been meaning to add more pipes, but left it simple for this purpose (only one coffee file, so no need for concat, no css, etc). Browersync is great, as it keeps my js and images updated as well. And Ryan, feel free to fork or grab some of this for your generator, let me know how it goes!

Kevin Cannon

Doesn't it feel a little dirty using a tool that's webkit only? :p

I don't even work for Mozilla, and it reminds me of the "best viewed in internet explorer" days.

Darrin Henein

Kevin – ya... it doesn't leave the best impression, agreed. However, as a tool for defining and communicating UX work, I'm OK with the restriction. Often I'll even just share these prototypes as videos or gifs. If the artifacts were meant for broader consumption, I'd be more inclined to stick to tools that work everywhere :)

Leif Niemczik

Thank you :)

Vivian Cromwell

thanks for the post. I have a similiar set up but inside webstorm ( my background is java so I am used to heavy IDE). look forward to your second post on this subject.

Jay Liu

Ryan Gonzalez Curious to know if there was any progress with the Yeoman generator

Read the entire post on Facebook