articles on

UXPin is introducing Design Systems for Designers

UXPin is introducing Design Systems for Designers

UXPin is introducing Design Systems, a tool to fix our design inconsistencies. We all have experienced within a project, the back-and-forth between us designers and developers for inconsistencies with the font, colours and etc. Well, UXPin has made a tool to remedy just that integrates with Sketch. You'll be able to create libraries and change to "master" elements that updates everywhere. It also includes a Sync for your documentation and enhance your collaboration with a standardized design where both can approve on principles, patterns and etc. Get started with Design Systems now. In Their Words As a solution, many companies create their own design system - a modular toolkit of patterns and principles connecting design with code. IBM Carbon, Salesforce Lightning, and Microsoft Fluent are just a few examples. A recent survey of 3,157 designers showed that design inconsistency is the top challenge in the industry (57% of respondents). Video   “Because a design system is modular, it makes design scale more like engineering. Everyone has one set of design and code patterns that are fully integrated,” says UXPin CEO Marcin Treder. “Our solution is like the Gutenberg press for designers: drop in your assets, patterns, and documentation and you’re ready to scale.” Get Started Now: Design Systems

Wake: A Collaboration Design Tool for your process

Wake: A Collaboration Design Tool for your process

We have featured the Wake: collaboration design tool before on ABDZ but now they are back. Launching a new plan and it's completely free! We know how effortfully it is to enforce the collaboration between designers and developers. It is also the case among designers too. Wake is a design tool that shares your progress (with a screen capture) without ever leaving Sketch, Photoshop and even Illustrator (through a keyboard shortcut). Then you can search it by people names, tagging, file types and dates. I've tried and used it before in my process, it's worth giving a recommend for your next project. Behind Wake, we have founder & CEO Chris Kalani was previously a product designer at Facebook. During his time at FB, he helped grow the team from 18 to over 100 product designers. Before that, Chris worked with large brands such as Nike, Microsoft, Adobe and Visa while at Waggener Edstrom and Euro RSCG. In their words Wake is an enterprise web, desktop and mobile product that makes it super easy for designers to share work and collect feedback from their team. It’s the fastest way to get ideas out of your design tools and in front of your team. Led by early Facebook product designer Chris Kalani—Wake is used by some of the world’s most influential design teams such as Airbnb, Spotify, Facebook, Stripe, IBM, Intercom, Capital One, and Microsoft. We believe that transparency throughout the design and decision making process enables teams to build better products. Through an open design process, designers are able to learn from each other and refine ideas, while developers and project managers stay in the loop and provide valuable expertise. What Wake looks like. Introducing new FREE Plan • Up to 2 Contributors  • Unlimited Spectators  • 50 Uploads Per Month  • Sketch & Adobe Integrations  • Native Mac & iOS Apps  Photo Gallery   More Links Learn more about Wake Learn about its features

Framer Design: The UI/UX Design Ultimate Tool

Framer Design: The UI/UX Design Ultimate Tool

It’s a great time to be a designer especially in terms of access to information, resources and tools to get our job done effectively. Today, to make things even more exciting, the lovely people from Framer launched Framer Design. In my opinion, this is the new standard for UI/UX design tools. The reason I am so adamant about my statement is because it brings design and code closer together than ever before. It’s not a coding tool that does design so so, it can be used as a design tool solely and beautifully, but it magically allows you to create prototypes right there as you would expect if you used Framer before. Details on this awesome UI/UX Design tool The new graphics mode offers a way to draw your designs directly in Framer, with a full-featured toolkit and device-specific artboards. But where Framer Design really excels is in its auto-layout functions, built specifically for responsive interface design. Once artboards are complete, a designer can then simply switch over to Code mode and insert pre-made interaction patterns or create multi-screen app flows. Programming logic still powers much of how the Code editor works, but for the most part, it’s wrapped in customizable snippets and a WYSIWYG interface. “Even as a web app, it feels smoother than native. It's solid, does what you expect it to do and then some. I especially like the auto-aligning and responsive settings. I foresee a bright future for Framer.” - Tim Van Damme, Head of Design at Abstract This launch marks a pivotal point in the design space, opening up the power of code-based prototyping to the masses. Within the past year alone, Framer has increased its Enterprise accounts by tenfold, onboarding entire product teams at tech giants like Google, Facebook, Amazon and Uber to corporate companies like Barclays and SAP, as well as agencies like Huge, Work & Co. and Frog. To cater to the specific demands of cross-collaborative teams, Framer has also built an entire Cloud collaborative workflow, providing enterprise-level security and access via the client’s own SSO services. Other team workflow features include a full access management panel with version control, built-in project invites and real-time design updates for team members. I have been playing with it for the past week and I have to say, Framer is on to something here. As a design tool alone Framer is very impressive. It’s fast and has pretty much feature parity with the competition. Now add on top of that the Framer Studio and resources already available for prototyping. That explains why I think this is a big deal. I have been designing and coding for the past 15 years and I always had the desire to have one tool to rule them all. This may or may not be the silver bullet but the most important thing is that Framer is setting the bar for what a product design tool should be and do and that is great for all of us and the industry in general.   How major companies use Framer Because Framer is a browser-based app, the tool allows for unparalleled flexibility when it comes to integrations, modules and third-party apps.   Uber uses Framer + Mapbox to design with real data and reimagine their app Facebook used Framer to prototype FB Live Video Lonely Planet redesigned their website experience using Framer Dropbox used Framer to conceptualize Paper EA uses Framer to design for Battlefield on gamepad/console Classpass uses Framer to design their mobile app experience Work & Co. uses Framer to prototype for clients like Marriott, Youtube and Jigsaw Yandex uses Framer to prototype mobile onboarding flows Deliveroo onboarded their entire design team onto Framer Google used Framer to design Google Gboard Twitter used Framer to prototype Twitter Videos For more information check out https://framer.com/

InVision is bringing Prototyping Tools within Sketch with Craft Prototype

InVision is bringing Prototyping Tools within Sketch with Craft Prototype

Having prototyping tools within Sketch is something I've been waiting for quite some time now. And it's finally here! Introducing Craft Prototype by InVision. Sketch is such a powerful tool for UI design, you can to explore your workflow to a newer level by being able to prototype using Craft. Give it a try so are we. We should probably share some of our tips soon on our overall experience, what do you think? Within Craft on Sketch, you can simply add a hotspot to any layer in the project. Link it to an artboard with a destkop or mobile gesture and create transitions like: fading, sliding, rotating, and more. Once everything is ready, you can sync your screens to preview your work, share with your team, and collaborate in real time. This is pretty exciting! With Craft Prototype, you’ll experience an unparalleled level of continuity between Sketch and InVision. By bringing your design and prototyping process together, work faster, collaborate more seamlessly, and stay focused to create more amazing products with your team.   Product design is complex, but your workflow shouldn’t be. Bring unrivaled context and continuity to your workflow—and create better products—with Craft Prototype, now free as part of the Craft suite of plugins for Sketch and Photoshop. To Get Started Now: Craft by InVision.

TrackDuck Joins the InVision Family

TrackDuck Joins the InVision Family

There is no greater time than our present to be working as an interaction designer and beyond. There's many great tools out there and brands that are working tirelessly to provide the latest of technology to improve our workflow. One of them are the mighty gang over InVision and this time is about acquiring TrackDuck; an award-winning visual feedback and issue tracking tool used by thousands of teams around the world. It's InVision's seventh acquisition in the last 16 months and TrackDuck are now joining their over 2.5M registered users. It's going to increase teams to work seamlessly and manage issues through integrations with leading project management platforms, including Atlassian’s own JIRA Software, Trello, and HipChat. We’re delighted to welcome the talented TrackDuck team to InVision and to continue bolstering our collaboration with Atlassian,” said Clark Valberg, InVision Co-Founder and CEO. “By connecting the tools InVision customers rely on, we are helping teams deliver better digital products faster than ever. Alongside the acquisition of TrackDuck, InVision today announced at Atlassian Summit (Barcelona) its integration with JIRA Software Server, the self-hosted edition of Atlassian’s flagship project management and issue tracking tool for agile teams. InVision for JIRA allows teams to sync InVision prototypes with JIRA issues to facilitate seamless collaboration between design and engineering, including through InVision Inspect. Now any team that uses JIRA Software, whether self-hosted or in the cloud, can take advantage of InVision’s add-on in the Atlassian Marketplace. To Read More via InVision Blog.

Useful Design Tool: WebGradients.com

Useful Design Tool: WebGradients.com

Tools, I think we are having the luxury of a huge range of variety of tools to increase your productivity in your workflow as a designer and even as a developer. With having a huge quantity of tools, it’s hard to handpicked which one could work best for you but to actually try them. Here’s a starter if you’re into having a handy and useful design tool and palette of gradients, meet WebGradients.com. WebGradients.com is a simple and useful tool for designers and developers. Most particularly about gradients, you can grab a CSS code for each colour, a PNG image and by also download a Sketch/PSD file. Make sure to check it out!  

Introducing Freehand from Craft by InVision LABS

Introducing Freehand from Craft by InVision LABS

In my career, I had many many opportunities to create within a group that were in the same room like a workshop type of thing. Other situations where you are working with a team where they are scattered all over the World through different timezones is on the other hand making things harder though. It’s quite hard at times because we are not in the same room but things have changed with the mighty folks from InVision. Introducing Freehand, their latest from Craft to collaborate in real time fast and flexible at the same time. With Freehand, you’ll have the opportunity to use it for any project type, collaborate in real-time and mostly on any devices including Sketch and Photoshop. Least but not least, it’s free and being part of the other awesome plugins from Craft. Freehand is an infinite, collaborative space for your team to work through design ideas in real time. Ideas are driven in part by diversity—how quickly and often can I get this new concept in front of my team, and how easily can they share their feedback? See how it works   Features   • Add artboards or images from Sketch and Photoshop • Hand off control to your teammate • Co-draw to share sketches and rough ideas • Undo, redo, and scale • Comment to share your feedback • Save and share your work • And lots more! Get started now: https://www.invisionapp.com/craft.

Introducing InVision iOS 2.0: All-New InVision App

Introducing InVision iOS 2.0: All-New InVision App

The mighty folks over InVision is announcing today their all-new app named: InVision for iOS 2.0. What is it? It’s their latest addition to increase your workflow in terms of feedback. As we all aware that in our work, we are always going through workshops and presentations where sometimes we’ll miss some of the missing keys: stakeholders. Everyone is busy but with this app, you can make things easier and even on-the-go. Within the app, you’ll be able to easily view prototypes, comment, collaborate and resolve comments and more. All in real-time which makes things even more interesting. Let’s give a watch to the video. That’s why we’ve been working on a fresh mobile experience to support your workflow. We’re excited to share InVision for iOS 2.0, an all-new InVision mobile app—now with the new Conversations tab, to make it even easier to keep projects moving while you’re on the go. See how it works   It’s free, and it’s ready whenever you are. Get the latest InVision app now! To download the app: InVision App.

Introducing Inspect now for Photoshop by InVision

Introducing Inspect now for Photoshop by InVision

We would like to share an announcement from the great folks over InVision and this time is about what we've introduced last month (or so), a tool that makes design-to-development process better for everyone. What do they mean is delivering PSDs or Sketch files to your developers, is now a thing of the past. Inspect by Invision but NOW available for Photoshop users. You'll be able to share your work easier for delivering the assets where the developers can have access to your colour palette, fonts, assets (download assets right off Inspect) and getting the exact specs from your mockups. Brands like WeWork, Bloomberg BNA, and General Assembly have already seen improvements in their team's workflows, making it easier and faster for designers to share their work with developers and for developers to get accurate information they need—like font names, hex codes, images specs, and dimensions. See how it works   Designing and building beautiful and usable interfaces is hard work, making design specification tools exceedingly valuable additions to the process. With Inspect, it’s easy for development teams to quickly get the information they need to start building products faster. Now, designers can get their screens into production in no time, whether they choose to create in Photoshop, Sketch, or both. When design and development speak the same language, in the same place, we all build better products. Streamline your design to development workflow with Inspect by InVision. How to get started with Inspect: https://www.invisionapp.com/feature/inspect-ps.

Introducing Craft Sync for Photoshop by Invision

Introducing Craft Sync for Photoshop by Invision

Earlier this month we shared the latest and greatest from the folks over Invision, the latest from Craft that is now available for Photoshop on Mac and Windows users. And they called it: Sync. What is it? It’s their latest on improving on workflow within Sketch or Photoshop where you’ll be able to sync directly your artboards to Invision with one single click, everything instantly. It’s going to be done! You’ll get to control what you sync and in addition it will be a great addition to how you hand-off your designs to developers using Invision Inspect. See how it works   Now with Craft Sync, experience a better product design workflow by seamlessly syncing your files from whatever design environment you choose. No matter where you choose to create, your path to design-to-prototype continuity is a simple as click, sync, and done.   That’s it! Choose individual files or documents to send, or select a whole bunch of them. Best of all, it’s instant—designs sync with lightning speed. How to get started with Craft by Invision.

Introducing Inspect by InVision

Introducing Inspect by InVision

We would like to share the another announcement from the great folks over InVision and this time is about their latest very much anticipated tool that makes design-to-development process better for everyone. What do they mean is delivering PSDs or Sketch files to your developers, is now a thing of the past. And they called it: Inspect. Aiming to improve productivity, process and less headaches on both parties. You'll be able to share your work easier for delivering the assets where the developers can have access to your colour palette, fonts, assets (download assets right off Inspect) and getting the exact specs from your mockups. It's more like magic and the developers will love this collaboration. See how it works   By making it easy for developers to get the accurate information they need about your designs, your team’s process is clearer and simpler than ever. Say goodbye to endless email threads and mile-long PDF docs. Your whole team can start building sooner, and get the information they need, when they need it—in real time. Inspect really consolidated the amount of tools and processes we've had to do in the past, and keeps everyone up to date on the latest prototypes." -- Gregg Meyer, Design Director, WeWork When design and development speak the same language, in the same place, we all build better products. Streamline your design to development workflow with Inspect by InVision. How to get started with Inspect: https://www.invisionapp.com/feature/inspect.

Introducing Craft Sync by Invision

Introducing Craft Sync by Invision

We would like to share the another announcement from the great folks over Invision and this time is about their latest feature on Craft. And they called it: Sync. What is it? It’s their latest on improving on workflow within Sketch or Photoshop where you’ll be able to sync directly your artboards to Invision with one single click, everything instantly. You’ll get to control what you sync and in addition it will be a great addition to how you hand-off your designs to developers using Invision Inspect. See how it works   Now with Craft Sync, you never have to leave your native design environment to send your designs to InVision. Click, sync, and you’re done. • Improved speed: Users can now send their designs to InVision faster than ever before. • Greater control: Lets designers choose which artboards to send to InVision. • Seamless workflow: All designs sent to InVision via Craft Sync work with Inspect (currently in Enterprise beta). Choose individual artboards to send, or select a whole slew of them. Best of all, it’s instant—designs sync with lightning speed. Craft Sync is now available for Sketch as in today. They will release Craft Sync for Photoshop in a few short weeks. How to get started with Craft by Invision.

Introducing Invision + UserTesting

Introducing Invision + UserTesting

We would like to share the announcement of Invision partnering with UserTesting to bring the another level at prototyping with actual user reactions for your app, website or prototype. It’s something that I have always wanted to bring to my process, it’s super crucial to know how your users engage with your products. Especially when you are in product design and you are working in design sprints and figure out goals to bring the best for your user experience every single update. Better feedback leads to better products. InVision has partnered with leading user research platform UserTesting, to give product managers, developers, designers and researchers a faster, more seamless way to capture real-world feedback on their app, website or prototype. This new integration allows any of our 2 million users to send an InVision prototype directly to UserTesting and hear what users have to say, via rapid 5-minute micro tests. It’s free for 60 days, with 3 free tests per month after that. Lots of you are already using UserTesting to gain better insight into your prototypes—this year, InVision tests accounted for 70 percent of prototype tests on UserTesting! By seamlessly pairing InVision and UserTesting, your team has the power to use the tools you love to build even better products, faster—together. Try it free and see for yourself! How to get started: in just a few steps.

New Tools and Apps to boost your Productivity

New Tools and Apps to boost your Productivity

As we all witnessing the end of Summer (Northern Hemisphere), didn’t anybody felt like it was the quickest summer? We hope that you guys had some time to rest and chasing some light before fall will slowly manifest itself. Through the BBQs, camping trips, road trips; some of us didn’t have that chance and worked hard at making and launching their products to the consumer group. I am intrigued by their strategy and comprehension behind launching products in what I think is the lower season of the year? I am might considerably be wrong because we got to witness some pretty cool products this summer and we drafted down a list of apps, tools, upgrades and more for your hunting of new things to discover. Places to Work Where do you want to work? Enter your location and find out a list of places to work. Tinycards Memorize anything while playing a game! Tinycards is a brand new app from the team behind Duolingo, the most downloaded education app in the world. Even though it won't necessary increase your productivity, I thought it will be great to share as well. Think with Google Put Google research and insight behind your thinking Highly Highlight the web to share the important parts. Panda A smart news reader built for productivity, powered by integrations. Bear App Bear is a beautiful, flexible writing app for crafting notes and prose. Website Downloader Download all the source code and assets of any website Mimo Learn how to code on mobile Buffer A better way to share on social media Compressify Upload any video format file to compress to web-compatible WebM. Sans Francisco A collection of tools to help designers craft delightful experiences. Conv Convert YouTube video to MP3, GIF or MP4. Product Pages Curated directory of the best product pages App Screenshot Builder Create beautiful screenshots for App store & Google play. All for Free! Opentest Seamless screen, mic and camera recording for Chrome. Completely free. Lacona Call up Lacona with a keyboard shortcut and type whatever you want to do. It gives intelligent suggestions as you type and then follows your orders.

Shaper Origin - The Tool to Build Better Products

Shaper Origin - The Tool to Build Better Products

I grew up always trying to make things, from tweaking with my toys to trying to build things by breaking others, that's how I think I got into design. Later I graduated in Industrial Design and since then I have been making digital products. In my spare time I still try to do more analog/manual things, like furniture. Tools are very important for that and when I saw a video of Shaper Origin I was simply speechless. It's a great idea, they want to empower people to build things better. I am thankful for that and I will be getting one for sure as soon as it is available. Shaper Origin is the world's first handheld CNC machine. It makes the process of making things much easier by guiding you trough it, like cutting materials for your project. It has super cool features like digital templates, on-tool CAD, work at any scale, precision registration and many more. Here's the promo video: At Shaper, we're fusing computers with handheld tools to simplify the process of making. Shaper Origin uses computer vision to understand its location relative to a workpiece and precision motors to continuously fine-tune the spindle's position along your intended cutting path. We think of it as auto-correct for your hands. Shaper Origin About the Shaper team The Shaper team is an eclectic mix of experts with backgrounds in robotics, woodworking, film, consumer electronics, computer vision, and design. Having worked at Apple, Amazon, Google, Frog Design, Tesla, and the MIT Media Lab, our interdisciplinary team has considerable experience bringing products to market. We share a common mission of wanting to empower people to build things better than they ever thought possible. - Shapertools.com For more information and to pre-order one make sure to check out https://shapertools.com/

Introducing Data from Invision LABS

Introducing Data from Invision LABS

In the latest installation of Craft from Invision LABS, they are again pushing the envelope by supercharging Craft’s capabilities by bringing designers Data. A free plugin that pulls text, photos, and JSON values from public API sites live into Sketch. Let's give it a look and make sure to watch it in action. I am really being a fan of what Craft by Invision LABS is bringing to the game that can really help designers boost up their productivity and efficiency into their work. Craft from InVision LABS has been a game changer in increasing productivity among designers. • JSON: Grab JSON values from sites like Spotify, Twitter, Facebook for up to date, true data inside designs. • Text: Forget Lorem ipsum. Craft’s first plugin is now bundled inside Data. Pull real, relevant textual content into designs. • Photos: The Photos tab within Data places consistent, contextual imagery into all layers of a design. Watch it in Action Download Now Download For more information: http://www.invisionapp.com/craft#styles

Redesigned UXPin

Redesigned UXPin

Karol Podlesny and Sebastian Witman shared a very interesting project on their Behance pages, it was the redesign of UXPin, a collaboration tool to manage the entire design process. It's not that often that we see the design process behind design tools, and because of that I thought it would be nice sharing with you all. About UXPin UXPin is a design platform that makes it easy to go from static design to fully animated prototypes - without any code. Everyone can comment directly on designs. Videos The UXPin Editor search feature from UXPin on Vimeo.   Detaching the Layers menu in UXPin from UXPin on Vimeo.     For more information check out the Behance project.