10 tips to save time as an UX UI designer

This is some text inside of a div block.
Min reading
Share this article
Image with article title and logos from Figma, Adobe XD, and SketchImage with article title and logos from Figma, Adobe XD, and Sketch


    A project in mind? Let's work together.

    Start a project
    Merci pour votre confiance=
    Vous allez recevoir un mail de confirmation.
    Oops! Something went wrong while submitting the form.
    Start a project


    At 40/60 studio, we seek to optimize
    our time and effort to be able to focus on creating.
    These tips allow us to save time during a UX audit, as well as during the rapid composition of screens or during a pixel-perfect UI!

    1. Visual Inspector

    Visual Inspector is a Chrome plug-in that will allow you to quickly understand the composition of a page and how it was designed. Ideal for starting an Ux audit, you will find the inspection to study the grid, spacings, colors and typography variants.

    Inspecteur Web

    To download here

    2. Google Analytics

    Conversion is still a priority for a lot of websites. As a UX researcher/designer, you need to track user activity on your website, know where they're coming from, how long they stay on your site, and how to improve your conversion rate. Google Analytics allows you to track all of these metrics.

    Three variables are of particular interest to us in the agency:

    • acquisition channels
    • The bounce rate
    • The routes taken

    If you want to use Google Analytics, start with the help of google analytics help center.

    Image de google analytics
    Image de google analytics

    3. Fast alignment and smart layout

    Quick alignment is a very useful feature that you'll find on Figma and Sketch. It allows you to select a group of elements and align them in 1 click using the blue button at the bottom right.

    Présentation alignement dans Figma

    Smart layout is a Figma feature that allows you to manage
    the layout of the elements of your design.
    The purple lines between the elements allow you to quickly adjust
    the spacings between the objects while the circles give you the possibility to interchange places between them. It's fast and super easy;)

    Présentation espacement dans Figma

    4. Scale Layers

    Bonne pratique de conception de bouton

    To avoid having your elements misdistributed when you change scale, I recommend using the Scale layers tool in Sketch. It's a simple solution that will save you a lot of time.

    Select the elements to be resized and click on “scale” in the header — you can also use the CMD +K shortcut to change the size of your elements in percentage or pixels.

    Gestion des tailles des layers dans Sketch

    Note here that this feature does not yet exist in Figma...

    5. Dimension and position fields as calculators

    You may have never tried it, but it is possible to use position and dimension fields as calculators. This feature is available in almost any design software including Figma, Sketch, XD, or Illustrator.

    For example, if you have a 100px wide rectangle, you can quickly divide it like this: 100/2 and the rectangle will be 50px. Likewise, to multiply it, simply make 50*2.

    Gestion des tailles des layers dans Sketch

    6. Font Ninja

    Font Ninja is an application that allows you to identify a font on a website in one click. To use it, download the Chrome plug-in and hover your mouse over a font.

    I use it in addition to Visual Inspector to be able to write with the selected typeface.

    Présentation de FontNinja

    7. The suspension points

    Using suspension points is a great tip to avoid breaking a design.

    It is often thought that all text should be visible in a single interface. But most of the time, the user is able to understand the meaning of abbreviated or reduced text. If not, give him the opportunity to click on the text to enlarge the sheet and see more information.

    Illustration de point de suspension

    However, if it's key information for the experience, it's best to avoid ellipsis.

    8. Create your color palette

    Illustration palette de couleurs

    One of the quickest ways to create a color palette is to use Illustrator.

    The “shape gradient” tool allows you to select the gradients you need in 2 clicks.

    How does it work? First, create the squares. The first with your chosen color, the second to make the gradient.

    Illustration de forme dans un outil de conception d'interface

    Then, select the 2 objects and click Object > Shape Gradients > Gradient Options. Define the number of steps. I recommend it 4.Click again on Object> Shape Gradients >Create.And There you go, you now have your color palette!

    Illustration de l'edition de couleur de forme dans un outil de conception d'interface
    Illustration de l'edition de couleur de forme dans un outil de conception d'interface

    9. Manage your content with Content Real

    When designing interfaces, we are always faced with the problem of content.

    Today, the first instinct of designers is to use the famous “L o r e m i p s u m” in order to visualize the text boxes.

    To this, we note two problems. The first is the loss of time. Unlike Illustrator, Figma and Sketch don't have the ability to automatically fill text boxes in”L o r e m i p s u m”. So, we waste a lot of time going to Latin text generator sites. The second problem is the lack of precision. The”L o r e m i p s u m“gives us no idea about the nature of the content. Is it a [dynamic commercial hook]? A [name first name]? etc.

    Content Real allows you in a few seconds to place content adapted to its design in order to give it more realism.

    Présentation du plugin figma Content Reel
    Présentation du plugin figma Content Reel

    Small defect to note, the plug-in is American and the content is therefore English, with American cities...

    10. Manage your icons with Feather icons

    Feather icons is a simple application that allows you to organize and store icon libraries. This saves you from having to download an icon every time you need it.

    My second favorite icon bank is Boxicons, which is less beautiful but more complete.

    Présentation du plugin figma Feather Icons


    Let's talk about what we can do together.

    Do you want to chat in person?
    Photo de Quentin Da Silva
    Quentin: 06 32 41 68 82

    Do you still have questions about your project?

    Specify my project using the Product Calculator
    Flèche bleu qui pointe vers le haut à droite

    Learn more about 40/60 with a good old PDF

    Icone de fichier
    40/60 Studio for startups.pdf
    Icone de fichier
    40/60 Studio for corpo.pdf
    Thanks for your message.
    We will get back to you as soon as possible!
    Oops! Something went wrong while submitting the form.

    Un projet en tête ?
    Travaillons ensemble !

    Commencer un projet
    Personne autours d'une table qui participe à un atelier