Useful to the designer / developer. Fresh utilities and tools to speed up the work. Issue No. 8

    In this issue you will find 34 links to fresh and useful releases, the authors of which make a significant contribution to the development of the professional community of designers and developers, as they do it for free. In today's issue there will be a summary of what I have already published on the “Useful for Designer” channel and something else ...



    By the way, if you use Figma , I recommend paying attention to our ready-made design systems . They help freelancers complete more orders per month, programmers are allowed to create beautiful applications on their own, and team leads “sprint” sprints faster using ready-made design systems for team work.

    And if you have a serious project, our team is ready to deploy a design system within the organization based on our best practices and tailor it to specific tasks using Figma. Web / desktop, and any mobile. We are also familiar with React / React Native. Write to T: @kamushken

    #fonts

    Faune font


    Faune is a bit fabulous and interesting in style. Remotely resembles the font that the Medium blog site uses. There are 6 styles available, it can be used for commercial purposes. There is no Russification.

    www.cnap.graphismeenfrance.fr/faune/en.html






    #sketch

    Haiku for mac


    Haiku finally came out under the Mac. We are promised a cool tool for creating animations, synchronizing with the source in Sketch. There will be an export, understandable to developers and the ability to embed their work on the link. And this is only a minimum.

    www.haiku.ai/blog/introducing-haiku





    #css #development

    Bulma CSS framework


    Bulma :) is a fresh CSS framework based on FlexBox. 100% responsive and modular in architecture. Conveniently, you can interact with some elements already on the landing page.

    bulma.io





    #git #development

    Git viewer


    Git repository viewer in terminal mode. A kind of console-style template. Developers additionally offer several features: filters, auto-update, hotkeys, etc.

    github.com/rgburke/grv





    #sketch #react #tutorial #development

    Sketch> browser> React


    Another detailed and fascinating tutorial on organizing Sketch + Browser + React (eng)

    medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526





    #development #react

    Chrome React UI


    Some Chrome browser UI made on React. Open the preview and see the browser in the browser. Interesting experiment.

    github.com/pd4d10/chrome-ui





    #hints

    Entrepreneurial list


    If you are a designer or programmer who is interested in entrepreneurship or has his own business, pay attention to the “Entrepreneurial List”. It has collected a lot of resources (eng) that need to be tracked in order to be ahead of everyone in their niche.

    failory.com/entrepreneurial-lists





    #webtools

    Watermark inc


    Browser tool for applying watermark'ov on the photo. Having loaded the image, you can add your logo, inscription. There are predefined templates, but registration is required.

    www.watermark.ink





    #webtools

    Wordcounter


    Tool for counting words in text. The product, firstly, is designed at a high level, and secondly, it counts the most popular words; and shows the rating of their density

    wordcounter.io





    #development #api

    Telegram API


    Telegram meanwhile has released something more than just the Bot API and offers everyone a platform to create their own Telegram.

    telegram.org/blog/tdlib





    #development

    Telegram login widget


    And later I released a widget for authorization on the site. The widget requests a phone number, then sends a confirmation code and authorizes the browser.

    telegram.org/blog/login





    #webtools

    Omnicalculator


    Collected in one place and perfectly designed, 351 calculators of any size: from simple converters to complex calculations for finance, physics, statistics and so on.

    www.omnicalculator.com





    #sketch #development #tutorial

    Why your app looks better in sketch


    Nathan Gitter, in his mid-article (7.3K!) “Why Your Application Looks Better in Sketch,” compares the rendering of text, gradients, and other little things in iOS and Sketch. There really is a difference! And now there are fixes too, thanks to the author.

    medium.com/@nathangitter/why-your-app-looks-better-in-sketch-3a01b22c43d7 ( translation )





    #tutorial

    Flat illustrations tips


    Tubik Studio writes in an article on “6 features of a good flat illustration” (eng). It is clear that everything is for the sake of PR of its own services, but the illustrations are very cool.

    tubikstudio.com/how-to-create-original-flat-illustrations-designers-tips





    #icons #github

    Font awesome git


    The famous free icons of version 5.0 are now registered in the repository!

    github.com/FortAwesome/Font-Awesome





    #sketch #icons

    Font awesome sketch library


    Font Awesome icons in the form of a Sketch library. I suspect that they are made in the form of symbols and can be changed through overrides. Traditionally for all free files on Gumroad - enter "$ 0" to download for free.

    gumroad.com/l/QySWZ





    #development #css

    Slice revealer effect


    Tympanus puts out for free an interesting mosaic effect of the appearance of images "slice revealer". There are three variations in the archive.

    tympanus.net/codrops/2018/02/06/slice-revealer





    #sketch

    Paddy sketch plugin


    Indentation alignment plugin for Sketch. Enter the desired values ​​into the input, press enter, the system brings a set of elements into visual order. It automatically resizes the button body if you are editing a label, and the indentation on your system should be strictly equal to a certain value.

    github.com/dwilliames/paddy-sketch-plugin





    #uikit

    Audi UI


    Concern Audi is apparently going to soon publish its own design system. Some components from the Audi UI kit in CSS, Vanilla JavaScript, and HTML are already available

    github.com/audi/audi-ui





    #news

    Phase design tool


    Here you are, another Sketch has been announced. He knows how, and this, and this, and even this will naturally be a cut above the rest. So far, only a subscription to the future “early access” is available. Naturally, they promise us another revolution among design tools. Some have already managed, having named the exact release date of their "Studio", now we will observe others. However, with such a landing is already a rather weak start.

    phase.com





    #figma #designsystems

    Figma design system


    An update was released to version 1.3 for the material design system in the environment of Figma. Any production-ready prototypes are now assembled even faster. Click here for a list of updates.

    setproduct.com/material/changelog





    #tutorial #hints #figma

    Isometric illustration tips


    Designer Ryan Morrison works in Fig and offers a way to create isometric illustrations through Group Selection. Watch the tweet with the gif!

    twitter.com/ryryjmo/status/956342323675189248





    #webtools

    Js winamp2


    Does anyone miss the good old Winamp? Here you have the browser version! Of course, your own music is loaded as before, by clicking on the "eject" button. I immediately remembered the sound of a spinning disk in a CD-ROM'e ...

    jordaneldredge.com/projects/winamp2-js





    #sketch #uikit

    Split ui kit


    GetCraftWork began distributing their Sketch UI kit called “Split” for free. Guidelines are not native, the library is symbolic. I'm not sure that from this set you can collect something serious, but for training it is quite.

    getcraftwork.com/split





    #icons

    Space icons


    77 vector space-related icons. Drawn in handdrawn style. Available in SVG, PNG, AI, EPS format. The launch of the Tesla roadster into space leaves a mark on designers :)

    goodstuffnononsense.com/hand-drawn-icons/space-icons





    #app

    Dribbble viewer


    A new unofficial Dribble client for Android has been released. So, if you spend a lot of time on this resource and you are impressed with material design - install and use.

    play.google.com/store/apps/details?id=mathieumaree.rippple





    #stock #css

    SVG backgrounds


    Set of customizable SVG backgrounds. Many ornaments are available, you can change the scale, colors and immediately get the CSS code

    www.svgbackgrounds.com





    #css

    CSS hover effects


    A small collection of fresh foams on the topic of CSS oncovers. But not simple, but triggered, depending on which side the mouse cursor was on top of a block.

    css-tricks.com/direction-aware-hover-effects





    #development #js #api

    Blotter js effects


    An interesting JS add-on has been released that allows you to create stylish glitch effects (and not only) for text.

    blotter.js.org





    #fonts

    Signato font


    Signato is a fresh, free handwritten font (eng), best suited to simulate a signature on documents. By default, only one headset is available.

    signato.lt/en





    #development #css

    CSS paralax effects


    More advanced paralax effects in conjunction with CSS. For example, when scrolling an object, you can make it not only move in the right direction, but also add rotation or transform through CSS animation.

    basicscroll.electerious.com





    #mood

    Gangbase design list


    Another curated catalog filled with links to designer stuff. Allows you to draw inspiration from typography, architecture or viewing the work of other professional designers or studios.

    gangbase.design





    #fonts #stock

    Silhouette font


    Woff / TTF font with high-quality traced silhouettes of people. About 30 different silhouettes are available in the kit.

    github.com/propublica/weepeople





    #webtools

    Grad pad


    Constructors for creating gradients are released regularly, but this one is really a constructor! Convenient, advanced, allows you to collect the gradient quickly, conveniently and export immediately to CSS

    ourownthing.co.uk/gradpad.html





    You can share this article. Let us together develop a design community and support developers by helping them distribute their useful and free products. Thanks for attention!

    Timeline: First editionSecond editionThird editionFourth editionFifth editionSixth editionSeventh edition

    Also popular now: