7 ms·

Framer – Interactive Design Tool

71 points by lsschmidt 8y ago

commandlinefan 8y ago
"Framer is for macOS only"
- peach 8y ago
  This: basically another Sketch. Currently the only "modern tool" that works cross platform is Figma.
  - wishinghand 8y ago
    I've been enjoying using Figma. I definitely wouldn't mind a non-Electron based app of it.
    - pests 8y ago
      Of Figma? There is the web version of it which is the same as the desktop app. Or did I misunderstand?
      - wishinghand 8y ago
        Somehow I’ve missed they had desktop versions. I thought it was web only.
        hurricanesugar 8y ago
        The desktop version of Figma is built using Electron. The web version is not.
        qiushihe 8y ago
        How does one build the web version of something using Electron? ;)
        hurricanesugar 8y ago
        I was trying to make that point without the snark :)
    - deleted 8y ago
      [deleted]
  - alturnwall 8y ago
    Also Adobe XD. I know people give Adobe crap for coming to the party late, but the new tool is quite good with prototyping and web sharing built in, plus they launched freemium model. Framer is great for more advanced prototyping needs w/ animations/transitions/etc, but the XD is pretty good and fast for many needs, and it's Mac + PC.
  - uxcolumbo 8y ago
    Well, you've also got Affinity Designer, which is quite good if you prefer a desktop app with no subscription fees (i.e. proper dekstop app and not an electron app).
  - dmayle 8y ago
    There is the web-based Gravit Designer: https://www.designer.io/ https://www.designer.io/
    - pragmatick 8y ago
      Somehow that page manages to be just as infuriating as the one for framer. Why do I have to wait for elements to be blended in so I can read them... They should at least make them keep being displayed once they were shown.
- uxcolumbo 8y ago
  Windows version is in the works. You can sign up to be notified. https://framer.com/forms/windows/ https://framer.com/forms/windows/
degenerate 8y ago
Music in the demo video was very distracting.
dan1234 8y ago
I have to register for an account and verify my email address so I can even trial desktop software!? Thanks, but no thanks.
j2kun 8y ago
I felt extremely dizzy when I started scrolling. How can I trust the makers of a design tool when their website is literally nauseating?
- bgdkbtv 8y ago
  You're just old mate ;)
- planetBlob 8y ago
  trust no one
- dullroar 8y ago
  Yup, I had the same reaction - a few seconds and I was out.
- ASalazarMX 8y ago
  For the first few scrolls the animation is very disorienting, bleeding over to peripheral vision if your monitor is wide/near enough. It doesn't help if your eyes have different graduation.
shady-lady 8y ago
Superbly done hero element on that page.
- shady-lady 8y ago
  Music on that video is so out of place though.
  - sooheon 8y ago
    They picked it for the beat that they could sync showcase elements to. Not the worst I've seen, and definitely better than the twee ukulele with upbeat voiceover that is the default.
    - shady-lady 8y ago
      Just found it way too overpowering. For a big screen ad - great - very Appley. For an embedded video in a webpage - way too intense for me.
deltron3030 8y ago
Being able to jump back and forth between the design tools and code looks like a big andvantage for more complicated interactive components. Is that the main selling point? That you're able to compare and match visual design and code easier with this tool?
andr 8y ago
Can somebody explain how does this compare to Sketch, InVision, Adobe XD, Figma, etc.?
- jdhn 8y ago
  All of the tools that you mentioned don't have any actual code behind them. When I say "actual code", I mean the ability to actually go in and write lines of code to modify your prototypes. Sketch and InVision (not sure about Figma) have "interaction" abilities, such as being able to click on a back button in one screen in order to return to a previous screen, however it's reliant on the user going into the artboard, selecting or drawing a box around an element, and then choosing from predefined interactions (tap, swipe, double tap, click) that will then result in a new artboard showing. Things can be made to look amazing, but it's all a facade. Since Framer is code based, you can do some things that are pretty amazing for a designer, but are incredibly trivial for a developer. Want to use the Spotify API to build out a new music player, and then test it? You can do that with Framer[0], but not any of the other tools that you've mentioned. Their newest version (Framer X) just dropped recently, and since it's based on React, designers can theoretically make a widget, and then hand it off to developers in order to hook up any back end services. [0] https://medium.com/@samthorne/using-the-spotify-web-api-in-framer-dc6a48bf0494 https://medium.com/@samthorne/using-the-spotify-web-api-in-f...
  - cphoover 8y ago
    > designers can theoretically make a widget, and then hand it off to developers in order to hook up any back end services. Ughhh that's a very naive view of what a UI developer does now-a-days. We've tried visual code editors before... countless times, it never turns out well, for maintainability.
michelb 8y ago
As a ux designer I dare say this is quite an interesting tool if you design software. It gives a nice blend between design and code. Your prototypes can use actual data, you can create and use complete design systems, and it’s easy to use as a designer with little code experience. It’s a huge timesaver and very powerful tool even in this first iteration. If you work together with a programmer this tool becomes a really cool platform to combine forces. Pretty sure other tools will adjust to this way of working.

71 points by lsschmidt 8y ago

commandlinefan 8y ago

"Framer is for macOS only"

peach 8y ago
This: basically another Sketch. Currently the only "modern tool" that works cross platform is Figma.
- wishinghand 8y ago
  I've been enjoying using Figma. I definitely wouldn't mind a non-Electron based app of it.
  - pests 8y ago
    Of Figma? There is the web version of it which is the same as the desktop app. Or did I misunderstand?
    - wishinghand 8y ago
      Somehow I’ve missed they had desktop versions. I thought it was web only.
      - hurricanesugar 8y ago
        The desktop version of Figma is built using Electron. The web version is not.
        qiushihe 8y ago
        How does one build the web version of something using Electron? ;)
        hurricanesugar 8y ago
        I was trying to make that point without the snark :)
  - deleted 8y ago
    [deleted]
- alturnwall 8y ago
  Also Adobe XD. I know people give Adobe crap for coming to the party late, but the new tool is quite good with prototyping and web sharing built in, plus they launched freemium model. Framer is great for more advanced prototyping needs w/ animations/transitions/etc, but the XD is pretty good and fast for many needs, and it's Mac + PC.
- uxcolumbo 8y ago
  Well, you've also got Affinity Designer, which is quite good if you prefer a desktop app with no subscription fees (i.e. proper dekstop app and not an electron app).
- dmayle 8y ago
  There is the web-based Gravit Designer: https://www.designer.io/ https://www.designer.io/
  - pragmatick 8y ago
    Somehow that page manages to be just as infuriating as the one for framer. Why do I have to wait for elements to be blended in so I can read them... They should at least make them keep being displayed once they were shown.
uxcolumbo 8y ago
Windows version is in the works. You can sign up to be notified. https://framer.com/forms/windows/ https://framer.com/forms/windows/

degenerate 8y ago

Music in the demo video was very distracting.

dan1234 8y ago

I have to register for an account and verify my email address so I can even trial desktop software!? Thanks, but no thanks.

j2kun 8y ago

I felt extremely dizzy when I started scrolling. How can I trust the makers of a design tool when their website is literally nauseating?

bgdkbtv 8y ago
You're just old mate ;)
planetBlob 8y ago
trust no one
dullroar 8y ago
Yup, I had the same reaction - a few seconds and I was out.
ASalazarMX 8y ago
For the first few scrolls the animation is very disorienting, bleeding over to peripheral vision if your monitor is wide/near enough. It doesn't help if your eyes have different graduation.

shady-lady 8y ago

Superbly done hero element on that page.

shady-lady 8y ago
Music on that video is so out of place though.
- sooheon 8y ago
  They picked it for the beat that they could sync showcase elements to. Not the worst I've seen, and definitely better than the twee ukulele with upbeat voiceover that is the default.
  - shady-lady 8y ago
    Just found it way too overpowering. For a big screen ad - great - very Appley. For an embedded video in a webpage - way too intense for me.

deltron3030 8y ago

Being able to jump back and forth between the design tools and code looks like a big andvantage for more complicated interactive components. Is that the main selling point? That you're able to compare and match visual design and code easier with this tool?

andr 8y ago

Can somebody explain how does this compare to Sketch, InVision, Adobe XD, Figma, etc.?

jdhn 8y ago
All of the tools that you mentioned don't have any actual code behind them. When I say "actual code", I mean the ability to actually go in and write lines of code to modify your prototypes. Sketch and InVision (not sure about Figma) have "interaction" abilities, such as being able to click on a back button in one screen in order to return to a previous screen, however it's reliant on the user going into the artboard, selecting or drawing a box around an element, and then choosing from predefined interactions (tap, swipe, double tap, click) that will then result in a new artboard showing. Things can be made to look amazing, but it's all a facade. Since Framer is code based, you can do some things that are pretty amazing for a designer, but are incredibly trivial for a developer. Want to use the Spotify API to build out a new music player, and then test it? You can do that with Framer[0], but not any of the other tools that you've mentioned. Their newest version (Framer X) just dropped recently, and since it's based on React, designers can theoretically make a widget, and then hand it off to developers in order to hook up any back end services. [0] https://medium.com/@samthorne/using-the-spotify-web-api-in-framer-dc6a48bf0494 https://medium.com/@samthorne/using-the-spotify-web-api-in-f...
- cphoover 8y ago
  > designers can theoretically make a widget, and then hand it off to developers in order to hook up any back end services. Ughhh that's a very naive view of what a UI developer does now-a-days. We've tried visual code editors before... countless times, it never turns out well, for maintainability.

michelb 8y ago

As a ux designer I dare say this is quite an interesting tool if you design software. It gives a nice blend between design and code. Your prototypes can use actual data, you can create and use complete design systems, and it’s easy to use as a designer with little code experience. It’s a huge timesaver and very powerful tool even in this first iteration. If you work together with a programmer this tool becomes a really cool platform to combine forces. Pretty sure other tools will adjust to this way of working.