Published on | Prototyping: From UX to Front End — Medium Greg R

Good news! The New Framer is here and it’s about to change a few things in our design-to-prototype workflow. Here is a 31-minute long tutorial with some tips and a new workflow. Below you can find a short summary.

<a href="http://ift.tt/2sbOaJn">http://ift.tt/2sbOaJn</a>

Design > Code workflow

The New Framer offers so called all-in-one design workflow. What does it mean for UI/UX designers? Well, quite a lot actually. There is a Design workspace now, where you can use tools such as shapes, artboards and media to create the layout. Afterwards, you code interactions and animations using familiar Code workspace. You can switch between the workspaces with ⌘1 and ⌘2 shortcuts.

Artboards and Tools

Will Design workspace make us cheat on Sketch? Not really — or not yet. But that’s not that all important. The best thing about is that you can work on artboards (previously, working on one screen, was a bit of a pain), and create small pieces of UI such as buttons that you can easily animate afterwards.

Link Layers with Code

Not all layers are automatically accessible in code view. To enable the connection, simply click on a small circle icon next to a layer name. This way you can easily access it in CoffeScript by name.

Responsive Layout

While working in Design mode, all you create in Framer is responsive by default. Meaning, you can seamlessly scale an Artboard and most elements will behave as expected. You can easily do tweaks by pinning elements to the sides of your layout or parents.

Math in inputs

It’s hard to believe that nowadays only a few tools has what was the wow feature of early Sketch version — mathmatical operations in input fields. Framer has it. You can easily calculate sizes, positions and more with operations such as 1440/8–12.

Icon Library

In the Design workspace, you can easily access tons of icons that you can use instatnly in your prototype. They all have common, minimalistic style and work great with other UI element. All of the icons are vector-based, so that you can scale and transform them easily with no harm.

SVG support

Framer lets you drag and drop any graphic and media asset into the application frame. It easily imports bitmaps and SVG’s.

Common Shortucs

Framer’s keyboard shortcuts are well known by designers from other apps such as Sketch or Photoshop. If you want to create Artboard, simply press A, holding Shift while scaling will let you keep proportions, holding Alt will scale from the center. Spacebar will let you navigate comfortably while zooming, and ⌘d will duplicate the object (so will holding Alt while dragging).

Flow Component

One of my favourite features of Framer are readymade Components, such as Flow Component, Page Component or Scroll Component. In the video you can see how simple it is to create flows accross Artboards with the Flow Component and how it animates your transitions between pages.

Collaboration and Sharing

Framers lets your team easily exchange comments and upload prototypes to Framer Cloud. In addition, you can share prototypes with clients or project owners and update after their feedback. Thanks to versioning you can easily revert to an older version of your file.

I believe Framers’ Team deserves huge Kudos for all the hard work and making our projects look, feel, and serve people better 👌

I encourage you to watch the tutorial on top of this article to see complete new Framer workflow on a simple prototype.

Hope you’ve learned something useful 😉. If so — please subscribe to course and article reminders on learnux.io

<a href="http://ift.tt/2qSoJIV">http://ift.tt/2qSoJIV</a>

New Framer Workflow — 10 things you’ll love ❤️️ was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

New Framer Workflow — 10 things you’ll love ❤️️

Cool stuff, every week

More Articles