8

What technical knowledge does it take to build something like Atomic/a framer GUI?

5 years ago from , UX Designer

Hi DN, Was wondering what technical knowledge does one need to have in order to build an interface that helps in building interfaces? Eg: atomic.io

I'm a UX designer who has some prior programming experience. But, I haven't written solid code in the recent past. Always wanted to try my hand to build a tool that helps others build interfaces.. I have been playing with Framer and I think that it is beautiful. As a side project wanted to try something on the lines of a GUI for Framer.

Though I have a few thoughts on how an interface should behave, I don't have any knowledge what tools/frameworks/programming languages you need to get it done. Any advice in this regard is appreciated.

Thanks in advance. Cheers.

8 comments

  • Callil CapuozzoCallil Capuozzo, 5 years ago (edited 5 years ago )

    So I had a similar question recently and wanted to get framerjs working on my windows machine (needed for compatibility in my job). I wanted to get as close as possible to a framer studio experience. What I learned in the process is that framer studio is a collection of disparate technologies that all exist already. For instance here was the setup:

    • local nodejs server
    • live reload plugin watching a folder for changes
    • sublime text (IDE) with coffeescript syntax highlighting
    • modern web browser

    All of these technologies can be installed with npm onto any machine - mac, linux, windows. But what framer studio does well is automate the annoying process of running the setup, copying code, opening different programs etc.

    When the problem is broken down like this you can start to see how a very simple gui could be created by writing a simple windows/mac app with a webview that is just a set of scripts to automate this process. And then begin to grow and edit that custom web-view from there. If you look at the history of framer - the early iterations were essentially this setup at facebook, and they used their internal design team as the alpha users and improved based on feedback etc.

    Even though I have never built a product like this. I am almost positive a good direction is just to hack together a solution to the problems you want to solve then find a small userbase and evolve your novel/easier solution to meet needs and you will be able to add and edit over time. Stuff like this doesn't happen quickly unless you have a loot of money.

    Anyway just my 2 cents :) Good luck!

    edit: I wanted to add - the reason framer studio works so well imo is the backbone - the actual framer.js library - the incredible simplification of complex scripting to get interaction working and working natively. For that you gotta find a genius, so thats maybe the hardest part :)

    3 points
    • Vinay ChilukuriVinay Chilukuri, 5 years ago (edited 5 years ago )

      Callil! Thank you so much for that extremely comprehensive answer. Your advice is inspiring.

      I do intend to start small and want to hack things up at the moment and get a very basic functionality working. As I've mentioned in the post, I don't know what are some tools that would help me to put 2 and 2 together. Thanks to you, now I got to know that there needs to be a local nodejs server and the likes. Will explore what nodejs does in the context of this project.

      And, I don't intend to build something for the users, yet. I'm seeing the scope of this as mostly academic, for the time being - I want to get to know different things that facilitate me in building something like this.

      Thanks again, Callil.

      1 point
  • Me Chai SweeMe Chai Swee, 5 years ago (edited 5 years ago )

    I have similar experience building an Survey Editor for my company. You sure need to look at the JavaScript ecosystem like NPM, React.js, Electron. You also need solid data structure and UI architecture like undo-redo command actions, etc.

    Atomic.io is using React.js to do their thing. They seems to get their playback structure right.

    Data structure you can look at immutable.js, Om of Clojurescript.

    Look at how Circle CI's Local State, Global Concern demo.

    It is very workable, pick a small layout to build, like drag and drop some UI or picture into the <Canvas> and soon you will have a much better idea.

    1 point
    • Vinay ChilukuriVinay Chilukuri, 5 years ago

      Hi Me Chai Swee, Thank you very much for that answer. This was what I was looking for. And, I believe that this project is workable as well. And, I don't intend to build the whole thing within a short span of time. I will take it slow and steady, build something small, keep learning whatever is necessary and proceed with it.

      Thank you again. I will look at the JS ecosystem that you have mentioned and Om looks impressive! :) Cheers.

      0 points
  • Nir BenitaNir Benita, 5 years ago

    If you think you can do it better than anyone else, I urge you to find the people that could do it, and go do it.

    But, if you were looking for a side project to learn off of, I would go with @OF's advice to focus on one single thing to learn that you're after, and then find the project that requires it

    1 point
  • Olivier FOlivier F, 5 years ago

    I think you're asking the wrong question. You're asking about frameworks and programming languages. I think you should be concerned about architecture and code volume.

    GUIs like Framer have multiple layers to their application code, and each layer can be quite complex. The relations between these layers have to be carefully considered. And any application that performs editing operations is incomplete without things like undo-redo, copy/paste, drag and drop, etc... Undo-redo in particular is extremely painful to put in your code if you didn't plan for it.

    In other words you're looking at a beast. It's not about frameworks, it's about whether you'll be able to keep your code from turning into a hairball. And if you haven't built anything big lately, it'll be challenging to avoid the pitfalls.

    My recommendation: do try to build something if you're so inspired, but pick something with a simple, limited scope. Build it with anything that looks nice right now. You'll learn a lot more from getting to the end of a smaller project than getting irremediably stuck in a massive undertaking.

    Cheers and good luck!

    1 point
    • Vinay ChilukuriVinay Chilukuri, 5 years ago

      Hi OF, I must've mentioned in my question that my intention of this project is mostly academic, for the time being. I just want to know how I could put a few things together (using the current technologies) and see if something like that could be done.

      Having said that, you are right on about the project's scope and it's inherent complexity. It is always better to start small and get something to completion rather than start something big and be stuck in a limbo :) I'll see what are the baby steps that I could take w.r.t this project.

      Thank you for your advice, OF. Much appreciated. Cheers.

      0 points
  • princess jacquiline, 5 years ago

    Well deaths always what I thought if you do that to be trying grabber a Crockpot style it could very well surrounded by Chip side be very cautious if you are future I wouldn't try that too often now not expecting that any second because you now you've seen how these animals react to other things in the wild and now and that I was extremely gentle in the beginning and I was expecting me is to this big interior on an and 0 have a I'm ago at me but it just kept on going and all along that the more way to piton it and what that I K is going to tune not in attune until I was completely gliding along with it and I'm this accepted so through got a little bit more usually don’t quite know exactly how it's going to react. http://originalgarciniacambogiafacts.com/king-size-male-enhancement/

    -1 points