We are very close to the end of the year and the mighty team from InVision are still sharing a preview of what is coming for 2018. The new year could be easily one of their biggest years to date, we are quite excited for them. We can't wait to get our hands on their latest so we can share our feedback with you guys. Today we are introducing a sneak peek the new InVision, please take some time to watch the video. It comes with new features like up to 8x faster, new design, introducing spaces, powerful sharing and more. Give it a look! In their words Over the last two years, our product and engineering teams have been working tirelessly to essentially rebuild InVision from scratch. The new InVision—codename: V7—runs on an entirely new code base, is remarkably fast, and redefines collaboration across teams and stakeholders. It also comes with a whole new look. V7 was built to address what we recognized as an evolving trend in the world of Digital Product Design—namely, that the volume of new products being created is scaling along with the diversity of the teams building them. Design has evolved into a cross-functional discipline that touches everyone from engineering to marketing to the executive suite. Given this, our highest priority with V7 was to support this scale through performance, responsiveness, and accessibility for a wider variety of individuals than ever before. Up to 8x faster: V7’s entirely new architecture ensures lightning-fast responsiveness and reliability at scale. New unified design: V7 introduces a new universal design system to deliver a unified, consistent user experience throughout the platform. Introducing Spaces: Spaces make it possible to organize all of your project-related documents into one space. This includes Prototypes, Boards, and Freehands, as well as documents from other critical tools your organization relies on. Powerful sharing: We’ve taken sharing to the next level with the flexibility to distinguish roles and customize access across your projects. Built for what’s next: V7 lays the foundation for the future of our platform, including tightly coupled integrations with Design Systems Manager and Studio. More Links Request your Early Access Follow InVision on YouTube The new InVision is coming in 2018, and we can’t wait for you to get your hands on it. Watch the Sneak Peek
Let me start by saying that the awesome folks from InVision are literally on fire lately. In a very good way, they are bringing their tool with more features and changing our way of working in this beautiful industry. Last week, we've featured their latest InVision Studio and now they are back and introducing InVision Design Manager. What is it? It's basically one place where you can manage all UI/UX components with versions, access from both Sketch and InVision Studio, keep code in Sync and a lot more. Let's take a dive! In their words Most design systems today are homegrown, leveraging a mix of tools and platforms to manage—this makes them difficult to scale and maintain, especially at the enterprise level. There’s clearly room for innovation and growth in this space. A leading platform for managing design systems, Brand.ai is one of the most widely used tools for in-house design systems management. Thousands of teams and leading Fortune 500 companies, including Verizon and Zendesk, use Brand.ai to create, maintain, and evolve their team’s design systems. Combining the best capabilities of the Brand.ai product with the power of the InVision platform, we’ve built InVision Design System Manager (DSM). Video Create a single source of truth: One place to manage all brand and UX components, so teams can stay in sync Design with ease: Access libraries directly from Sketch or InVision Studio to push and pull changes—from assets to deeply nested symbols—all with a click Iterate with confidence: Changes sync to the whole team, and designers can switch to the latest version or roll back changes at any time Manage updates collaboratively: Roles and permissions provide complete control over who can view or edit each library within the system Share with external teams: An automatically generated and customizable web portal lets any stakeholder preview and use design, documentation, and code Keep code in sync: No more manual updates or time wasted tracking down updated specs—developers can use the DSM API to integrate directly into live code Protect confidential information: Enterprise-ready features like SSO, Private Cloud, and more protect your company’s most strategic assets More Links Request your Early Access Follow InVision on YouTube InVision’s DSM isn’t just about smoothing out someone’s workflow, it’s about enabling their voice and allowing them to play a more active role in the process of designing as a team. A good design system should empower designers instead of restricting them, and this tool absolutely furthers that goal.” —Dan Ross, UX Designer, Shopify Preview Gallery
On a very quiet Wednesday, the awesome folks from InVision took the whole design community by the storm by announcing their latest game-changing screen design tool. Introducing Studio, a desktop app where you will be able to design responsive apps, sites from the start to finish. I am talking from screen design, prototyping, advanced animation and a lot more. Imagine having everything in one place where you can also collaborate, handoff and create a design system. We are pretty stoked about this over at Abduzeedo, we can't wait for its release in January. Request your early access! In their words With Studio, InVision has developed an end-to-end platform for designing digital experiences. Traditionally, teams have had to cobble their workflow together across a number of disparate tools, many of which were built for earlier generations of graphic and print design. This fragmented workflow slows teams down and prevents them from doing their best work. Video Studio starts where the previous generation of screen design tools left off, then adds powerful new dimensions to support today’s modern digital product design workflows in a seamlessly integrated environment: • Advanced animation: Rapid prototyping and advanced animation turn static screens into live product experiences without requiring a single line of code. • Responsive design: Studio’s adaptive layout engine enables design across a variety of different devices and orientations, automatically. • Shared design systems: Shared component libraries are built right into InVision Studio, guaranteeing design teams stay consistent, connected and up to date. • Connected collaboration: Studio connects seamlessly to InVision’s cloud-based collaboration platform, making it easy to gather feedback and engage stakeholders. • Extensive app ecosystem: Studio is an open platform allowing users to extend the product experience through an ecosystem of apps and add-ons. More Links Request your Early Access Follow InVision on YouTube Since 2011, we’ve been on a mission to help every organization in the world create the digital experiences that shape our lives. The launch of Studio brings us another large step closer to fulfilling that mission, giving our users a complete set of connected tools that drive the digital product design process from start to finish,” said InVision CEO and Co-Founder Clark Valberg. “Every last detail of Studio is the deliberate result of deep insight into how the best digital product teams make the products we love the most. Our goal with this product, and as a company, is to deliver the operating system for building remarkable experiences. Preview Gallery
We would like to share exciting news from our friends over Figma where they are introducing their newly 2.0 packed with features including Prototyping and Developer Handoff. This is pretty huge! I can't wait to give it a try myself and maybe share my thoughts on ABDZ. Meanwhile, let's take a look at what they offer with real-time collaboration, the end of versioning and more. In their words But as we talked to more of our users, we realized we couldn’t ignore prototyping forever. Designers were desperate for a solution that would let them create and present in the same place, with one single source of truth. Since we’re the only interface design tool that runs on the web, we’re uniquely suited to meet that demand. In Figma, the prototype is a living document rather than a dead artifact. Prototyping • You can tweak frames or add screens in real time while others watch. We’re already finding this hugely helpful in design critiques at Figma. • No need for endless versioning…or the crazy naming conventions that other tools require to order your artboards (good-bye artboard 1, artboard a1, artboard a1b, artboard a1bcdefgahhhhhfuckthis). • My new fav: You can navigate presentations from your phone. Any designers who dream of strolling the conference room like you’re giving a TED talk, this is your moment. • You can use components (symbols) with hot spots, so when you set a navigation from a component once, it will populate through all instances, as seen in the gif below (the component is the top left X button) Prototyping (Video) Developer Handoff • Developers can select an object and hover over another object to see redlines that measure the spacing between them • They can pull CSS, iOS and Android data with view-only access • We’ve segmented the data as: (1) Table view, which breaks out attributes so they’re easier to skim (2) Generated markup/code Developer Handoff (Video) We’re excited to offer an all in one tool to help teams work better together. That said, we know that designers and tech companies have a wide variety of workflows and requirements. Get Started now with Figma.
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
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/
It's amazing to see that today there are plenty of interface design tools for designers. In the past we were limited to Adobe, my favorite tool used to be Fireworks. Thanks to them, when they killed it a lot of people saw the opportunity to build not only a tool to replace it but a much better tool. Figma is a great example. The idea is to be the Google Docs for designers. It's a vector tool that runs in the browser and allows for incredible collaboration. I've been playing with it at home and I am quite impressed about how powerful it is. The first interface design tool with real-time collaboration. Figma keeps everyone on the same page. Focus on the work instead of fighting your tools. Simultaneous Editing from Figma, Inc. on Vimeo. One of the coolest features of Figma has to be the real-time collaboration. I always wanted something like that, especially for feedback. It saves so much time than trying to explain the changes I'd like to see. Another impressive achievement is how smooth and fast the app is. It runs on the browser. I wish Abduzeedo was this fast. Here's a great video showing Ryan Putman using Figma to create icons Some other features that are worth mentioning: Constraints: Designs automatically adapt to different screen sizes with Versioning: Work is constantly saved with Version History, and all edits can be accessed in one click. Live Device Preview: see your changes mirrored to your mobile device in real time. Now the best thing is that Figma is free till January. So check it out and let us know what you think: https://www.figma.com/
I have been an Adobe user since I can remember, adopting the new tools always coming and going. Macromedia back in the day tried to challenge Adobe's supremacy and ended up being acquired by them. Now there's a new tool in the market that I have fallen in love with and that app is called Sketch. I have been using Sketch for over a year, at work at Google and for personal projects and I simply love it. Sketch is a vector tool that does an impeccable job of combining the best of all worlds when it comes to designing mobile apps and web sites. You must check it out. The new version os Sketch brings some very important new features. The most important I believe is the possibility of creating symbols. Below we list some of the features: Precision: Vectors mean scalability. Sketch's Vector shapes easily adapt to changing styles, sizes and layouts, allowing you to avoid a lot of painful hand-tweaking. Objects: In Sketch, every shape you create is an item in the Layers List. No more hidden paths. Snap to Pixel: Sketch rounds a shape or layer to its nearest pixel edge. No more half pixels, dirty shapes and alpha-blended messes Pixel Zoom: See everything in the fullest detail, or turn on Pixel View to inspect the resulting pixels. It’s the best of both worlds. Beautiful Text: Sketch’s perfect native text rendering shows your text exactly as it will appear in your app or on your website. Symbols: Symbols are groups of elements you can copy and paste throughout your documents. Change one, and all of them will change automatically. iOS Mirror With Sketch Mirror, you can preview your designs on your iOS devices while you work on them, making it the perfect companion for Sketch. Giveway We have 5 Sketch licenses to giveaway. To participate just leave a comment and tweet this post. We will announce the winners next week. Winners Thank you so much for participating in this giveaway, we were blown away by the amount of comments. So here are the winners: @uncleserb @Walkyriewolf @ksbckr @MacrossX7 @brainra For more information, learn more about Sketch and download the trial version visit http://bohemiancoding.com/sketch/