It’s about time you log into UXPin app, build a new prototype and discover all those changes we’ll be talking about it here. Join us for a new product update.

Take a look on our design technology for designing with UI coded components that are interactive by default. Discover UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

Mobile prototype QR code on Preview

A new convenient way of previewing a prototype is here. Share your mobile version of design using a QR code on preview. Open the UXPin Mirror app, scan a QR code on preview, and enjoy testing the design as if it were a final app.

Search comments by authors & assignees

Search for comments left by a specific author or assignee – it works for email domains, too. So if someone from @uxpin.com left you a bunch of comments, you can find them much quicker than before, with no additional scrolling. 

Search & replace color or fonts

Zoom into UXPin’s layers panel to discover a new search for specific fonts or colors within a page. You’ll get a list of matching components that you can then adjust or replace. 

Font Awesome Update

Font Awesome is one of the most popular icon libraries. We upgraded it to the newest version 6. 

Export selected pages

Instead of bulk export, select pages of your prototype that you want to save or send.

Blur the background of your prototype

Be it functional or aesthetic, gain full control over what should “pop” by applying background blur to elements. Provide a visual hierarchy to your design, take ownership of directing user’s attention, and use it to identify inactive or inaccessible elements.

Ready to revolutionize your design process?

All of the updates that we shared will make design work smoother for you, but they won’t tackle all design dilemmas like smooth design handoff or better process. For that, you need UXPin Merge. Discover what UXPin Merge is all about.

The post What is New at UXPin? We’re Back with Another Product Update appeared first on Studio by UXPin.

We’re reviving our series at UXPin’s blog to inform you about new features, updates, and upcoming product releases. In this one, you’ll read about new ways of adding and styling links, using eye-dropper, and editing components’ props.

🔍 Access specs for grouped elements

Aside from inspecting components one by one, you can now get the specs for borders, radius, and CSS of grouped elements, including the ones that were added with Auto Layout. 

🔗 Enjoy a greater control over linking

Add a clickable link on a specific word, a string of words, or even a whole paragraph within one text box. Select the text you want to add a URL to or link it to any other page within the prototype.

That’s not all! Style the hyperlink to match your design system. Make your prototype hyperrealistic from now on. Try it now.

👁️ Smoother Eye-Dropper

Enjoy a faster and more intuitive Eye-Dropper. When picking colors, you can select an Eye-Dropper once and adjust the colors. No need to be constantly reselecting it. That’s one less step in designing.

🔢 Merge: Set up decimal places in number props

Hey, for those of you who use Merge tech, for coded components with number props, such as grid (flex), you can now add numbers with decimal places to make your prototypes even more accurate.

Learn more about UXPin Merge.

🖱️ Merge: Embed JSX code into a chosen element 

Create advanced Merge components faster. Select a Merge component and pass its JSX code into the node property of another element. This works on UXPin’s canvas and in the library and it will come in handy when building prototypes.

🫣 Merge: Hide nested components

Nesting components? If you want to hide components that are nested together, do that without the need of ungrouping them or removing them entirely. Add toggle interaction to hide layers in nested components.

Give new updates a try in UXPin. Sign up for free and build an interactive prototype today.

The post The Latest UXPin Updates – Summer 2023 appeared first on Studio by UXPin.

Our Merge technology allows you to copy the ready JSX code of your UI code component. However, sometimes it’s hard to find the exact documentation for each component. See how you can do it quickly.

Design with React, Storybook or npm components that your devs build apps with in UXPin’s editor. Create prototypes that can quickly be translated to code and streamline product development process. Discover UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

Our solution to the challenge

Design systems can have very complex, detailed, or hard-to-navigate documentation, so we wanted to reduce your struggles and frustrations of finding it. 

So, we added a very simple but effective feature for doing just that. We’ve added a new JSDocs tag to our component commentating syntax that creates a link in the Merge Preview Spec panel.

It could be used to link out to usage, prop info, Storybook, or for those without any documentation, it could link to UXPin layout examples. Adding this feature not only saves time but also helps to centralize and integrate all your current processes and toolsets into one place.

How to add it

It couldn’t be easier to implement too, just add a JSDocs comment before your component like the below example:

/**
* @uxpindocurl https://mui.com/api/card-media/
 */
function CardMedia(props) {
return <CardMediaM controls {...props} />;
}

Design with code with Merge technology 

What’s different about a UXPin Merge prototype? You get to use interactive UI blocks that save you from redesigning the same things over and over again. As these blocks are coded components, developers can just copy the code straight from your design.

Using such components not only increases the level of interactivity you wouldn’t be able to reach in an image-based tool but also speeds up the prototyping process.

Designers and engineers have three options for connecting code components with UXPin Merge:

• Git repository—currently only supports React components
• Storybook—supports React, Vue, Angular, Ember, and many more
• npm–bring React components through npm

Read more about Merge.

Sync your Design System components with our design tool and enjoy all the perks! Request access now. 

The post UXPin Merge Changelog: Component Documentation URL Tag appeared first on Studio by UXPin.

There are many ways for product teams to achieve greater efficiency and consistency in the design handoff. 

At UXPin, we believe that smooth communication between designers and developers is one of the most important factors in setting up an efficient and scalable DesignOps process for your business. In the ideal world, both designers and devs should speak a common language when building digital products together.

With our new release of Storybook integration rooted in Merge technology, we believe we are getting one step closer to reaching this goal.

The challenge behind design consistency

Designing products with vector or pixel-based tools leads to endless inconsistencies during the design implementation. If you’ve heard it somewhere it’s because many design thought leaders like Nathan Gitter, or UXPin’s own founder, Marcin Treder have been echoing this statement for years.

The drift between design and the end product often boils down to one problem. The technology behind design tools to display the UI elements and what devs use to build the product for end-users is just completely different tech. What most designers do, is merely paint a picture with a visual representation of a digital product.

Think what would happen if instead of drawing text input with a rectangle and adding some text to it on a separate layer, designers could use a native input component where they could type something in. Or how about using an interactive component of a radio button that changes states, instead of drawing circles that mimic those buttons? 

Some design tools (like UXPin) give you the code-based components as your building blocks. They look and behave the same way both in the design editor and as an end-product. It doesn’t require you to know how to code – it just gives you some common vocabulary to work better with devs. Great, but why stop there?

As your company and product grow, you end up with different UI patterns, elements, and typography that are standardized by Design System and organized in your devs’ Git Repo – the ultimate source of all the shiny, finalized components that went through tons of revisions. All full of interactions and states.

Now imagine taking those code components from your devs repo and using them to build new parts of your product. Wouldn’t that just make sense?

The code components as a common language

Some time ago UXPin came up with a revolutionary technology called Merge. It does exactly what we’ve just described: it allows you to plug into any Git repo with UI components and bring them to the UXPin design editor. The outcome of this integration has blown us away.  Some of the biggest tech giants, like PayPal, adapted Merge technology and built the whole design process with its help.

PayPal measured that Merge sped up their design process over 6 times, and allowed them to remove product drift during the handoff to the absolute minimum. It really helped designers and devs speak one language. Whatever designer used in their prototype to build UI – the dev already had it in their repo as the same component.

As we kept talking with other companies, we realized how many of them face the same problems. That’s why we’ve decided to expand the Merge technology in two ways and bring more comprehensive design innovations to the market.

The first thing we have been working on is adding more frameworks to the existing Git integration. The second one was finding an alternative source of components developed by UI engineers. Something that would allow for a faster setup and supported a wider range of frameworks. The integration with Storybook seemed like a natural choice here.

What is Storybook

If you haven’t heard of Storybook, it’s about time. This great tool helps developers build UI components and pages in isolation. It simplifies testing and preparing on-point documentation. If devs or UI engineers want to turn a design Style Guide or a Design System into organized coded components, Storybook is a perfect place for that. 

Storybook shared a list of really great examples of design systems and component libraries that are open to the public. All were built in Storybook, some of them by companies like: Audi, Shopify (Polaris), IBM (Carbon), or Airbnb (with date components). And yes, you can bring any of those libraries to UXPin and use those components in your prototypes.

How the integration works 

Firstly, you need access to Merge technology in your UXPin account. If you haven’t requested it yet, you can do it here. 

Then, just copy the link of the Storybook that you want to use (e.g. Audi’s), go to the UXPin editor and add the new library by pasting the link in the “Import Storybook components” box.

Yes, it’s that simple! Now you can design with the exact same components right away and play with all interactions on Preview. 

If you want to get to know more about the integration, see our Docs. 

Benefits of the integration  

Build advanced UI fast

With Storybook integration, you can build high-fidelity prototypes fast just by dragging and dropping code components on the canvas. They are fully interactive and behave just like an end product. On top of that, you can still add UXPin’s interactions to glue different UI patterns together into a truly immersive experience for user testing and show your team how the product should look. The whole process is extremely fast. 

Besides speed, you also improve the design consistency. The Storybook components are in line with your production standards, so you don’t have to spend time matching the right colors, fonts, or rebuilding parts of the UI.

Manage only one library 

There’s no need to take care of the UXPin and Storybook libraries separately. The components are in sync all the time, so whenever your Story (Storybook component) is changed, your designs and library in UXPin get automatically updated. These are the same code-powered components as in the Storybook library, so whatever works there, will work in UXPin. 

Handoff revolution

All those back and forths between designers and developers cost time and money. By using a single source of truth, you can remove the silos and speed up your product development process. There’s no place for handoff drift with design or interaction inconsistencies. When the prototype is finished, the developer just needs to find the components that designers used, in their Storybook. That’s it! Developing a product where you already have the code for design is much faster and clearer.  

15 Frameworks 

UXPin’s integration supports all 15 frameworks that Storybook does, so it doesn’t matter whether you work with React, Vue, or Angular –  the library imported to UXPin will work just fine. 

Try UXPin + Storybook integration with your team

Build prototypes that behave like real products and cut down your product development process. Request access for our Storybook integration, integrate with your library in under 1 minute, and get ready to design with code!

The post UXPin and Storybook Integration is Here! appeared first on Studio by UXPin.

Introducing up to 20X faster Layers

We’ve rebuilt Layers making them up to 20X faster. Apart from being speedier, they also come with the context menu and the possibility to filter layers and setting a color for each layer. You can also expand Components like groups in the Layers panel, toggle visibility and lock each element. On top of that, we’ve added two new shortcuts for the sake of less clicking and faster workflow. You can collapse all groups at once with Alt Cmd L. And reverse the order of layers order with Alt Cmd R. This is especially useful when you want to change the order of inputs on your prototype and how they focus on pressing tab.

Smoothly zoom in from high-level

Apart from all the improvements that we have already described in our post about the Zoom, we have extended the zoom levels from 2% to 25600% for you to zoom in smoothly from high-level.

Also, the pixel grid is now a thing. It shows at zoom levels from 800% and up and allows you to get every pixel just right. When placing or moving objects, they will snap to the grid. This prevents misaligned pixel errors when exporting elements. Last but not least, with the new shortcut, finding a selected layer just got faster! You can now center to selected elements using the Shift 3 shortcut.

New shapes and an expandable menu

We’ve simplified the Quick Tools menu by rearranging elements and adding new ones to it. We’ve made it easier to work and find what you need faster with less clicking around. With all the frequently used Shapes in one place and ready-to-use components under Forms, using Quick Tools feel like a breeze. That also includes Libraries, such as Bootstrap and Foundation being moved to Design System Libraries under UXPin Libraries. Read more about our improved Quick Tools.

Power Duplicate

This is your new best friend if you’re looking to save time, and we call it Power Duplicate. Select an element and hold Alt. Then, drag the blue handle in any direction duplicating the selection as many times as you need. And the best news is that it works with data filling elements with refreshed content. Find out more in our Power Duplicate tutorial.

Happier snapping with overhauled guides

Smart guides and guides are one of those features that should be hardly noticeable as you design. That’s why we’ve totally overhauled their behavior. Smart guides are more visible and show when you move or resize elements with keyboard arrows. That way, it’s even easier to position elements exactly where you want. When it comes to guides, you can now check the distance from a selected element to a guide – just hold Alt and hover over that guide. Finally, guides now snap to elements and canvas edges.

What’s improved

• When you move elements, distance values now show in small pink rectangles perfectly centered between elements, making them more visible than before.
• You can now remove guides on both axes, x and y.
• The default icon is now the cog icon. Also, the icons section remembers the recently selected icon library.
• Selecting layers in the Layers panel with Shift pressed selects all layers in between.
• We simplified the look of the Typography section in the Properties Panel. Additional options are now available after you open More Options.

What’s fixed

Zoom

• Fixed a bug where you could see rulers when zooming in/out.
• Polygon looked weird when you changed the number of vertices at a higher zoom level.
• Guides created on a zoom level other than 100% displayed the wrong positions.

Canvas

• The Canvas would move to a random place when you zoomed out.
• The Canvas would disappear when you used the Fit All shortcut to see your entire design.

Components

• Pressing Delete in a button inside a Component broke the Component. When you pressed Space you could also see the cursor to jump and skip letters.
• Fixed a bug where you could drag and drop images while editing Component Instances.
• The breakpoints bar was visible when you edited the Master Component.

Properties Panel

• Clicking through the padding and radius inputs would crash the Properties Panel.
• You couldn’t use TAB to move to the height input after changing the value in the width input (with lock enabled).

States

• Nested states changed calculations – should result in 100% consistency in state changes between editor and preview.

Layers

• Ungrouping elements removed interaction indicators.

Iterations

• Moving a prototype between projects sometimes removed all iterations.

The post What’s New in August & September appeared first on Studio by UXPin.

Hello Components!

We’ve had a lot of requests for this one, in July we said so long to Symbols and welcomed Components. They are more intuitive and way more powerful! From now on, you can style every Instance individually the way you want by editing all their properties. Or, when editing the Master Component, you can update all Instances at once. Read more about Components in this post.

New text element

July was also the time for a major overhaul for our text! We replaced the old text element with the new one which has an array of new possibilities, such as the new auto size, vertical align, paragraph spacing and an improved auto line height. All typography lovers out there, this one’s for you: we’re very excited to say that you can now enable ligatures, fractions, as well as subscript and superscript!

Enhancements

• The possibility to edit the names of variables has been disabled, as it was breaking all previously created interactions that use this variable. However, we look forward to enabling this back in the future.
• We’ve unified the way you add elements from the Quick Tools menu. From now on, when you click on an icon or use the shortcut, you can either draw an element on the canvas to define its size or click to place it.
• The Edit Master and Break options are now available in the Properties panel after you select an Instance.
• Now, the names of Components update across the library, the Master Component and the preview in the Properties panel.
• The resize handles are now bigger. To make it even easier to resize, you can now grab any edge to resize an element.
• We removed auto numbering layer names of new elements.

Fixed

• Grid disappeared after switching between pages.
• Locked elements couldn’t be selected in the Spec mode.
• Various performance fixes and memory leaks removed.
• Sometimes, deleting interactions from a copied element was impossible.

The post Changelog: What’s New in July | UXPin appeared first on Studio by UXPin.

The Sketch import is here

The possibility to edit Sketch files in UXPin was definitely the most frequently requested feature of the last few months. And we proudly made it happen in June! With the new Sketch import, you can simply drag and drop your files right into UXPin and on any computer, with or without Sketch. Then, you just pick up where you left off and edit every single layer of your design. We like to compare it to “breathing new life into your designs, taking them from static artboards to beautifully interactive prototypes with ease”. See how it exactly works in our tutorial.

Product Tribes relaunch

Also in June, we relaunched Product Tribes – our growing Slack community of 10,000 designers, PMs, developers, tech writers and researchers from all around the world. That’s where they can share their experiences, exchange insights, give advice and discuss trending topics. If you haven’t already, join Product Tribes today and follow us on Twitter!

On Product Tribes, we also introduced our monthly Ask Me Anything (AMA) sessions with professionals from the field of UX. The very first one was with Ramses Cabello who is an Interaction Designer at Gan Integrity, and the second with Tanner Christensen, a Product Designer at Lyft. You can read both AMA transcripts on our Medium.

Fixed

• Values for position and size couldn’t be pasted with copy-and-paste shortcuts into their inputs in the Properties panel.
• Missing Variables in the previously created iterations.
• When added on canvas, elements weren’t visible in dropdown while the Interaction was still open.
• Elements would rotate incorrectly when switching between States.
• Properties of the base state would show in the Spec mode for all states within a symbol.
• Issues with downloading some SVG files from the Spec mode.
• The Comfortaa and Oswald fonts looked different in UXPin than in the Google fonts preview.
• Missing Font and Style in the Typography section for a single selected text element for custom proxy configuration.
• When a Symbol was pasted into another Symbol, its position on Preview wouldn’t match the position from the canvas.
• Issues with deleting elements that were inside a Symbol.

The post What’s New in June appeared first on Studio by UXPin.

Smart Grid

With Smart Grid, rearranging and adjusting the spacing between elements feels like a breeze. In the top right corner, you’ll see the Distribute on grid control – it spreads elements evenly apart. Then, adjust the spacing and arrangement in a selection with a drag. You’ll see that it also comes in handy when checking the distance between elements. For more read our tutorial.

Video and Sound

You can now use Video and Sound elements in your prototypes. Build the mood, enrich them with interactive videos, and use sound for better guidance. Speaking of sounds, as Google released sounds for Material Design, we’ve included them all in the Material Design library inside UXPin. See how to use videos and sounds.

UXPin Docs

We’ve given our knowledge base a fresh look, reworked the content and made it easier to navigate so that you can find answers to all your questions faster than before. We’re continually updating and expanding Docs with content and new articles so that it’s easier for everyone to master UXPin. Visit Docs.

User Flows Library

You can now quickly create rich, perfectly styled User Flows with ready-to-use components. It’s ideal for presentations as well as documentation, allowing you to tell the story of your prototype fast. Available in Design System Libraries.

Enhancements

• What’s New has been moved to Help in the bottom right panel of the Editor.
• We will try to match local fonts that are not installed on the computer with Google Fonts and replace them if available.
• With the release of Video and Audio elements, there are 4 new options to customize the player: Autoplay, Controls, Loop, and Mute. Also, there are 3 new interactions: Play, Pause, and Stop.
• You can now add shadows to Symbols.
• New Rename shortcut. Press Cmd/Ctrl + R for a selected element and change its name in the Top bar.

Fixed

• Numerous performance fixes and memory leaks removed.

The post What’s New in May appeared first on Studio by UXPin.

The latest iOS and Material Design

To speed up your workflow, from now on the latest interactive iOS and Material Design libraries are built right into UXPin as UXPin Libraries in Design System Libraries. They feature all common user interface controls such as buttons, navigation bars, input fields as well as colors, text styles, and icons. They’re both 100% complainant and in line with specifications by Apple’s Human Interface and Google’s Material Design Standards, fully editable for you to adjust them easily to your needs and work insanely fast..

Collaboration and list view in Design System Libraries

Since designing is all about collaboration, from now on adding and updating elements happens automatically, as well as managing libraries and changing permissions across them when working with other designers. Also, you can switch between the grid and the new list view if you want longer element names to be fully displayed.

Ready-to-use UXPin Documents

In UXPin, you can do much more than prototype! We’ve just given our UXPin Documents editor a facelift. Check it out for templates, such as Persona, Project Canvas or Business Model Canvas and use them in your next project.

Introducing UXPin Community on Spectrum

Just recently, we broke the news about our presence on Spectrum. UXPin Community is the long-awaited place where you can talk to our team, exchange tips to hone your UXPin skills, share your thoughts and make feature requests. On top of that, our customer support, product, and development teams are there to answer your questions. If you haven’t already, join us now!

Power tips

They’re here! You can now quickly check our Power Tips when working in the Editor. You’ll find them in the video tutorials panel in the bottom right corner. The list of tips is already getting longer!

Enhancements

• All-new keyboard shortcuts for aligning elements.
• Aligning elements to right or bottom with auto canvas size aligns them to the edge of the canvas, not to the bottom-most or right-most element.
• We’ve updated the Libraries list by removing the outdated ones.

Fixed

• Various fixes that reduce the UXPin Editor memory usage.

The post What’s New in April appeared first on Studio by UXPin.

API Request

When you open UXPin and go to Interactions, you’ll see a new type of action — API Request. It allows your prototypes to communicate with devices in ways one could only imagine.

For example, you can use it with smart home devices, such as color-changing smart lights. You can save data from a prototype to a spreadsheet or even communicate with a car. Trust us; we’ve had fun testing it ourselves!

Performance improvements

When it comes to performance, scrolling and zooming work faster in the Editor. We have significantly shortened the loading time for interactions between states. On top of that, dragging and dropping parts of symbols got a lot faster.

Enhancements

• Names of colors from the Design System show in Spec Mode.
• You can set symbols back to their original size in the context menu and reset it in the desktop app’s Object menu.
• We completely removed the Clone action for Symbols, as it hasn’t been frequently used and turned out to be slightly confusing. To clone a symbol, copy it and click Detach.
• Smart guides and snapping enabled only for elements in the viewport, and they no longer appear when irrelevant.
• We moved the shortcut cheat sheet to the right-hand panel and improved it in terms of naming and grouping.

Fixed

• Dragging and dropping an element inside more complex symbols would misplace them by 1-2 pixels.

The post What’s New in March appeared first on Studio by UXPin.

UXPin Merge closed beta

Last week, we bid adieu to the UXPin Merge alpha and moved on to the closed UXPin Merge beta! As we’re getting for the release, we’re testing Merge with some great companies — so if you’re up to it, join now! Invite your team to import, keep in sync and use your coded React.js components in UXPin to see your designs the way your users will.

A design tool that can access *production* React.js code and import *interactive* components? 🤯

Done. 👋 upcoming @uxpin Merge 🔥.

/Gif shows import of Material UI with theme editing./ pic.twitter.com/IuYUxrkAWU

— Marcin Treder (@marcintreder) January 16, 2019

New

You can now set corner radius and image fill to Pen tool shapes.

We’ve also listened to your feedback and here it is — you can now unpin design system libraries and the layers panel from the left side of the UXPin Editor, position them anywhere on the screen or pin to its right side. It’s also possible to change the width and height of panels by dragging one of their corners.

You can now customize the UXPin editor’s #UI and unpin #designsystems libraries and layers! Place them anywhere or pin to either side. Try it yourself: https://t.co/83MvhZhttv #designtool pic.twitter.com/Dga3j0Hi9Z

— UXPin (@uxpin) March 7, 2019

Enhancements

• Selecting elements on the canvas scrolls the Layers panel to the top element in the panel.
• Visual improvements in the Typography section.
• Panning (space + drag) the canvas and switching between pages in large projects work better.
• Element position and size update automatically in the Properties panel.
• More noticeable information that you’re working offline.
• Image fills for elements such as rectangle, oval, button, input, and text area now load faster on Preview.

Fixed

• White screen on the dashboard when logging into another account in a different browser tab.
• The issue with using pictures from Unsplash in States.
• The possibility to change corner radius for the circle if selected with a group of elements.
• Switching States in nested Symbols moved the element down on the canvas.
• Editing a batch of text elements was impossible after setting a property in the typography section
• The issue with displaying elements in a fixed position on Preview [Firefox].
• The issue with sorting interactions added inside a symbol that targets an element outside the symbol.
• Layers panel scrolled unnecessarily after clicking on the state switcher.

The post Changelog: What’s New in February | UXPin appeared first on Studio by UXPin.

UXPin Mirror

Long-awaited, highly anticipated and finally released in January! This month brought to us the Mirror app that makes it a breeze to view designs on mobile devices in real time, both iOS and Android. Simply scan the QR code in the Editor, and that’s it! There is no need to connect via USB or use Wi-Fi. Any changes you make in the prototype will show on the device automatically. Get it on the App Store or Google Play.

Local fonts

What’s also massive this month are Local Fonts. When you open UXPin, you will notice that apart from online libraries like Google Fonts or Adobe Fonts, every font installed on your computer is now available and ready for use in the desktop app. More about local fonts.

Brand new video tutorials

Another distinguishable update to UXPin are video tutorials available to watch right inside the Editor. You’ll find them in the right corner of the bottom bar. No more switching between the tool and the browser window to get the hang of UXPin and our most important features. We believe that this will add tremendous value to a better day-to-day learning experience. Of course, all tutorials are also available on our YouTube. Happy binge-watching!

Scrubbing values

You can now scrub values by dragging labels in the Properties Panel. Hover over a label with a numeric value input and drag the cursor right and left to increase or decrease that value. Alternatively, in case there is no label, just click through the input and press Cmd/Ctrl. And if you drag with Shift, the value changes by 10px. On top of this, the cursor goes beyond the screen even if it reaches its end (desktop app and Google Chrome).

Enhancements

• All the recently used fonts appear at the top of the font section dropdown to speed up the workflow.

• Improvements in positioning elements in nested States.

• Different types of elements were placed in a different way on the canvas – some in the top left corner, some in the middle of it. From now on, all the elements land in the middle of the viewport.

• The Mac OS X Traffic Lights are back inside the app’s UI in the desktop app.

Fixed

• Changing the name of the prototype while offline is blocked.

• When trying to open a project while being logged into different account , the editor kept reloading with a spinner endlessly. Now users are taken to the dashboard.

• Long names of projects not displaying entirely in the dashboard list view.

• Scrolling through all interactions for cases with many interactions in the Copy Interaction section.

• Every once in a while, adding a new line in a text element didn’t update the canvas size on the preview properly.

• Moving multistate elements around in the dark theme caused both the background and font turn white.

• Copying a part of code and pasting it into the code block section in the Design System separated each line into its own block, instead of keeping it together.

• Occasional blank screen issues in the desktop app.

The post What’s New in January appeared first on Studio by UXPin.

Editor and Preview

• [New] Asymmetric and disjointed curve types for pen tool.   
• [New] Possibility to switch elements height/width from the properties panel. 
• [New] Possibility to flip elements horizontally/vertically. 
• [New] Possibility to loop interactions.
• [Improved] Updated icons for common elements on the layers list.
• [Improved] Improved performance when dragging layers on the layers list.
• [Improved] Elements added with shortcuts are placed so that their top left corner matches the cursor position.
• [Improved] Moved distribute controls to alignment sections.
• [Improved] Moved front/back controls to the top bar.
• [Improved] More coherent shadows for all elements.

Desktop App 1.1.2

• [New] More actions in the top bar menu.
• Small bug fixes and visual improvements.

If you’re interested what we released in June, please check out Changelog 2018 #9.

The post UXPin Changelog July 2018 #10 appeared first on Studio by UXPin.

Editor and Preview

• [New] Redesigned properties panel split into separate styling sections.
• [New] Context top bar menu – allows to group and ungroup the  elements, turn them into symbols and open the interactions panel quickly. 
• [New] Blending modes – allow to determine how two layers are interacting with each other.
• [New] Spread support for shadows – helps control shadow contour.
• [New]  Shortcuts for elements distribution: vertical (cmd/ctrl+alt+Y) and horizontal(cmd/ctrl+alt+X).
• [Improved] Show/hide elements is now available in the layers section in properties panel. 
• [Improved] Improved way of managing elements in layers depending if you click or double-click on the element.
• [Improved] Dragging with cmd/ctrl pressed selects only elements entirely in selection bounds.
• [Improved] Disable snapping with a key (cmd) modificator.
• [Improved] Reorganised and shrank right-click menu in the Editor.
• [Improved] Zoom control has been moved back to the top bar.
• [Improved] Locked elements are selectable from the layers panel only.

Pen tool improvements

• [New] Added 10 different types of endpoints for a path to create different arrows.
• [New] Set the shape of ends and joins for any path.
• [New] Set dashed line – allows to decide whether a path should be solid, dashed or dotted with precise control of each dash and gap length.
• [New] Added start/stop options for stroke.
• [New] Set the position of each path node directly from properties panel.

Design Systems

• [Improved] Select the whole image and then delete it with backspace
• Small bug fixes and visual improvements.

If you’re interested what we released in May, please check out Changelog 2018 #8.

The post UXPin Changelog June 2018 #9 appeared first on Studio by UXPin.

Editor and Preview

• [New] Line element.
• [new] Pen Tool – drag with Shift locks x/y axis. 
• [new] Pen Tool – pressing Shift adds a node in the middle of the path. 
• [new] Pen Tool – double-clicking on nodes creates a circle. 
• [new] Set element rotation to any angle (including negative and > 360° values).  
• [new] Possibility to group a single element and a single group to organize all layers types
• [fixed] Pasting elements multiple times using shortcuts wasn’t working.
• [fixed] Symbols were refreshed on Preview inconsistently.
• [fixed] Incorrect position of the element pasted inside a symbol.

Design Systems

• [new] Support for emojis in DS documentation.
• [fixed] Design System tile on Dashboard wasn’t refreshed after updating colors.
• [fixed] JSON wasn’t generated for some Design Systems.

Desktop App v1.1

• [new] Option to copy a Preview link from the top bar menu (Windows/Copy Link to Preview).
• [new] Manage application windows from the dock/taskbar.
• [new] More options added to the top bar menu.
• [new] Options in the top bar menu are displayed depending on the area of UXPin (Editor/Preview/Dashboard/Design Systems).
• [new] Minimal initial size of the window based on the screen resolution.
• Other bug fixes and small visual improvements.

If you’re interested what we released in April, please check out Changelog 2018 #7.

The post UXPin Changelog May 2018 #8 appeared first on Studio by UXPin.

1. Shadows

You can easily add shadows to the elements and customize their color, opacity, and relative position. It’s possible to combine multiple shadows together or create only inner ones. This heavily requested feature is available to all users.

2. Pen Tool

Use Pen Tool to draw shapes and icons directly in UXPin. Any drawn element can be viewed in spec mode and downloaded as an SVG. Creating custom icons and adding them to your design library has never been easier!

3. Tokens for Design Systems

Imagine this: your developers can have access to rich information with just one URL, opening possibilities for ultimate design consistency.

Now you can easily export your color and typography styles, as well as their full documentation, to JSON. For quicker exporting, you can use other popular formats including YAML, CSS, SCSS, LESS, and STYLUS, but without documentation.

4. Copy-pasting styles and interactions

Say no to tediously re-making interactions. You can now copy-paste them to elements with just a few clicks! You can also quickly apply entire styles (including color and typography) from one element to another, saving you so much time.

5. New pricing

We are excited to share that we now offer four different plans (starting from $9/month) with a variety of features tailored to your needs. Whether you’re working on a small project or with a complex design systems, we’re confident you’ll find the right fit among our new plans.

6. Resizing panels and UI redesign

Our UI has seen numerous iterations, but after our latest redesign we’re really proud of it. Not only is it slicker and more intuitive, but also it freed up a lot of screen space. We’ve also given you the freedom of customization — it’s possible to resize panels and toggle UI theme from light to dark. Great for contrasting your prototypes!

7. Performance updates

2017 was a year of constant performance improvements. Team dove into javascript and made dozens of micro-optimisations. Overall, we’ve decreased loading times by 30%, preview has become significantly stable, and complex design systems are scrolling smoothly. 2018 is no different and further upgrades are planned and scheduled.

8. In-app changelog

It was easy to lose track of our constant updates. Not a week passed without a deploy that addressed requests we heard or fulfilled our roadmap. With our in-app changelog, you will be notified every time an important feature or update is released.

9. Pasting from clipboard

The ability to paste an image directly from your clipboard into UXPin allows you to save precious time and makes prototyping even faster. Copy the image, paste it to UXPin, add interactions, send it to a client — a mockup is born!

10. Math operations

You can use basic math operations to determine the size or position of your elements. It’s also excellent when calculating proportions on the fly.

One more thing…

Last but not least, we’ve just launched our brand new desktop application. It has all the tools from the original browser version, in addition to some added improvements. Because it’s right on your desktop it’s always at hand — just one click away from your Dock or Taskbar. Having dedicated processes makes it faster and more reliable as well as uninterrupted from plugins and browser distractions.

You can get the latest versions here: MacOS, Windows.

The post 10 UXPin Product Updates You Might Have Missed appeared first on Studio by UXPin.

Desktop App

That month marked the release of our brand new desktop application that has all the tools you know and love from the original browser version. Download here for Mac or Windows.

Editor

• [Fixed] Shadows for symbols not saving in the Design System Library.
• [Fixed] Removed shadow and blur options for the hotspot element.
• [Fixed] Editor freezing while using history (undo/redo) with Pen Tool.

Design Systems

• [Fixed] Issues with selecting hex value from a Design System to copy it.

Sketch Plugin

• [New] Support for masks created in Sketch (version 4.11.1).
• [Fixed] Design System Library was not opening in some cases (version 4.11.2).
• [Fixed] Plugin crashing without warning when users checked exportable options on some groups (version 4.11.3).

10 UXPin Updates You Might Have Missed

In case you missed it, we want to show you 10 UXPin updates we’ve released recently.

The post UXPin Changelog May 2018 #7 appeared first on Studio by UXPin.

Design Systems

• [New] Restrict access to Design Systems only to your team in UXPin. 
• [New] Export Design Systems with documentation in JSON format.
• [New] Export tokens in YAML, CSS, SCSS, LESS, and STYLUS formats. 
• [Improvement] Create symbols with CMD + K shortcut (Alt+S also works).
• [Fixed] Losing connection between symbols when pasting a symbol into a different project.

Editor

• [New] Create any shape you want using Pen Tool. 
• [New] Resize left panel, and its content will adjust accordingly.
• [New] In-app changelog also available in the Editor.
• [Improvement] Click on the changelog orange dot to get the “What’s new?”modal immediately.
• [Fixed] Canvas was jumping after entering symbols or multistates edit mode.
• [Fixed] Unwanted transparency after fill color was changed for a SVG element.
• [Fixed] Stroke width was not copied correctly.

If you’re interested what we released in March, please check out Changelog 2018 #5.

The post UXPin Changelog April 2018 #6 appeared first on Studio by UXPin.

Design Systems

• [Improvement] Handling local and master symbols’ relations while using undo/redo.
• [Improvement] Changes in nested symbols are synced across all parent symbols when pushed to the library.
• [Improvement] Removing symbol when all elements inside were deleted.
• [Improvement] Symbols keep connection to the Design System Library after duplicating the prototype.

Sketch plugin 4.11

• [New] Exporting shapes as SVGs.
• [New] Design System Library redesign.
• [New] Exporting opacity as property which can be changed in the UXPin Editor.
• [Fixed] Upon exporting from Sketch, additional export sizes are no longer added.  
• [Fixed] Plugin supports the newest version of Sketch app (version 49).

Visual changes in the Editor

• Added the Hamburger menu in the top left corner.
• Moved Preview mode to the right (marked with Play icon).
• Moved Zoom settings to the bottom left corner.
• Added prototype name and active page.
• Bottom left corner menu (Log out, Integrations, Shortcuts, Help&Tutorial, Add user) moved to the Hamburger menu in the top left.
• Moved View options to the Hamburger menu.
• Added Simple/Advanced mode to the View Options modal.
• Redesigned tabs in the properties panel (Properties, Interactions, Specification).

Dashboard

• [New] Creating iteration from iteration.
• [New] In-app changelog notification with information about fixes or new features.

If you’re interested what we released in February, please check out Changelog 2018 #3 and Changelog 2018 #4.

The post UXPin Changelog March 2018 #5 appeared first on Studio by UXPin.

Design Systems

• Redesigned Design System Libraries panel in UXPin Editor 
• Notification about outdated symbol appears only when there’s a newer version in the Design System Library.
• Any updates to symbols in Design System Library will be visible immediately for all users in the account.
• Improved undo/redo for symbols based on their content.
• Small bug fixes and visual improvements.

Editor

• Possibility to copy and paste styles across elements 
• Elements and icons are separated in the search results 
• Layer dragged to the group lands at the top of the list instead of the bottom.
• Extended areas for dragging and dropping layers.

If you’re interested what we’ve released inFebruary, please check out Changelog 2018 #3.

The post UXPin Changelog February 2018 #4 appeared first on Studio by UXPin.