...



Francesco Bertocci

Sr. Product/UX/UI Designer

Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Atomic: Dynamic Shopping Cart Prototype

#Atomic #Prototyping #Advanced

Make a dynamic shopping cart prototype using components, data and JavaScript.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Rails Gem: Easy drag & drop sorting for rails 4 and 5.

#Rails #UX #Gems

RailsSortable is a simple Rails gem that allows you to create a listing view with drag & drop sorting. The arranged order will be persisted in the table without any pain.













Profile image

Francesco Bertocci

Sr. Product/UX/UI...


JavaScript Load Image (Fix EXIF Orientation)

#JS #Productivity #Images

JavaScript Load Image is a library to load images provided as File or Blob objects or via URL. It returns an optionally scaled and/or cropped HTML img or canvas element. It also provides a method to parse image meta data to extract Exif tags and thumbnails and to restore the complete image header after resizing.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Greenr + Personal Data Startup

#Portfolio #Mobile #UX







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Greenr + Personal Data Startup

#Portfolio #Mobile #UX







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Stealth Self-Help App - UI Key Screens

#Portfolio #Mobile #UX







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Greenr + Personal Data Startup

#Portfolio #Mobile #UX







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Greenr + Personal Data Startup

#Portfolio #Mobile #UX #UI #Branding







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Use all the Databases - Part 1 - Compose ArticlesCompose








Profile image

Francesco Bertocci

Sr. Product/UX/UI...


How to build a real-time todo app with React Native

#React #Tutorials

A todo app touches on all the important parts of building any data-driven app, including the Create, Read, Update and Delete (CRUD) operations. In this story I’ll be building a todo app with one of…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Dynamic Charts for Sketch

#Sketch #Graphs #Plugins

Create the most popular types of charts by real or random data









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Personal Data Startup + Mobile App

#Portfolio #Mobile #UX







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


JotForm Cards

#DataCapture #Forms #Tools

JotForm Cards: the friendly way to ask









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Personal Data Startup + Mobile App

#Portfolio







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Bruises: The Data We Don’t See

#DataViz #Data #Art

Clinical records alone hardly capture the impact the illness of a child has on a family. This is how we used music and art to understand and communicate the information that was missing. In early…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Midnight: Dark Theme Sketch Plugin (now 50% off!)

#Sketch #Plugins #Productivity #Deals

Midnight adds a dark theme to Sketch! I had a chance to try it and ❤️ it.

Bonus features include layer tags (yay to organization!) indent guides, custom selection color, custom canvas darkness, and more. If you are using Sketch before going to bed you might even switch to Night Owl mode.

**Midnight 1.2 now Includes a bonus ultra-light theme called Lark + all new Bright icon-set + advanced features like the ‘Collapse All Groups’ button and high contrast Vector Handles + many performance improvements and bug fixes.

👉 *Special 50% off offer ends soon! Scroll down to get it!

Layer Tags: Apply colored tags to Layers, Artboards and Pages.




Indent Guides: Easily identify how Groups and Layers are nested.



Custom Toolbar Icons: Choose to display icons from a theme, or keep the original icons.


Works with Runner: Automatically match Sketch Runner’s dark mode with Midnight.

Customize Canvas Darkness Darken the canvas to perfectly complement your design.

Change Selection Color: Choose any color you like, or use the default color from the theme.












Profile image

Francesco Bertocci

Sr. Product/UX/UI...


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

Sr. Product/UX/UI...


Use Symbol Overrides to Control Borders in Sketch with Über Tables

#Sketch #Hacks

If you work as a designer, it’s likely you’ll have to render a data tables at some point in your career. Data tables are the epitome of repetitive work. Blank states. Hover states. Conditional…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Gestalt Theory for UX Design: Principle of Proximity.

#UX #BestPractices #principles

Human brain is an amazing data processor whose broad capacity still hasn’t been explored at full. For designers dealing with user experience of any kind, knowledge of cognitive abilities and…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


React Studio

#React #IDE #Mobile #Development #Prototyping

Create app flows and components. Express their properties and data linkage visually. Get code immediately.
React Studio's code output is clean and complete ReactJS projects with nothing extra.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Atomic: Powerful prototyping with Lists.Design

#Atomic #Prototyping #Data

Learn how to populate your prototypes with data from Sheets









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Use a Google Spreadsheet as your JSON backend

#JSON #Prototyping #GoogleSpreadsheet

When writing a simple web app or prototyping something, you may want a quick and simple way to store, edit and retrieve data.

Let's say you write a simple blog and don't want to build a backend to write, edit and store your posts - but you want to conveniently consume this data as JSON - then Google Drive helps you with that.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


How to deliver responsive images across multiple devices

#HTML #RWD #CSS #Optimization

According to the data from HTTP archive, 64% of a website’s page weight, on an average, is made up of images. With mobile traffic surpassing desktop traffic, it has now become even more crucial to…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Alembic for Sketch: Easily extract a color palette from Sketch images

#Sketch #Plugins #color

A Sketch plugin to extract a color palette from any layer that contains bitmap data. This works for both images and layers with a Pattern fill.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Sketch2AE: Plugin for Sketch and After Effects

#Sketch #AFX #Animation #Motion #Productivity

Live After Effects layers straight from Sketch artboards

Sketch layers may now be imported into After Effects without redrawing everything in Illustrator. Avoid the startling realization that you have to repeat the whole import process simply because you forgot to split one element out onto its own layer or that type has to be converted into live text as an additional process per layer.

Quickly export selected layers or a whole artboard from Sketch with type metrics, transform data, images, symbol hierarchy, and grouping intact. It's little bit better than the native Illustrator => AE import. Hooray.

Built by Adam Plouff for the SUMux Motion Design Team at Google.












Scan & Share
Feed