Framer is a flexible web-based tool that can allow your prototypes to talk directly to a connected device. By starting a server on your computer you can connect to a socket server in a few different ways-locally on your computer, over a local-network, or within Framer. This capability makes it possible to work with Arduino, RaspberryPI, or any other IoT device.

You can connect to an external device through USB, Bluetooth, or HTTPS. In this guide, we’ll be connecting to the Arduino via USB and using HTTPS to connect to our web sockets. HTTP support is not possible.

We’ll show you how to work with an Arduino in both communication directions.

• Arduino sending a command to Framer to trigger an animation
• Framer sending a command to the Arduino to blink a light

Here’s how you can make an Arduino communicate with a Framer prototype

1. Set up your Arduino board and connect it to your computer using the cable.
2. By following the example below you’ll create a loop from your Framer prototype to your Arduino. The button on the breadboard can trigger an animation in your prototype and your prototype can toggle the LED on and off.
3. Open the terminal on your computer.
4. You can use this template to get a headstart. Open this folder in your code editor.
5. Run yarn install in your code editor's terminal (ensure you have yarn installed on your computer)
6. Run yarn start to start your socketio server.
7. Open this example project in Framer if you don’t have it open already.
8. Once your Framer project is ready, preview it alongside your local server console from earlier. If all is working as expected, you should see a line that says “Connected to Framer”.
9. Preview the frame on the canvas and toggle the first item.
10. You should be able to click your component and see your Arduino light up. Pressing the button connected to the Arduino should toggle your light again and reflect that state in your prototype.
11. Now you have basic two-way communication working between your Arduino and Framer. You can add functionality to either side to create limitless hardware-based prototypes.

Originally published at https://www.framer.com.

Think about your current designs in Sketch. Does it make sense to redo them in Framer and start fresh? Or would your team be more successful by importing your current designs and building off of them? The nice thing about moving from Sketch to Framer is that you can keep all of your old designs if you want. Our Sketch import allows you to copy and paste your artboards into Framer so you don’t have to fully start from scratch when you move. Learn more about how the Sketch importer works.

On the other hand, some teams have found that starting fresh when transitioning to Framer was more beneficial. Starting on a new project or feature is often a great time to go all in with Framer. This is because in Framer your designs are interactive from the start, closer to the real deal, and allow you to use the same hierarchy and formatting as engineers do in production so you are aligned from the beginning.

Learning the Framer interface and workflow essentials

While the Framer interface might not look too different from the tools you’re used to, there are a few key things you need to know to set yourself up for success. For example, the differences between components in different tools as well as how to use Frames and set your start point (Home Frame) in Framer.

Find tool definitions and keyboard shortcuts in the original post →

Setting up your team

In your Framer dashboard you can control the settings for your team. Select your team on the left-hand side of the dashboard. Next to your team name, select Team Settings under the ... icon.

To invite members to your team, go to the Members section of the Team Settings modal, enter their email address and select Admin, Viewer, or Editor. Your new team members will be notified through email and you can start prototyping together in no time.

Here you can also control privacy settings in the Permissions section. This is where team admins can set team permissions for inviting members, project access, and prototype access. With these permissions all your files can be completely private and only accessible to those with your company’s email domain.

Finally, In the Team Settings section of your dashboard, team admins or editors can upload Team Fonts to share with the entire team and ensure all team members are using the correct fonts in their projects.

Creating and sharing components

In Framer there are two types of components. A Design Component is a Frame that is optimized for reusability. A Code Component is an advanced type of component. It is similar to a Design Component, except that its primary is written in code. All the components you create in your project will appear in the left hand panel under Components. Here you can drag and drop to quickly use them in your project.

If you’ve created Design Components, Code Components, or even Shared Colors you’d like to share with the community or your team, you can do so by publishing them as a package from Framer’s desktop app. When you publish a package, you are essentially publishing your project file. The components and Shared Colors in your project will be recognized and bundled up to be included in the package. Read more to learn how to publish packages with Framer’s desktop app.

Learn more about components in Framer →

Prototyping

You can now wireframe, design, and prototype all in one place. Framer gives you the power to create more unique prototypes with out-of-the-box transition types. Link from one frame to the next by choosing your target on the canvas. Once the link is created the default transition, Magic Motion, will be selected. Magic Motion is a transition type that allows you to customize the movement of content across screens with your desired spring and ease curves, giving you the most customization. However, if that’s not the transition you’re looking for you can also choose from Instant, Flip, Fade, None, Modal, or Overlay.

Interactive components are readily available for you to use from the Insert Menu. Search from hundreds of ready-to-use components. To add a component to your project, click on the component and then click Insert.

To use real data in Framer all you need is a single component. Install the Data Component from the Insert Menu to populate your designs with data from any source. Learn more about best practices for the Data Component.

Learn more about prototyping in Framer →

Handoff and sharing

While in Handoff mode, the canvas will display distances between layers, and the right panel will show your selected layer’s properties and transitions as code so your developers have everything they need to start building. One of the most useful things about Handoff mode in Framer is that if a selected layer includes a transition, you will see the transition’s animation as either Framer Motion, our production library, or Swift code. Viewers and editors have access to Handoff mode in Framer. This means anyone you invite, such as developers, can copy the code they need to start building.

Sharing in Framer starts in the canvas. Since Framer is on the web you can collaborate with your team members in real time while you design. Anyone can leave comments in the canvas as well to deliver feedback easily and efficiently.

Sharing your files and prototypes is as easy as sending a link. You can invite team members to see your files by clicking Invite and added their emails. Here, you can also specify whether they will have view-only or edit rights. To share just your prototype, click the share icon, choose your permission settings, and copy and send the link.

Learn more about collaboration in Framer →

Originally published at https://www.framer.com.

Switching from Sketch to Framer was originally published in Framer on Medium, where people are continuing the conversation by highlighting and responding to this story.

What is Framer?

We made Framer to empower designers to create beautiful, usable, interactive designs that feel just as good as they look. From start to finish, no code required. Designing in Framer means you get better results in user testing, quicker buy-in, and closer-to-real user experiences. And the best part? You get closer to production with everything you design on the canvas.

Framer is available both in the browser and as a desktop app on Windows and Mac, and you can try it for free.

What makes Framer so different?

Other tools are great for painting graphics on a canvas and they may even be able to make your designs appear interactive. But unlike Framer, they aren’t built on web technologies, so you’ll need extra engineering support to rebuild your designs for real. Framer takes the guesswork out of the equation by giving you the tools to design something visually that you can also hand off to developers effortlessly.

This means less rebuilding for production and you always get the power of code whether you’re coding inside Framer or not.

What can you do with Framer today?

Use the design or development skills you already have to create interactive designs that blur the lines between prototype and product. Thanks to features like Smart Components, Auto Size, and Magic Motion, you can build complex interactions completely without code.

Of course, we know product design teams come with a variety of skillsets, and we couldn’t exclude developers and technical designers. Simply open the internal code editor to explore your interactive ideas with JavaScript or React if you prefer.

No matter how you design in Framer, canvas or code editor, all of your complex interactions and components are ready for you to use in production. Export your animation settings into real projects, use your prototype as a landing page, and get accurate handoff code based on HTML and CSS.

Who is Framer for?

Teams
Framer is a design solution for any team. Whether you’re creating digital products and web apps to dynamic landing pages and sales demos with real-time customer data, there’s no limit to what you and your team can build in Framer.

With real-time collaboration on every platform, you can invite copywriters, developers, user researchers, and more to work directly in the canvas. You’ll get to your end goals faster than ever with everyone always on the same page. Everything from colors and fonts to components and full prototypes can be shared in seconds.

Individuals
Framer is for any creative who wants to create working, interactive designs that can be efficiently shipped to production. Designing apps or websites today means designing more than just static images. You need to be able to show how things work-give viewers a complete experience from hover states, delightful interactions, and smooth screen transitions.

To do this, you’ll find advanced no-code features like Auto Size, Insert Menu, Smart Components, Magic Motion, that allow you to build any UI element you can think of, intuitively.

Whether you’re in sales or marketing or starting your own business, if you have an idea for a digital interface, regardless of your level of design skills-Framer is the tool for you.

Where is Framer available?

Framer is a cross-platform app available in the browser and on your desktop. The current Framer desktop app (left below) includes features like Smart Components, Magic Motion, and Auto Size that you won’t find in the deprecated Framer Desktop (right below).

Want to learn more about where Framer started and where we’re going next? Check out Framer Rewind for a more detailed history, and explore Canny to share your top feature requests and see what’s on the roadmap.

Originally published at www.framer.com.

Framer Today: Interactive Design for Real Products was originally published in Framer on Medium, where people are continuing the conversation by highlighting and responding to this story.

Editor’s note: This guide has been updated for 2019.

Whether you’re in Amsterdam for the first time or sixth, the city never fails to surprise. With a plethora of new restaurants and bars opening weekly and a repurposing of old buildings for new ventures, it’s hard to go wrong in this creative European capital. But while it’s tempting to flock to perennially packed hotspots like the Rijksmuseum or the Red Light District, we’d be terrible hosts if we didn’t lead you down a less beaten path. So consider this your local’s guide to Amsterdam — a Framer-approved list of all the best places to dine, drink and delve into the culture during Loupe 2019.

Accommodation

If you’re still on the hunt for a hotel, we’ve got rooms remaining at Hotel Jakarta, Die Port van Cleve, and Hotel Inntel, all fantastic places with unique characteristics and walking distance to the Muziekgebouw conference venue. Or try The Hoxton on the Prinsengracht, a boutique hotel that boasts a restaurant and lobby teaming with the city’s trendiest denizens. If you’re hankering for something a little more unique, book one of the 28 iconic bridge houses-turned-hotel suites offered by the Sweets Hotel and located throughout the city.

Special mentions: Morgan & Mees, De Hallen Hotel, and The Pulitzer

Coffee & Breakfast

To understand the Dutch relationship with coffee beans, head to Espressofabriek, where any of the bearded baristas can whip up a koffie verkeerd while giving you insight into the specialty coffee scene. Their location in the Westerpark is worth a visit for the building alone, a chic industrial affair located in a former gasworks building. If you’re after fuel of the more hearty variety, Amsterdam cool girl hangout, Little Collins (Oud West & De Pijp) serves up a Korean-fusion brunch menu with highlights like kimchi pancakes, soy-glazed pork belly and the best morning libations menu this side of the pond. But for the pancake purists, there’s always PANCAKES Amsterdam at the IJ, where pannekoeken — the Dutch variety is served up flat, crèpe-like, savory or sweet — reigns supreme.

Special mentions: Scandinavian Embassy, Selma’s, Moak and Staring at Jacob

Lunch

For a quick lunch, head back to school at Cafe DS (Baarjes), which serves up a weekly-rotating vegetarian menu for 10 euros, inside a former school-turned-multipurpose-entertainment-zone. Or kill two (maybe three) birds with a close shave, craft beer, and lunch at Cut Throat barbershop, the best-kept-secret in the Red Light District. If you’re willing to stretch your legs, the Albert Cuypstraat’s mile-long open-air market in De Pijp is a fantastic way to sample some classic Dutch cuisine, like raw haring (not for the faint of heart), chewy caramelized stroopwaffels and all kinds of creamy, nutty Dutch cheese, like Edam or Gouda (pronounced “how-dah”).

Special mentions: Cafe Zurich, Dignita, CT Coffee & Coconuts, Vegan Junk Food

Dinner

Mossels & Gin combines the two great loves of young, urban Amsterdammers, serving it up in a buzzing garden courtyard within the Westerpark enclave. In a similar vein is indoor food market De Foodhallen in Oud-West where you’ll have your pick of 20 street food stalls plying everything from wood-fired pizza and Vietnamese spring rolls to truffle bitterballen. Or class it up at the Daalder in the Jordaan and put your palate in the capable hands of Chef Dennis Huawe and his Michelin star winning 5-course menu. For ethical, locally-sourced and almost too-pretty-to-eat dishes, make a reservation at either Bak or De Kas.

Indonesian food is a staple here and Restaurant Blauw does a fancy spin on the popular rijsttafel. For a trendier take on Southeast Asian food, head to Branie on the Ten Katestraat, where the only thing better than the drool-worthy shareable small plates are the inventive fusion cocktails. Or take a trip to Latin America at Salmuera, where grilled meats, ceviche, and empanadas are paired with an exhaustive wine list.

Special mentions: Binnenviser, Venus & Adonis, Loetje, Bar Central, Primi

Nightlife

Don’t leave without stopping by one of the ubiquitous brown cafes, Amsterdam’s answer to the British pub. Some, like Arendsnest, are popular for their extensive selection of Dutch craft beer, while at neighborhood haunts like Festina Lente, you should expect nothing more than a biertje, rustic charm and perhaps a Framer staff member or two. If you’re looking for more of a scene, bike (or boat) up to the Waterkant, a no-nonsense canalside hotspot serving up strong G&Ts, 90s R&B, and surprisingly good Surinamese bar bites. Nearby, Bar Oldenhof offers a delightful step back into a 19th-century parlor, complete with whiskey cocktails, fireside nooks, and a cigar room.

Imbibed enough adult juice and ready to hit the town? Check the roster at the Melkweg or Paradiso to catch big-name bands in some pretty iconic venues. For something a smidgen more eclectic, pop into OT301, a former squat bar turned anything-goes venue, where you might run into a Balkan band, Berlin-style ping-pong game or bootleg radio broadcast, often all on the same night. Amsterdam also offers a wide range of electronic music events — we do, after all, host over 300 festivals every year, including ADE, Dekmantel, and PITCH — so the discerning dance music lover will not be disappointed. Peruse the lineup at De Marktkantine, a former Dutch traders’ canteen turned house music haven, or take your chances at the eponymously-named De School, a great place to discover homegrown DJ talent. And just like Shelter, beneath the A’dam tower across ‘t IJ, it too holds a 24-hour license — so yes, this is where you head if you want to keep the party going.

Special mentions: Hanneke’s Boom, Wynand Fockinck, Hiding in Plain Sight

Shopping

If you’re finding it hard not to ogle Amsterdammers and their effortless style, head to De Negen Straatjes to deck yourself out in some fashionable threads. Verse Good Store carries some of the hippest sustainable and eco-friendly brands under one roof. Then accessorize with sunglasses or spectacles at the uber-trendy Ace & Tate or swoop up a pair of kicks at sneaker store Solebox, designed to look like the inside of a chemistry lab. If a downpour is in the forecast (isn’t it always?), Scandinavian-born brand Rains is your best bet for waterproof coats, bags and more. Finding it hard to choose between Amsterdam’s many concept stores? We recommend Hutspot, which features only Dutch-crafted clothing and accessories, or X bank, a 700m2 clothing store and art gallery inside the W Hotel.

The Dutch design aesthetic is famous the world over and on display in every bar, restaurant, and home. To get a sense for the genre, peruse ultra-minimalist furniture at HAY — a favorite with the Framer folk — or Moooi, where quirky light fixtures and functional furniture rule supreme. In the market for something more portable? Pick up an artsy book at Sans Serriffe or a ‘made in Amsterdam’ gift at Jan.

Special mentions: Sunika, Six & Sons, District 1071

Activities & Day Trips

With over 400 museums, including the Rijksmuseum, van Gogh, and Stedelijk Museum — there’s no shortage of art and culture in this city. But if you’re up for more of an adventure, pick up a bike — the backpedal omafiets is most popular here — and head away from the center and into some of the city’s most beautiful neighborhoods. Start in the Jordaan, arguably Amsterdam’s most charming neighborhood, where hippie artists and affluent newcomers rub shoulders in mom-and-pop run corner cafes. Then bike through the Vondelpark — perhaps stopping for a drink at Blauwe Theehuis — and hang a right to hit Oud-West, a vibrant enclave where trendy sidewalk cafes, quiet tree-lined streets, and the bustling Ten-Katemarkt are things of note. Or head further afield to the Oost, through wide-open streets that bypass the stately homes of the Plantage and the multi-cultural stores of the Dapperbuurt. Recommended pitstops: Brouwerij ‘t IJ, a craft brewery in a windmill and the tropical wonderland that is Hortus Botanicus. On that note: If you’re a big fan of beer, Amsterdam is home to hundreds of craft breweries, most of which are accessible by bike.

Your trusty new steed can get you as far as you can pedal, with impeccably-marked bike paths stretching all the way to Zandvoort beach, the UNESCO-protected windmills of the Kinderdijk and Marken, a quaint fishing village. If you’re more interested in Rem Koolhaus-style architecture, hop on the train to the modern port city of Rotterdam; or go back in time to Utrecht, where medieval monuments and churches are city fixtures.

Now that you’ve seen Amsterdam by plane, train and bike, it’s time to cross the last mode of transportation off your bucket list and view the city by water. Skip the tourist canal boats, gather some newfound conference friends and rent a Mokum or Sloepdelen by the hour — no prior boat maneuvering experience needed.

Our Guide to Amsterdam was originally published in Framer on Medium, where people are continuing the conversation by highlighting and responding to this story.

Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →

We’re excited to announce that you can now embed fully interactive Framer prototypes seamlessly into Paste. Get ready to amplify feature proposals, product roadmaps, or pitch decks, and share the link with your team, clients, or investors as part of your larger strategy.

Paste’s history with prototyping.

Not so long ago, building a completely new kind of app like Paper required you to also build the design and prototyping tools you needed to see those concepts brought to life. For Paste, it was a combination of Processing, openFrameworks, Arduino, and their own custom javascript-based prototyping platform. From Paper’s industry-defining inks to Pastes’s frames, the FiftyThree team was able to invent new experiences using high-fidelity prototyping tools.

Paste started using Framer early on, and it was immediately clear to them that Framer also holds the same passion for beautiful software that lowers barriers to bringing great ideas to life.

“Framer is a design & prototyping tool that helps you create anything for any platform. It’s the tool professional designers turn to when they feel the need to step off the well-trodden path of standard flows or transitions and create something no one has done before. Framer prototypes also smartly scale for every screen size from iOS to the web. Plus, there’s an undeniable honesty to designing in a tool based in the same medium of code that your application or website design will ultimately be built in.” — Andrew Allen, FiftyThree’s co-founder and Head of Design

Interactive prototypes + interactive mockups.

Framer prototypes drop seamlessly into Paste frames to bring your rich designs to life inside interactive 3D mockups of phones, tablets, and a web browser.

Responsive across devices.

Framer makes it easy to design and prototype responsive apps and Paste makes it easy to show off your prototype inside a range of devices.

How to add Framer prototypes to Paste:

1. Copy & Paste your Framer link — Adding anything to Paste is always as simple as just pasting in the link. Copy & paste your Framer link into a Paste deck and Paste will embed the live prototype and format the color, layout, and typography of your slide to make it look good.

You can call it “done” here but there are a few things you can do to take it a step further…

2. Hide the sidebar — To hide the Framer sidebar, go to your Framer Cloud dashboard, find your prototype, select the Edit button, and select Share Settings. Then, uncheck “Show Sidebar”.

3. Apply a Frame — Hide Framer’s default device frame by adding this line of code to your project: (you also may need to update the Framer Library for your project).

Framer.Device.forceHideBezel()

Then, add any frame in Paste.

Taking ideas to the next level.

Bring your ideas to life with the powerful high-fidelity prototyping capabilities of Framer and then weave them into a beautiful presentation with the fluidity and speed of Paste.

Give Framer & Paste a try.

Try a few examples:

Slider, Loading Animation, News App Navigation

Framer × Paste was originally published in Framer on Medium, where people are continuing the conversation by highlighting and responding to this story.

Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →

Everyone loves a good origin story and Zach Johnston’s is a classic San Francisco tale. “Seven years ago I got in a Prius with two friends and drove across the country. I had just discovered that my HTML and CSS skills were in high-demand on the West Coast and figured the summer months of my sophomore year of college would be better spent building apps in San Francisco than crafting advertising campaigns in New York,” says Zach. Three months after that fateful road trip, it was abundantly clear that going back to Penn State was nowhere in his future.

Today Zach works on Dropbox Design Systems, a team that didn’t exist a year ago. In his three-year tenure at the file storage behemoth, Zach has had a chance to impact multiple products (including Teams and Business) and watched as the company— and design team—grew at a rapid rate.

On growth, scale and the need for design systems

“When I joined, our design team was only 20 people and we were all sitting together. Now we have over 50 product designers and dozens of writers, researchers, and illustrators,” says Zach.

Though the team managed to stay bonded, the product wasn’t always as cohesive. In response, the company began to invest more heavily in reusable components and last year, formed an official Design Systems team.

“One way we’ve enabled our design team is through UI Kits. We first made Sketch Libraries for each platform (web, desktop, and mobile) and just recently published Framer Kits. We keep an eye on which tools our design team is using most and then try to help them spend less time doing the mundane tasks like redrawing buttons,” says Zach, who focuses on the web platform.

He stresses that design systems shouldn’t be about second guessing decisions or implementing heavy processes. Dropbox’s mission is to unleash the world’s creative energy and he sees his team’s mission as unleashing Dropbox’s creative energy.

“For us, having a Design Systems team just means we can spend less time policing and more time enabling.”

Zach, along with Adam Noffsinger, are behind the Framer Desktop Kit, a hand-drawn, custom-built kit that consists of UI components, code snippets, and sample prototypes designed to speed up any desktop prototyper’s workflow.

In spite of the level of detail that went into the creation of the kit, Zach is quick to point out that he isn’t the most advanced Framer user on the design team at Dropbox. “But I’m definitely the loudest advocate,” he says, laughing. It’s a funny turn of events for this non-traditional designer, who spent much of his early years being staunchly anti-Framer.

On switching design tools and mindsets

In fact, not only was Zach not a Framer proponent, he spent a good amount of time as a Framer opponent. “Everyone at Dropbox loved Framer and I was the rebel in the corner who still prototyped using plain HTML/CSS/JS. Ed Chao (a product designer at Dropbox) turned me on to a static site generator called Cactus and for a while I was using that to manage and deploy HTML/CSS/JS prototypes.”

Then one night in 2016, Framer founders Koen Bok and Jorn van Dijk hosted a workshop for Bridge Fellows, a design program run by Designer Fund, and everything changed for Zach: “At the end of the night, Koen came by my table and asked how we were finding the new Design tab. I used the opportunity to lay out all the reasons I thought Framer was inferior to this other amazing prototyping tool, Cactus. He patiently listened and finally said “What if I told you we made Cactus?”

As someone who learned how to prototype without fancy tools, Zach felt that having direct access to the code was the purest form of creation. It took 7 years, but he finally changed his mind. “Cactus helped me realized that “fancy” tools can take your mind off the painful parts of prototyping like spinning up new projects, installing packages, and deploying to a server,” says Zach.

“But Framer’s Design tab showed me that visually laying out a page is far better than writing thousands of lines of HTML and CSS.”

On using Framer to sell product ideas internally

Despite finally seeing the light, there was a second pivotal moment that turned Zach from a mere Framer fan into an advocate. “My PM, Graciela Kincaid, and I had just presented a new Dropbox Business onboarding flow to senior leadership and got feedback that the flat mocks were hard to understand,” says Zach.

“They wanted to feel the onboarding flow, not just see it.”

Back at their desks, the pair strategized next steps and Zach proposed using Framer to make a more believable desktop prototype. “At this point, I knew Framer was powerful, but it took building out a complex desktop prototype to realize just how far it can go. Framer even made it simple to add in the background-blur effects on the Menu bar and Dock.”

“Pushing all of the layout detail to the Design tab and keeping the code to a minimum also made it easy for other designers to hop in and contribute.”

He adds that he and Graciela were eventually able to use the Framer prototype to sell leadership on their onboarding proposal and get buy-in from other teams.

On finding a design home

It’s no secret that Dropbox is doing well. A robust suite of products and a reported 500 million users make this 11-year old company an all-around attractive place to work. But it’s the collaborative and nurturing environment fostered by teams like Zach’s that make Dropbox a truly exceptional place to grow into a career in design. “It’s actually amazing how in spite of our fast growth, the design team still feels like a tight-knit family,” says Zach.

Dropbox loves hiring designers who can bring their designs to life with realistic prototypes — they’re even hiring a Design Systems team manager! Take a look at all their open roles here or DM Zach on Twitter for more information on how you can join a great team that is building tools to unleash the world’s creative energy. If you’re interested in desktop prototyping and plan to use the Framer Kit, read Zach’s Medium post to learn how to effectively utilize the kit in your own workflow.

Design Systems at Dropbox was originally published in Framer on Medium, where people are continuing the conversation by highlighting and responding to this story.

Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →

A lot can happen in a year. For us, 2017 was a whirlwind, so it wouldn’t be surprising if you missed some of our biggest changes. We’ve already got lots planned for this year, but we’d be remiss if we didn’t catch you up to speed on everything that happened with the team, product and company last year.

Code is design is prototyping

• Our mission has always been to open up prototyping to anyone. Yet the code part of our tool presented a high barrier to entry for most folks. Last year, we leapt headfirst into reimagining our product to include a more accessible interface, one that most designers would intuitively grasp — a canvas.

• Separating design from code was a hard decision. In May, we began by formally splitting our product into two separate workspaces. Thanks to your qualitative and quantitative usage, we’re definitely getting closer to understanding the relationship between the two.
• Over a period of 6 months, we released Effects, Gradients, Dynamic Type and Exporting, all built to reimagine a better way to design. Beyond achieving parity with comparable tools, each new addition to the Design tab added up to make a huge difference in your workflow.

Sarah Kuehnle on Twitter

Oh! The auto-grouping feature in @Framer's design tool is soooo nice and saves a ton of time.

• Along the way, we also added better Handoff capabilities, allowing you to share production-ready code with your developers. Framer Cloud also got a serious update with Cloud Access, a dashboard and workflow that allows you to control exactly how your work is shared.

• The highlight of our year was the December 20th launch of a full vector editing toolkit, making Framer a feature-complete screen design tool.
• In a market oversaturated with design tools, it’s hard to convince people to make the switch. But Framer Design’s biggest differentiator is twofold: it’s an efficient design tool that helps you think about how elements of your product will interact, even as you’re designing them.

Benjamin De Cock on Twitter

The new @framer is out, and it's really, really solid. The UI is polished af, performance is amazing, and best of all: the artboard rendering is done entirely in SVG, which means they avoid all kinds of fragile export shenanigans by being a true WYSIWYG. 👌

• So product-wise, we ended the year on a high note. Being named one of Fast Co. Design’s 14 Most Important Interfaces of 2017 was just icing on that cake.

Community

David Galavotti on Twitter

When choosing a tool to express your creative endeavors, pick a tool with a community behind it. This is why I love @framer so much. https://t.co/HxUdep3pGR

• Once again, our community blew us away with their passion and drive. In total, more than 50 Framer design events happened all over the world in 2017, from Sao Paolo and Seattle to Seoul, Sweden and beyond. But it’s our Framer community leaders and content creators who deserve special recognition.
• Seattle power designer duo Stephen and Jordan have not just set the standard for Framer meetups, but they also remain a source of inspiration and support for the greater community. Over in San Francisco David Politi and the Apogee team continue to lead the charge in hosting and mentoring.

• In Europe, we’re lucky to have Sergey, a great community leader, both online in the Framer Community Slack channel as well as offline for Framer London. And we’re pretty excited to have more dedicated lady designers on board, including Marie, who organized a Framer Codelab for Women at Google, and Silvia, who recently celebrated the one-year anniversary of the Framer Munich meetup group—all while finding time to support Framer events happening across Europe.
• Cordova, Pablo Stanley, Greg Rog (LearnUX), Chris Slowik (Designers.how) have all gone above and beyond in their dedication to creating educational video resources for our community. A special shoutout also goes out to Tes Mat for diligently keeping the Framerbook up to date in spite of all the constant product changes.
• With over 23K members and counting, the Framer Facebook group is a thriving community of truly inspiring and supportive individuals. Joining this group is still the #1 predictor of success in learning Framer.

72 on Twitter

I miss having a community like @framer's by my side every time I'm learning a new tool.

Daniel Maniés on Twitter

@framer's facebook community is awesome! I just got help in less than 5 minutes :) https://t.co/CmE6TMEwXe

Small wins, big changes and lessons learned

• Shipping fast and breaking things has gotten us far. In 2017 alone, we logged 28 updates, 15 launches, 10 new features releases, 2 revamped apps and 1 website redesign (launched from a castle in Belgium). While we’ll always be focused on putting things in your hands as soon as we build them, this next year will be all about finding a way to build more sustainable processes that balance team growth with product goals.
• Doubling in size meant that we suddenly needed a whole lot more process and structure. We kickstarted a new onboarding program for incoming hires, which included a buddy system and a process for empowering every employee to learn and teach Framer, regardless of their role within the company.
• One of the best parts of working at Framer is learning about the ways our tool is being used to prototype some of the products we use every day. Most recently, Twitter Threads, Facebook Watch Party and EA’s Battlefield game were designed using Framer. It’s also been exciting to see Framer take off in new markets like South Korea and China, as well as India, Brazil and South Africa.

Paul Stamatiou 📷 on Twitter

On the creation side of things, prototyping proved vital early on as we played with a ton of different concepts and interactions. I made a few dozen different @framer prototypes. Here was an early web creation one: https://t.co/cGfWYmGDBi

• Last year we made the decision to move our blog over to Medium, inspired in part by the successes achieved by Basecamp’s similar move. The viral nature of this platform means that on average, 44% of traffic coming from Medium consisted of new users. But what we gained in discoverability, we lost in ownership and the ability to put our customer stories front and center. To solve for this, we launched Stories, a beautiful new page dedicated to the people and processes behind some of the world’s biggest products.

Room to grow

• In November of last year, Framer raised $7.7 million in Series A funding from Accel to ramp up product development, invest in design education and hire across every team.
• We’re also pretty excited to have onboarded some amazing teams onto Framer, including Pinterest, Netflix, Deliveroo, Victoria’s Secret, Lyft, Apple, Hulu, Airbnb, Goldman Sachs and more. Our product has evolved to accommodate teams as small as two and as large as Fortune 500s, so check out our new Teams page to find out how we can best support you.
• In 2017, we doubled in size and unsurprisingly, quickly outgrew our office space. Though we’ll be sad to leave our 17th century canal view, stoop life and cozy kitchen hangs, we’re very much looking forward to being able to spread out in our new digs — just a few blocks up the street! With over 4 floors, including an event space and lobby area, we’ll have more than enough room to grow our team.

On that note, we’re hiring for all levels of experience in design and engineering as well as sales, finance and ops. It’s a great time to join the Framer team, so if you’re interested in working with some of the best global talent and building a tool used by all the companies you know and love, check out our Careers page for more details.

An Inside Look at Framer’s 2017 was originally published in Framer on Medium, where people are continuing the conversation by highlighting and responding to this story.

Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →

These days, Framer offers a great starting place for fleshing out your product ideas. Whether you’re iterating on checkout scenarios or designing a new in-app calendar, chances are, you’d rather not start from scratch. That’s why we’ve released a series of iOS, Android and Web UI Kits, each containing all the native visual elements you need to quickly design screens and flows. And if you’re in the early stages of UX exploration, our Wireframe Kit provides all the foundational structure you need to kick off your process.

How To Get The Kits

1. Update to v109. You’ll find all the UI Kits and a new beginner tutorial listed in your welcome window. Simply click to open any kit as a new project.
2. The UI Kits are also available for download from the Resources section of our site.

Don’t have Framer? Sign up free.

A New Beginner Tutorial
Get a feel for Framer’s new interface by opening up this tutorial, available in the welcome window. It provides an overview of how our adaptive layout and advanced vector editing make it a breeze to design everything from beautiful icons to multi-screen flows.

iOS UI Kit
This Framer-specific kit contains all the basic building blocks for iOS 11 apps, designed according to Apple’s guidelines. Consider it a template for mocking up screen flows or a way to grab and use specific UI elements. The kit comes packed with 8 different keyboards and modals, as well as 4 phone screen templates that offer everything from launch simulation to notifications and widgets. Native-level buttons, navigation bars, dropdown lists, sliders and typography — it’s all packaged in one handy starter kit.

Android UI Kit
This robust kit has been carefully curated according to Material Design guidelines. It contains 8 different keyboard types, 4 modals and 4 different phone templates that each present a variety of scenarios, including launch, notifications, quick actions and lock screens. A key differentiator in our kit is that we provide you pre-made OS screens that mimic application behavior from start to finish. Putting utility and functionality first, the components of this Android UI Kit are easy to insert into any of your Framer projects.

Download it here

Web UI Kit
Whether you’re designing a simple product website or complex data dashboard, our contextual Web UI Kit provides all the readymade components you need to get started. From content blocks, form elements and various button states to navigation bars and input tables, everything is designed to be used together or pulled apart. Need to inject some personality? Select from over 1,161 icons, available directly in our in-app library.

Download it here

Wireframe UI Kit
UX designers will love this robust kit that prioritizes functionality, behavior and content hierarchy above all else. We’ve included 3 different devices, stripped of everything but the essentials. Scalable arrows also indicate general flow directions and are a great resource for testing various sequences and scenarios. All-inclusive and responsive by design, we recommend this multi-platform Wireframe Kit as a starting point for any product design work.

Download it here

4 UI Design Kits To Kickstart Your Product Ideas was originally published in Framer on Medium, where people are continuing the conversation by highlighting and responding to this story.

Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →

It’s been a year of fast-paced releases over at Framer HQ. From Gradients to Effects and Export, we capped off 2017 with the launch of Frames, Shapes and Vectors, to present a full-featured screen design tool. If you’re already an avid prototyper, this means you’ll no longer need separate software for designing vector graphics. And if you’re just beginning to comprehend the power of prototyping, you’ll find that our new all-in-one workflow makes it easier and more intuitive than ever.

In case you missed it, here are 10 power features (and accompanying shortcuts) that come together to create a highly efficient workflow.

1. Frames are the new artboards

Frames are smart layout containers that can be used as both screens and interface elements. Place buttons, images or smaller Frames within Frames and we’ll automatically determine grouping, hierarchy and layout. It’s a modern approach to artboards, designed to save you time when it comes to nesting and layout. Frames can also be used like Slices, to quickly export icons at specific sizes. Pro tip: add a Frame by hitting CMD + Enter. Conversely, Shapes are simple SVG elements that can be grouped, but do not inherit any constraints. See a full comparison here or watch this explainer video.

Frame Shortcuts

• Draw Frame → A or F.
• Add Frame → CMD + Enter.
• Remove Frame → CMD + Delete.

2. Production-ready SVGs

When it came time to build out our vector tool, we thought about output first. Being both SVG-driven and browser-based allows anything designed in Framer to be rendered 1:1 across all screen sizes and resolution. And when you export SVG icons to use on your website, you’ll appreciate our clean, cruft-free code. To quickly copy, right-click on any shape and click Copy SVG. Alternatively, you can hit Export and export it as an SVG file.

3. Path Tool: Suggested center points

When drawing icons, you’ll often rely on geometric shapes as the foundation of your glyph. Framer’s path tool helps you along the way. While drawing or editing a path, we’ll suggest the calculated center point for you—so you can quickly find and snap to these points along your segment.

4. Path Tool: Angles that lock

While defining diagonal lines, continuing along the exact angle of a previous segment is tricky. Luckily, Framer’s path editing tool does the hard work for you—once your cursor comes close enough, we’ll lock your angle for you, so you can draw perfectly aligned icons and illustrations.

5. Path Tool: Shape segments made editable

Press Enter or double-click on a shape, and hover over any line to drag entire segments at once. This comes in handy for rapid editing of more complex shapes.

6. Path Tool: Curves that bend at will

Curve Bending uses synchronized anchor points to guide you closer to your desired curvature, allowing for more advanced illustration work. This is especially helpful if you’re departing from geometric shapes and into the realm of freeform drawing. Click and drag any anchor point to bend and twist the path into more organic forms.

Path Shortcuts

• Path Tool → V.
• Draw Curve → Click + Drag.
• Convert Point to Mirrored Curve → Double-Click.
• Toggle Symmetric & Disconnected modes → Alt.
• Place Point on Segment → CMD.
• Curve Bending → Alt + Drag.
• Lock to Curve or Angle → Shift.

7. Boolean Operations: Exposed Join types

Boolean operations allow you to combine shapes in different ways to create countless new possibilities. Unite, Subtract, Intersect and Difference are the most common forms. Though Unite and Join are similar types of boolean operations, Join is rarely exposed in a design tool. We do so in Framer, though its exact functionality may be less obvious. The main difference is that joined paths do not have to be connected, and they can contain strokes, too.

8. Stroke: Set your own Miter limit

Most tools automatically set this for you. In Framer we expose the property to give you more finite control over how your shape or illustration is rendered. Use it to affect the cut-off of any stroked shape that has sharp corners.

9. Code: Path Animations

Animate alongside paths by using Select methods and setting the point property to a referenced path. Download an example here.

10. Code: Reverse Path Direction

Control path animation direction by reversing the path direction. Right-click on your path in Design, and select Reverse Path Direction.

If you enjoyed this post, be sure to give it a clap (or five). Or leave a comment below or on Twitter to let us know what you think. You can also email us directly at support@framer.com to report any bugs or request specific features.

The 10 Framer Design Features You May Have Missed was originally published in Framer on Medium, where people are continuing the conversation by highlighting and responding to this story.

Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →

At the beginning of 2017, we started with a bold mission — to build and integrate a design tool directly into our existing product interface. In true Framer spirit, we gave ourselves an ambitious deadline, releasing a sequential buildup of features (Design tab, Effects, Gradients, Exporting and Developer Handoff), culminating in this launch. Today we’re proud to unveil our feature-complete screen design tool, fully integrated into Framer. From wireframes and icons to interactions and beyond, Framer is now the best tool for every part of your design workflow. But rather than offering more of the same, we’ve taken an entirely different approach:

Because it’s a screen design tool by Framer, you’re naturally being taught to think about how elements of your product will interact, even as you’re designing them.

At its core, this is Framer’s biggest value add. As technology evolves toward virtual and augmented realities, designers are increasingly being tasked with more ownership of product—from ideation and implementation to actual adoption. And Framer is the perfect integrated environment to guide you each step of the way. To illustrate how we do this, here’s a behind-the-scenes look at a few of the main moving pieces.

Frames

Design today is no longer about static artboards. We live in a responsive world, where truly functional design is defined by how well it adapts to the environment around it.

That’s why in Framer, layout and hierarchy are automatically assigned, working much as you would expect them to in the real world.

To do this, we’ve done away with artboards completely and replaced them with Frames. Place a Frame on the canvas, add another inside and continue finessing, all while we guess layout and hierarchy. Frames also act as magic containers — anything placed inside them retains its original structure even as you resize. Turn a Frame into a UI element and fill it with text, images or shapes. No matter what you do, the contents of each Frame adapt accordingly, allowing you to define different layouts even within the same design. Once you get used to Frames, you’ll begin to wonder how you ever lived without them.

Shapes

You’ll find a full spectrum of foundational shapes in Framer, from rectangles and ovals to polygons and stars. Shapes in Framer all come with their own contextual UI, giving you granular control over everything from number of sides to blending, stroke and shadows. You can manipulate any shape’s radius simultaneously or double-click to edit each point independently. And our selection of boolean operations allow you to unite, subtract, intersect, exclude and join shapes to create even more combinations. It’s all the features designers know and love, organized within a clean and clutter-free properties panel.

Vectors

While building our vector editing toolkit in Framer, we put speed and control at the top of the list. Instead of reinventing what you find most intuitive, we experimented with smart shortcuts and suggestions that help speed up your workflow. The end result is a labor of love, a dream toolkit made by designers, for designers. Here are a few unique qualities of our pen tool:

• Dynamic Center Points allow you to quickly find and snap the center points on your path line.
• Angle Locking recognizes your initial path line and guides you to lock in just the right angle.
• Segment Dragging is a quick way to drag and directly manipulate a specific section of your path line.
• Curve Bending uses synchronized anchor points to guide you toward desired curvature, allowing for more advanced illustration work.

Exporting

When it came time to build out exporting, we thought long and hard about how to be inclusive of all workflows. The result is a sharing flow that makes it easy to port visual designs out of Framer at every point — export your entire canvas to share wireframes or copy and paste a single icon in your team chat to get a second opinion. Web designers will love the ability to grab production-ready CSS code while just about everyone will appreciate that Framer delivers cruft-free SVG code. It’s all the tiny little details that add up to help you more efficiently sync between design and development.

In the end, to say our 2017 has been a roller-coaster ride would be an understatement. Through it all we’ve depended heavily on you— our vibrant, supportive and eternally encouraging community. Your user testing, feedback rounds and constructive criticism is the fuel we needed to truly deliver on our most monumental mission to date. We couldn’t be more proud to be the team behind Framer, the only tool you need to be a better designer today, tomorrow and beyond.

Drop us a note on Twitter or Dribbble and let us know what you think of our new screen design tool. Or email support@framer.com to report any bugs or request specific features.

Framer Is Now The Best Tool for Screen Design. Here’s Why. was originally published in Framer on Medium, where people are continuing the conversation by highlighting and responding to this story.