...



Francesco Bertocci

Sr. Product/UX/UI Designer

Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Flows in Zeplin

#Sketch #Zeplin #Collaboration #Development

For some time, we’ve been scratching our heads around how to present relationships between screens, the flow of the project in Zeplin. This would not just inform developers, but also help everyone in…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Sketch Workflow: 8 point Soft Grids

#Grids #UIDesign #Workflows #Articles

I wanted to share my Sketch workflow designing on an 8 point soft grid. If you are not familiar with this concept please read Bryn Jackson’s great article on 8pt Grids first. I have a fairly unique…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Interaction Flow Kit for Sketch  

#Sketch #Flows #UIKits #Free #UX

The creation of interaction flows is a big part of our process as digital product designers. After many iterations we now have a mind-bending fast way to do all of this in 💎Sketch.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...

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

Sr. Product/UX/UI...


How to make Bootstrap carousel slider use mobile left/right swipe - Stack Overflow

#jquery #JS #WebDev







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Bringing AI to your Workflow without Code: Stamplay adds Algorithmia - Algorithmia Blog

#AI #Productivity #Stamplay







Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Abstract: Secure version control and design workflow management

#Abstract #Sketch #Collaboration #VersionControl #Tools #Paid

Abstract is a platform for modern design teams using Sketch to work together.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...

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?









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Protowire: Prototyping in Sketch (30% off!)

#Sketch #Prototyping #Tools #Plugin #Deals

No coding or exporting to other applications:
Watch the Video

Rather than something you do at the end, Protowire aims to integrate interaction and animation into the design process without having to change your designs to suit the software.

  • Integrated into Sketch
    No need to export to a separate prototyping application - review the prototype instantly in Sketch or on a device.

  • UI Animations
    Just by moving layers around you can have overlays appear and disappear.

  • Screen Transitions
    Quickly create the flow of your app by linking up artboards from layers or hotspots.

  • Responsive Design
    Use Sketch’s resizing constraints and responsive artboard groups to make prototypes that work on any screen size.

To celebrate the launch there is 30% off the pro version by using coupon code 9146C9AF. 

Offer expires on Monday 26th February at 4pm Pacific Time.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


SQUID UI Flow Template: Design Beautiful User Flows faster.

#Sketch #UIKits #UX #UserFlows

Create elegant User Flows, Diagrams and Sitemaps in Sketch. SQUID is the fully customizable template with over 50 UI Templates for Mobile and Web. Connect UIs









Profile image

Francesco Bertocci

Sr. Product/UX/UI...

Hello 2018!

#Sketch #Prototyping #Workshop #NYC

Hello everyone and happy new year!

I am very excited for what the new year will bring us! So much happened in 2017 in the UX/UI Design and Prototyping space!

Here are some of the things you should check out in case you missed them. A big one for me was the evolution of symbols in Sketch and design systems as well as collaboration among team members, and easier handoffs and if you work with React, lots of exciting things there too.

The last 6 months of 2017 I was pretty busy with a job out of town so I could not organize as many events but I am planning to start the year strong and we'll have events in NYC around:
– "Why it's good to prototype early and often" an event on the (crowded) prototyping space and. Good if you are new to the group/space. This an updated presentation I based on
Timeline by Anima App (just released!)
Fuse Tool's improved UI
Framer Studio
InVision Studio
Figma 2.0

Other big announcement was AdobeXD for Windows

Tons of products now have "Studio" in their name as they all rush to become the all-in-one tool to designers. 🚀

Sketch Workshops in January:
Basic if you are starting now
Advanced if you want to learn more advanced workflows or techniques.

Depending on availability, I organize custom workshop for teams. 

What would you like to learn or improve in 2018?

💌 Shoot me an email
and let me know! 😀

Ciao,
Francesco 









Profile image

Francesco Bertocci

Sr. Product/UX/UI...

Sketch Workshops in NYC

#Sketch #Workshop #NYC #Advanced

Hello everyone and happy new year!

I am very excited for what the new year will bring us! So much happened in 2017 in the UX/UI Design and Prototyping space!

A big one for me was the evolution of symbols in Sketch and design systems as well as collaboration among team members (❤️ Abstract!), and easier handoffs and if you work with React, lots of exciting things there too.

I'll be running a few Sketch Workshops in January:
Basic if you are starting now
Advanced if you want to learn more advanced workflows or techniques.

Depending on availability, I organize custom workshop for teams. 

What would you like to learn or improve in 2018?

💌 Shoot me an email
and let me know! 😀

Ciao,
Francesco 









Profile image

Francesco Bertocci

Sr. Product/UX/UI...

Sketch Workshops for Teams

#Sketch #Workshop #NYC #Advanced

Custom Sketch Training for Teams
This Sketch app workshop is customizable for any team or group either new to Sketch or that is ready to master it and take collaboration workflows to the next level and be more productive.

Agenda example (approximately 5-6hrs over 1 or 2 days):
– Sketch’s UI: What's obvious and what's a little more hidden, navigating folder structures and artboards
– Styles: Text and Shapes (import/export to share with others)
– Symbols Overview: How to create them and when to use them.
– Symbols: Resizing and overriding.
– Manage and leverage plugins for an efficient workflow (Runner, Rename it, Anima Autolayout and more)
– Anima's AutoLayout: building responsive layouts, grids, tables and more.
– Naming conventions and exporting Zeplin (including exporting to SVG)
– Libraries: Using Symbols from shared libraries and UI kits.– Advanced Symbols: How to create nested symbols for building Design Pattern Libraries (DPL) using Atomic Design principles
– Practical tips for DPLs (lessons learned)
– Managing projects and symbol libraries with Abstract

Please note:
– Attendees should bring their laptop to follow along and pre-install Sketch 48 or higher.
– Each workshop is tailored to needs and pace of each group.
– Payment is due at the time of booking. You can reschedule anytime up to a week prior the event.

Costs:
Cost varies based on number of attendees, location, travel time and overall team commitment.

Want to request availability or have questions?









Profile image

Francesco Bertocci

Sr. Product/UX/UI...

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
– Thursday January 18, 2018

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

Sr. Product/UX/UI...


Webflow: Responsive web design tool, CMS, and hosting platform

#CMS #Webdesign #Responsive

Build responsive websites in your browser, then host with us or export your code to host wherever. Discover the professional website builder made for designers.









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


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


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


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


Flowkit for Sketch

#Sketch #UserFlows #Kit #Productivity

Frighteningly fast user flows, content maps, screen annotations, and more.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Mastering Interaction Design through Craft, Productivity and Workflow

#UI #UX #IXD #Interaction #MotionDesign

As UI design gets more interactive, new skills and faces emerge to give us a lesson on how to get animations and movement right when creating delightful screens for rather little devices. To…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Flow Beta: Animate from Sketch files and export Native Code

#Sketch #Flow #Motion #Animation #MobileDev

Flow is a motion-design tool for animating Sketch files and eliminating the most painful parts of hand-off in app development. It bridges the gap between design and development by generating native…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Marvel: New Sketch Plugin, Sync designs. Play prototypes. Record flows.

#Sketch #Marvel #Prototyping #Productivity

Turn sketches, mockups and designs into web, iPhone, iOS, Android and Apple Watch app prototypes.









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Building Design Collaboration Into Your Workflow – Tanner Christensen – Medium

#Collaboration #Design #Process

If you’re a designer who wants to collaborate well: learn to include others in your process early and often, share and gain insights into how each side works, and focus on removing friction from your…









Profile image

Francesco Bertocci

Sr. Product/UX/UI...


Camunda: Create flows in no time

#UX #Flows

Camunda is a simple app for creating technical diagrams. You can easily drag and drop any point and it will automatically create lines and arrows for you. You can also choose from different types of points which can be helpful, for example, for highlighting when a user receives an email from Intercom. Camunda allows exporting to SVG that makes it easy to colour trackable points in Sketch.












Scan & Share
Feed