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

What is Framer? Join the Community
Return to index
Tes Mat
Posted May 29 - Read on Facebook

I’m preparing a talk about prototyping tools and made icons to represent the different kinds of tools.

1. ‘Code’ — Like Framer, or using HTML + JS, or Xcode
2. ‘GUI’ — Pixate,, Flinto for Mac,… anything in which you click buttons and set values
3. ’Signal Flow’ — Origami, Form
4. ’Timeline’ — Principle, Tumult Hype

What do you think?

(I know this isn’t Dribbble… but I’m not a real designer anyway :)


Alexander Vilinskyy

It's perfect, mate :)
Just add some thin strokes to first icon (tags for examle or ";") and it will be really consistent

Davo Galavotti

I love this categorization :)

Amrit Mazumder

I would explore adding a playhead to timeline. The others are great!

Marc Marius Mueller

For the third one, I thought it means linking together screens, like InVision

Alf Bae

How about WIMP for GUI? Icon+pointer

Marc Marius Mueller

Coming back 2 hours later, I don't mind that as much anymore. May I suggest adding some gray element (dots / ellipsis ) between the two {}? That way all icons will feel a bit more consistent with color hierarchy

Tes Mat

I’m gonna go with these. (A ‘</>’ turned out too big and sharp.) Thanks all!

Chad Lonberger

Like these a lot Tes Mat 👍🏻 for GUI might suggest having the cursor over a simple box (or even 2) w/ a dashed stroke.. The window chrome reads like a browser to me personally. Awesome work!

Ahmet Bekteş

If u try to cover all prototyping tools under these four categories; I think Axure, Omnigrafe kind of tools should be in one of these categories. Just saying that...

Read the entire post on Facebook