...



Francesco Bertocci

Sr. Product/UX/UI Designer

Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Fuse Streams on YouTube

#Fuse #Tutorial #Prototyping #UX

Learn Fuse by watching these videos.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Sketch 48: Responsive Focusable Images via Nested Symbols without Plugins

#Sketch #Responsive #UIDesign

1) Download the .Sketch file (Free)
2) Edit the symbols and see how they are set up. 
3) Change images and focal points and see how they change when you resize them in the main artboard. 

More info on how to use the file on this Medium post.
–––
It took several hours to write this post and create the file, if you can afford it I appreciate your contribution to the newsletter!









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Sketch 48: Scale Symbols (Including Text)

#Sketch #Tips #FreeDownload

With Sketch 48 we can now scale symbols but you have to make sure to use the Scale tool. Overrides will still work and the text and borders will scale beautifully. Download a sample file below.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Automate Sketch

#Sketch #Plugin #Advanced #ProTips

Make your workflow more efficient.


All Features

MenuNotesLayer |
Fix to Parent with Margin | Fix the width and height of the parent, and set the margins.
Fix to Parent Width (Height) with Margin | Fix the width or height of the parent, and set the margins.
Bounds Layer for Every Selection | Create a bounds layer from the selected layer.
Divide Layer | Split Layer.
Ungroup Shape Layer | Ungroup shape layer.
Unlock All Layers | Unlock all layers.
Toggle Layer Constrain Proportions | Lock or unlock constrain proportions for selected layers.
Select All Layers In Selection By Type | Select all groups, text, shapes, bitmaps, symbol instances, slices, exportable layers, hidden layers.
Select All Layers In Selection By Name | Select all layers match by layer name.
Select All Child Layers | Select all sub-layers.
Select All Siblings Layers | Select all siblings layers.
Select Parent Groups | Select parent groups.
Select Layers Outside of Artboard Bounds | Select and reveal layers which is outside of the artboard bounds.
Select Reverse | Select reverse.
Paste and Replace | Paste and replace, replace the selected layer with the Sketch layer on the clipboard.
Clear Layer Name | Clears the layer name and removes the "copy" after the layer name.
Remove Redundant Groups | Remove redundant nested groups.
Remove Empty Groups | Remove empty group.
Remove Hidden Layers | Remove hidden layers.
Remove Transparency Layers | Remove transparency layers.
Create / Sync Link Layer | Create a link symbol layer from select group or artboard, and update the link symbol layers.
Arrange |
Change Places Between Two Layers | Change two objects positions based on midpoint or coordinate origin.
Tile Objects | Tile objects with grid or any orientations.
Tile Objects by Position X (Y) | Horizontal or vertical tiling objects.
Tile Objects Horizontally (Vertically) by Index | Horizontal or vertical tile based on layer list location.
Arrange Objects | Arrange selected layers or artboard.
Order Layers By ... | Change the position in the layer list based on the object X / Y value, name, type.
Reverse Layer Order | Invert the position in the layer list.
Text |
Increase / Decrease Line Height | Increase and decrease line height for all selected text layers. Plus or minus half of the value that you move objects while using Shift-Arrow key, you can change the value in Preferences - Canvas - Nudging.
Increase / Decrease Letter Spacing | Increase and decrease 0.38 letter spacing for all selected text layers.
Increase / Decrease / Reset Horizontally Scale | Increase, decrease and reset horizontally scale for all selected text layers.
Split Text Layer | Split selected text layers to multiple layer, use new line and a separator.
Combine Text Layers | Combine selected layers to one layer.
Capitalize | Capitalize.
Change Baseline offset | Change Baseline Offset for selected range of text layer.
Change Text Orientation | Change Text Orientation for CJK text layout.
Change Typeface for Latin Character | Change the typeface for latin-character in the text layer.
Add Space Between CJK and Latin Character | Add space between Chinese and Western.
Replace Fonts | Replace Fonts.
Replace Missing Fonts | Replace missing fonts.
Resize to Fit Text Height | Resize text layer to fit text field height.
Unfixed Layer Name | Cancels the fixed layer name of the text layer so that the layer name of the text follows the content.
Slice |
Auto Slice | Create a slice based on layer with export preset.
Fast slice, Fast slice Setting | Create a URL-friendly slice based on layer with export preset, without modal window.
Remove All Slices | Clear all slices.
Clear All Exportables | Clear all Exportable settings.
Save/Load Export Presets | Save and load export presets.
Artboard |
Artboard Form Selection | Create a new artboard from the selection object.
Artboard Form Group | Create a new artboard from group.
Artboard to Group | Artboard to group.
Resize to Fix Height | Adjusts the artboard to fit the height.
Move Artboards to Bottom of Anther | Move artboards or symbol masters to the bottom of another one.
Export all Artboards | Export all artboards, symbols to PNG / SVG.
Export all Artboards to HTML | Export show with HTML, searchable. When using SVG format, you can drag directly into Sketch.
Symbol |
Reset to Original Width / Height | Reset to original width / height.
Reset Overrides | Reset symbol overrides in selection.
Select All Instance of Symbol | Select all instances of the symbol.
Select All Instances of Imported symbol | Select all instances of imported symbol (library symbol).
Rename Instances | Rename all instances, rename selection instances, rename instance by symbol master.
Move Symbol Masters To Another Page | Move selected symbol masters to anthoer page.
Selection to Symbol Master | Change the selected layer directly into the symbol in its original position.
Detach Unused Symbol Master | Converts unused symbol templates to groups.
Remove Unused Symbols | Remove unused symbols, for Sketch 48+, with symbol preview.
Export all Symbols As PNG | Export all symbols as PNG according to the "Page / symbol" rule.
Sync Symbol Master from Sketch File | Synchronize symbols from Sketch files base on symbol ID.
Replace Pages from Sketch File | Forcing the replacement of the same name from the Sketch file, you can import the page containing the symbol by modifying the page name.
Library |
Fix Library ID Conflict | Fix library file with same document ID.
Imported Symbols Link Manage | Link imported symbols to another library, or fix the library not found error.
Replace Symbol With Library Symbol | Replace symbol with any library symbol.
Change symbols to Library Symbol Base Symbol ID | Change the selected/all symbols to library symbol base on symbol ID.
Change Local Text Style to Library Text Style | Change local text styles to same library text style from selected library.
Change Local Layer Style to Library Layer Style | Change local layer styles to same library layer style from selected library.
Import Document Assets from Library | Import document assets like colors, gradients and images from any library.
Import Styles from Library | Import text styles and layer styles from any library.
Add Library Preview | Add a artboard for library preview image.
Check For Library Updates | Check for library updates.
Styles |
Select Layer by Layer / Text Style | Select layer by layer or text style in curret page, selected layer groups.
Paste Fills / Borders / Shadows / Inner Shadows / Blur / Text Style / Text Color | After run "Edit" - "Copy" - "Copy Style ⌥⌘C", you can paste the fills, borders, shadows, inner shadows, blur to selected layers.
Add Solid Fill from CSS Color | Fill from CSS color code.
Fill Color from Global (Document) Colors | Fill from the global (document) color fast.
Swap Fill and Border | Swap fills and borders.
Remove All Disabled Styles | Remove disabled styles in all layers of the current page.
Remove Unused Layer / Text Styles | Remove unused layer styles and text styles.
Create Color Guide | Create a color guide from document color.
Create Typography Guide | Create a font style guide from a text style.
Import Document Assets from Sketch File | Import resources (colors, gradients, and patterns) from Sketch files.
Import Text Styles from Sketch File | Import text styles from Sketch files.
Import Layer Styles from Sketch File | Import a layer style from Sketch file.
Guides |
Clear Guides | Clear all guides.
Grid Presets | Common Grid Presets, like 8x8, 10x10 etc.
Hide All Grid/Layout | Hide all grid or layout.
Copy Grid/Layout/Guide | Copy the grid/layout/guide from seleted artboard.
Paste Grid/Layout/Guide | Apply the grid/layout/guide for seleted artboards, you must run Copy Grid/Layout/Guide first.
Prototyping |
Bring All Hotspot to Front | Bring all hotspot layer to front.
Development |
Pick Color and Copy the HEX Code | Pick a color from screen and copy the HEX code.
Copy Slice as Base64 | The slice image is copied to Base64, depending on the format and scale of the first item of the slice, you can get a different image.
Copy Selected Layer Name | Copy the selected layer name to the clipboard.
Copy ObjectID or SymbolID | When you select a layer, copy the ObjectID or SymbolID of the layer to the clipboard.
Show and Change Layer Info | Show and change layer's objectID, symbolID etc.
Script Editor Setting | Script editor font and font size settings.
Edit Plugin Setting | Set up external plugin editor, default editor Atom, Sublime Text, Visual Studio Code and WebStorm.
Reload Plugins | Reload all plugins.
Utilities
Export Clean Code SVG | Export or copy selected layers to clean code SVG, it can ignore layers by name or type, and optimize with SVGO.
SVG Export Setting | SVG export settings.
Nine-Slice from Bitmap Layer | Crop a bitmap layer to 9 part with resizing constraint settings.
Convert Sketch File to Other Version | Go to Sketch File for any later version of 43, you can open a high version file or go to a lower version.
Show File in Finder | Open the current document in the Finder.
Open Terminal at File Folder | Open the terminal and switch to the directory of the current document.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Haiku: design meets production

#animation #UIDesign #webdesign

Design, meet production. Craft imaginative UI components that snap into any web app. Code optional.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Learn CSS Grid (why it’s better than Bootstrap)

#CSS #HTML #UIDesign

Scrimba is a community of developers sharing knowledge through interactive coding screencasts.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Top 10 QR codes supported by iOS 11

#UX #Tech #QRCode

QR codes aren’t limited to being scanned with the camera (although it's their primary use). If you come across a QR code on iOS 11 and press-and-hold to save the image, iOS will detect the code’s contents and offer to act on it similar to the native camera app.

QR code adoption over the past few years may have been lackluster but Apple’s native support of it in iOS 11 could give it a bump into the mainstream. Although QR codes have some advantages in the real world, applying them creatively and appropriately will be the challenge.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


FontBase: Use Google Fonts in a Single Click!

#Fonts #Google #UIDesign

With FontBase, you can browse Google fonts on the web, but activate them like they were local. Like magic, but better.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Painting with Code

#Sketch #Plugin #React #OpenSource

Introducing our new open source library React Sketch.app.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Lottie: Behind the scenes of our new open-source animation tool.

#UIDesign #tools #Animation #opensource







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Adult Swim: Elastic Man

#Web #3D #Interactive







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Airtable Universe: Polaris UX Nuggets example

#UX #Research #Video #Feedback #collaboartion

Tomer Sharon, the head of User Experience at WeWork and author of the books Validating Product Ideas and It's Our Research, considers Polaris "one...









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Sketchbook plugin: HTML-sketchapp · GitHub

#Sketch #Plugin #HTML #Productivity

Experimental HTML to Sketch export solution









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


How to Build an Effective Design Framework | Toptal

#DesignSystem #UIKit #UIDesign #Tutorial #Sketch

Design frameworks help designers work more efficiently using reusable components. This article outlines how to create one (includes a free Sketch UI framework).









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


1–2–3 Guide for Managing Design Assets – Design + Sketch – Medium

#Sketch #Abstract #workflow #handoff #UIDesign

Easy as it sounds. Check out the recap and below you will find a video guide. If you work as a freelancer or in a Team — here’s the idea. We’ll use: In Abstract, set up New Project named ___Support …









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Swappable & Tintable Icons Using Nested Symbols (Free Sketch file)

#Sketch #template #tips

It would be great to be able to "make an icon a symbol and then switch the icon with an override symbol" using symbols as “masks”…at the moment, it’s not possible. There’s a workaround to do something like that is to combine this technique with the one I wrote about for overriding text color in Sketch.

Check the file below!









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


Customer Journey Maps: How to Build One | Toptal

#UX #JourneyMaps

Customer journey maps are a visual storytelling tool that helps designers empathize with users and identify opportunities for providing a better experience.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


CSS Design Awards: Website of the Year 2017

#Awards #Webdesign #CSS

Welcome to Website of the Year 2017, a special collaboration between CSSDA and Wokine that showcases the finalists and winners of the web design and development industry.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


86 Sketch shortcuts that every product designer should be using

#Sketch #Productivity #shortcuts

Designers, these Sketch shortcuts are about to make your life *so* much easier.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


UI Design System UIKit

#Sketch #DesignSystems #UIKits

Create and develop awesome desktop apps with our starter kit for Sketch.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


UX Power Tools UIKit

#Sketch #DesignSystems #UIKits

Our design systems are meticulously designed in Sketch using Layer Styles, Text Styles, and Symbols, so updating dozens of components takes seconds, not days.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Frames: Web Design System for Sketch (Special 10% 0ff)

#Sketch #DesignSystems #UIKits #Deals

Carefully crafted components and best Sketch techniques combined into a powerful web design system.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Cabana: Design System for Sketch (20% off)

#Sketch #DesignSystems #UIKits

Want to improve your design workflow? Say hello to Cabana. A Design System for Sketch that helps you work better, smarter, and faster than ever before.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Single Element CSS Spinners

#CSS #UX #UI

A collection of loading spinners animated with CSS












Scan & Share
Feed