...



Francesco Bertocci

Founder of Free&Willing / Design Advocate at Sketch

Profile image

Francesco Bertocci

Founder of Free&W...


Timeline for Sketch

#Sketch #Plugins #Productivity #Handoff #Animations

Design Interactions, and Export Code, HTML / JS / CSS.









Profile image

Francesco Bertocci

Founder of Free&W...


Timeline 2.0: Interaction Design for Sketch

#AnimaApp #Handoff #Animations

Our mission is to bridge the gap between designers and developers. Enormous amount of time and effort during a product development cycle is spent on designers communicating to developers how the…









Profile image

Francesco Bertocci

Founder of Free&W...


How to Export Sketch to CSS Animations Code

#AnimaApp #CSS #Animations

Enormous amount of time and effort during product development is being spent on designers communicating to developers how the product should look and feel. Usually things get lost in translation. One…









Profile image

Francesco Bertocci

Founder of Free&W...


Swiss in CSS

#CSS #HTML #GraphicDesign #Typography #Animations

Swiss in CSS is a homage to the International Typographic Style and the designers that pioneered the ideas behind the influential design movement.









Profile image

Francesco Bertocci

Founder of Free&W...


Using Time To Sculpt Software Animation

#Animation #BestPractices

Designing animation is sculpting time. Timing is critical. If you don’t consider animation timing, you’re not designing animation.









Profile image

Francesco Bertocci

Founder of Free&W...


Sketch: Bottom and Top-Right Pinned Menus using Anima App

#Sketch #UIDesign #Tips #AnimaApp

At the moment the only way in Sketch to make an Updatable Bottom and Top-Right Pinned Menus using Anima App is to “hack it”. (If you landed here it’s probably because you tried it before and didn’t really work fo you… It was a problem for me too, hence this hack 🤪)

Get the sample file or read below:
  1. Apply a 180 degree rotation (Transform) to the stack



Apply a 180 degree rotation

AND to the actions/elements in the stack (Visually it will look the same as your original menu.)



2) Make sure to pin your stacks (bottom or top right)



Pin your stack or symbol (bottom like above, or top right)

It works with normal stacks and with stacks inside symbols. Same hack for right aligned menus.



Tricky but does the job! :)

👉 Here you can download a sample file.

Let me know if you have any questions.

Ciao!
Francesco









Profile image

Francesco Bertocci

Founder of Free&W...


Sketch: Bottom and Top-Right Pinned Menus (File)

#Sketch #Files

The only way to build Bottom and Top-Right Pinned Menus using Anima is to “hack it”…
1) Apply a 180 degree rotation to the stack AND to the actions/elements in the stack (Visually it will look the same as your original menu.)
2) Make sure to pin your stacks (bottom or top right)

This method works with normal stacks and with stacks inside symbols. Same hack for right aligned menus. See below!

Tricky but does the job! :)









Profile image

Francesco Bertocci

Founder of Free&W...


Timeline: Animation Easing Functions Explained

#AnimaApp #Timeline #Animation #Sketch

Timeline is a tool for animation design, right inside Sketch. On this post we’ll explore easing functions, and the new easing controller. An easing function determines rate of change of a parameter…









Profile image

Francesco Bertocci

Founder of Free&W...


Diya: Timeline animation directly in Sketch (10% off!)

#Sketch #Plugins #Animations #Deals #Prototyping

Beautiful interaction design. Right inside Sketch.

Special Design&Prototype 10% off:
Use code “DAPNYC” at checkout.

Offer ends on May 10th. 









Profile image

Francesco Bertocci

Founder of Free&W...

Workshop: Mastering Sketch

#Sketch #Workshops #NYC #Advanced

This workshop is for for anyone that has already working experience with Sketch and would like to improve or master it.

You'll be learn about resizable Symbols, Plugins, Pattern Libraries and more.

Agenda (3hrs):
– Sketch’s UI: Shortcuts and plugins for navigating folder structures and organizing layers and artboards.
– Styles: Text and Shapes (import/export to share with others)
– Advanced Symbols: How to create nested symbols for creating Design Pattern Libraries (DPL) using Atomic Design principles
– Practical tips for DPLs (lessons learned)
– Managing projects and symbol libraries with Abstract or Kactus
– Naming conventions and exporting (including exporting to SVG)
– Plugins: Manage and leverage plugins for an efficient workflow (Runner, Rename it, Anima Autolayout, Launchpad and more)
– Anima's AutoLayout: building responsive layouts, grids, tables and more.

Time and Date:
– 5:00pm to 8:00pm
– Upcoming Thursday (Date to be announced when we reach the quorum, spread the word and you both get $10 off!)
– Location: Either 135 Bowery or 26 Broadway or in SoHo.

Location:
Manhattan, NY. The exact location to be announced prior to the workshop.

Please note:
– Bring your laptop to follow along and pre-install Sketch 48 or higher (Free trial).
– Each workshop is tailored to needs and pace of the group.
– We require at minimum of 5 attendees, so spread the word! Max 10 students per event.
– Refunds: You can request a refund or save a spot for the following scheduled date. You can cancel anytime up to 48 our prior the event. 

Questions?









Profile image

Francesco Bertocci

Founder of Free&W...


Timeline for Sketch Is Now Available!💥

#Sketch #Plugins #AnimaApp #Animations #Gifs #MicroInteractions

Timeline empowers designers to craft beautiful animations and export them. The first release of Timeline allows exporting to GIF or MP4 files, but as we mentioned in our Secret Plan — we have much…









Profile image

Francesco Bertocci

Founder of Free&W...


Consistent Design Systems in Sketch With Atomic Design and the Auto-Layout Plugin

#Sketch #DesignSystems #BestPractices #AnimaApp #Autolayout

Do you design digital products (or websites) and hand design files off to developers for implementation? If you answered yes, settle in! While the should-designers-code debate rages on, we're going to look at how adding a methodology to your design workflow can make you faster, more consistent, and loved by all









Profile image

Francesco Bertocci

Founder of Free&W...


basicScroll: Parallax scrolling with CSS variables

#CSS #Animations #Frameworks #CSSVariables

Standalone parallax scrolling for mobile and desktop with CSS variables.









Profile image

Francesco Bertocci

Founder of Free&W...


How SVG Line Animation Works

#SVGs #Animations #CSS

I bet all of you have seen that little trick where an SVG path is animated to look like it's drawing itself. It's super cool. Jake Archibald pioneered the technique and has a super good interactive blog post on how it works. Brian Suda wrote about it on 24 Ways. Polygon used it to great effect on a custom designed









Profile image

Francesco Bertocci

Founder of Free&W...


Mimicking the Medium Clap Animation with Sketch and Haiku

#Sketch #Haiku #Animations #MicroInteractions #React

Mastering CSS used to be a barrier for entry to designing complex motion animations. Haiku makes it approachable for beginners.









Profile image

Francesco Bertocci

Founder of Free&W...


FilePond, Where files go to stretch their bits.

#JS #FileUploads

FilePond is a cross platform JavaScript File Upload and Transform plugin, easy to setup and beautifully animated.









Profile image

Francesco Bertocci

Founder of Free&W...


Using Sketch and TexturePacker to create 2D Sprites

#Sketch #Animations

There are a myriad of products and solutions for making 2D sprites. Spriter and DragonBones are among my favorite programs. They have their place and are definitely worth learning, unless you want to…









Profile image

Francesco Bertocci

Founder of Free&W...


Good to great UI animation tips

#UIDesign #MicroInteractions #Animations #UX

Let’s see some examples of UI animations going from good to great. With a little bit of tweaking here and there, you can elevate your UI patterns with animation. The interactions listed show…









Profile image

Francesco Bertocci

Founder of Free&W...


20 UI Animation Tutorials

#UI #Animations #Tutorials #MicroInteractions

20 Really Useful UI Animation Tutorials Every Designer Should Know









Profile image

Francesco Bertocci

Founder of Free&W...


SVG.js

#SVGs #JS #Animations

The lightweight library for manipulating and animating SVG. SVG.js has no dependencies and aims to be as small as possible.









Profile image

Francesco Bertocci

Founder of Free&W...

Workshop: Mastering Sketch (Early Bird - May 3rd)

#Sketch #Workshop #NYC #Advanced

This workshop is for for anyone that has already working experience with Sketch and would like to improve or master it.

You'll be learn about resizable Symbols, Plugins, Pattern Libraries and more.

Agenda (3hrs):
– Sketch’s UI: Shortcuts and plugins for navigating folder structures and organizing layers and artboards.
– Styles: Text and Shapes (import/export to share with others)
– Advanced Symbols: How to create nested symbols for creating Design Pattern Libraries (DPL) using Atomic Design principles
– Practical tips for DPLs (lessons learned)
– Managing projects and symbol libraries with Abstract or Kactus
– Naming conventions and exporting (including exporting to SVG)
– Plugins: Manage and leverage plugins for an efficient workflow (Runner, Rename it, Anima Autolayout, Launchpad and more)
– Anima's AutoLayout: building responsive layouts, grids, tables and more.

Time and Date:
– 4:30pm to 7:30pm
– May 3rd 2018 (spread the word and you both get $10 off!)

Location:
Manhattan, NY. The exact location to be announced 3-4 days prior to the workshop.

Please note:
– Bring your laptop to follow along and pre-install Sketch 48 or higher (Free trial).
– Each workshop is tailored to needs and pace of the group.
– We require at minimum of 5 attendees, so spread the word! Max 10 students per event.
– Refunds: You can request a refund or save a spot for the following scheduled date. You can cancel anytime up to 48 our prior the event. 

Questions?









Profile image

Francesco Bertocci

Founder of Free&W...


How to Morph SVG Shapes in Kite Compositor

#KiteCompositor #Animations #SVGs #iOS

In Kite, you can morph any SVG shape smoothly into another SVG shape using keyframe animation. In this video, I will show how to morph between SVG shapes in ...









Profile image

Francesco Bertocci

Founder of Free&W...


Haiku: Design, meet production

#Haiku #Animation #UIDesign #iOS #Android #WebDev #MicroInteractions

Where designing is building. Design UI components, powered by motion. Works with any iOS, Android, or Web codebase.









Profile image

Francesco Bertocci

Founder of Free&W...


Timeline for Sketch Plugin

#AnimaApp #Animation #Sketch #Plugins

Unleash your creativity. Create GIFs & Videos directly from Sketch.
Pre-Sale continues with 25% off until official release in March. Timeline price will be $79 when we launch.

👉 Watch the video 📼

  • 100% Money back in case of no release
  • 25% OFF Official price (1 year)
  • License includes a year’s worth of updates
  • Expected Release March - 2018
Our products are being used & loved by designers at Apple, Facebook, Google, MailChimp, Starbucks, Shopify, Amazon, Disney Netflix, Trip Advisor and a lot more.

Our goal at anima is to empower designers with powerful visual tools.
Amongst our products you can find Auto-Layout for Sketch and Launchpad for Sketch.

Auto-Layout pioneered responsive design without coding, empowering designers to better express their ideas into live designs.
Launchpad is the first Sketch to live website solution, that enables designers to pubish real websites without the need of coding or hiring developers.

With Timeline, we are aiming to allow designers to create beautiful animations with ease.

If you believe that given the right tools you can achieve much more, support this project and join the movement.

Example animations created with Timeline




To Pre-Order Timeline click "Pay Now" below.









Profile image

Francesco Bertocci

Founder of Free&W...

Workshop: Mastering Sketch

#Sketch #Workshop #NYC #Advanced

This workshop is for for anyone that has already working experience with Sketch and would like to improve or master it.

You'll be learn about resizable Symbols, Plugins, Pattern Libraries and more.

Agenda (3hrs):
– Sketch’s UI: Shortcuts and plugins for navigating folder structures and organizing layers and artboards.
– Styles: Text and Shapes (import/export to share with others)
– Advanced Symbols: How to create nested symbols for creating Design Pattern Libraries (DPL) using Atomic Design principles
– Practical tips for DPLs (lessons learned)
– Managing projects and symbol libraries with Abstract or Kactus
– Naming conventions and exporting (including exporting to SVG)
– Plugins: Manage and leverage plugins for an efficient workflow (Runner, Rename it, Anima Autolayout, Launchpad and more)
– Anima's AutoLayout: building responsive layouts, grids, tables and more.

Time and Date:
– 5:00pm to 8:00pm
– Upcoming Thursday (Date to be announced when we reach the quorum, spread the word and you both get $10 off!)
– Location: Either 135 Bowery or 26 Broadway or in SoHo.

Location:
Manhattan, NY. The exact location to be announced 3-4 days prior to the workshop.

Please note:
– Bring your laptop to follow along and pre-install Sketch 48 or higher (Free trial).
– Each workshop is tailored to needs and pace of the group.
– We require at minimum of 5 attendees, so spread the word! Max 10 students per event.
– Refunds: You can request a refund or save a spot for the following scheduled date. You can cancel anytime up to 48 our prior the event. 

Questions?












Scan & Share
Feed