...



Francesco Bertocci

Sr. Product/UX/UI Designer

Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Sketch: Generate a typographic scale from selected text layers

#Sketch #Plugins #Typography #Productivity







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


UI Faces: Avatars for design mockups

#UIDesign #Images #Productivity #Free #Sketch #Plugins

Aggregator that indexes various free avatar sources that you can use in your design mockups by copy—paste, API and Sketch plugin.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Bubble: Visual Programming

#WebAppDevelopment #Tools #Prototyping

Bubble introduces a new way to build a web application. It’s a point-and-click programming tool, entirely without code. Bubble hosts all applications on its cloud platform.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


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

Sr. Product/UX/UI...


Maze: Analytics for your InVision prototype.

#Analytics #Prototyping #InVision

Create missions testers will perform on your InVision prototype and discover how your product’s design can be improved, with 0 lines of code.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Name Organizer

#Sketch #Plugins #Productivity







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


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

Sr. Product/UX/UI...


basicScroll: Parallax scrolling with CSS variables

#CSS #Animations #Frameworks #CSSVariables

Standalone parallax scrolling for mobile and desktop with CSS variables.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


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

Sr. Product/UX/UI...


Looper: Sketch plugin

#Sketch #Plugins #Productivity

Duplicate, Rotate and Scale the smart way









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Design+Code: Resources for Designers

#Sketch #Tutorials #DesignResources











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...


Glue UI Kit Sketch freebie

#Sketch #UIkits #Free #Productivity

Sketch App free sources, Glue UI Kit resource, for Sketch App. Glue UI Kit Sketch file freebie.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


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

Sr. Product/UX/UI...


Sketch app on Spectrum

#Sketch #Community #Chat

The Sketch community on Spectrum. Sketch is the ultimate tool for designing user interfaces, websites, and icons.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Framer: Copy and paste artboards, groups & more from Sketch

#Framer #Productivity #Prototyping #Sketch







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Event: Prototyping in Sketch 49 and What's New / ProtoWire & More Demos

#Events #UX #Prototyping

Sketch 49 brings quite a few improvements. Some obvious like prototyping within Sketch and some less obvious like easier-to-look-at override panels and find-and-replace colors.

Agenda:
– Prototyping in Sketch
– Shared Libraries on Sketch Cloud
Read more about both

– Improved Find And Replace Colors:
I wrote a quick Medium post about this

ProtoWire Demo (Advanced, responsive prototyping within Sketch)

– The Sketch 49 workshop and Protowire demo will be held by me
https://freeandwilling.com/fbmore

– Other speakers TBD. Reach out if you'd like to present!

-----------------------------------------
As usual if you are a student or can’t afford the ticket let me know and I’d be more than happy to sponsor you. Reach out at francesco@freeandwilling.com See you soon!









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


SKPM: Sketch Plugin Manager

#Sketch #Productivity #Plugins #Tools

A utility to build, publish and install sketch plugins.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


iBlocks: iOS Wireframe Kit Freebie Projext by Kishore

#Sketch #iOS #Wireframing #UIKits #Free

Great work from a designer in the Dribbble community; your best resource to discover and connect with designers worldwide.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


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

Sr. Product/UX/UI...


Tools for the Makers: Prototypes

#Tools

A curated directory of tools for the Makers.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Improve your landing page by learning from the best

#LandingPages #Conversion

There’s nothing like getting the whole team together to create a new home page. Designers, illustrators, marketing, growth and developers all working together. You sprinkle on some SEO, optimise your…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


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

Sr. Product/UX/UI...


Resources, links, references and articles on Design Systems

#DesignSystems #DPLs #Teams

Every company — big and small — is building or planning on building a design system for its SaaS offerings. It makes sense. Having a design system in place is an important step for scaling your…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


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…












Scan & Share
Feed