Articles

Wireframe Article

No. It's not just a "figma" of your imagination. 
<a href="https://www.figma.com/blog/a-new-collaboration-with-adobe/" target="_blank">Adobe has agreed to spend $20 billion</a> – that's billion, with a "b" – to buy <a href="https://www.figma.com/" target="_blank">Figma</a>, the popular web-based collaboration and UI design platform. 
We'll give you a minute to pick your jaw up off the ground. 
Adobe said it expects the transaction to close sometime in 2023. That said, the deal has not yet been approved by Figma stockholders and must proceed through customary closing. The dollars are a mix: about half the total will be paid in Adobe stock, with the balance paid in cash. 
If you're not familiar with Figma, you will be now – but it's worth noting how awesome a platform it really is. It offers a deep set of collaboration options for joint software development, as well as its popular FigJam collaborative whiteboarding environment. If you haven't used that wipeboarding feature before, we highly recommend it. 
By now, we’re accustomed to Adobe spending big bucks to expand its copious monolith. These tasty acquisitions have bolstered its stronghold on the digital experience category – and while there may not be an Iron Throne to claim, it has certainly earned the crown as the King of the <a href="https://www.gartner.com/en/documents/3995917" target="_blank">Gartner Magic Quadrant for DXPs</a>.
But forget all that. Forget the fact that <a href="https://www.computerworld.com/article/3673934/adobes-20b-figma-acquisition-highlights-web-based-collaboration-trends.html#:~:text=The%20%2420%20billion%20figure%20is,a%20dedicated%20following%20among%20developers." target="_blank">Figma was valued at around $10 billion</a> at its last funding round in 2021 (meaning this purchase doubled the bounty). And let's not overlook that the market has been in a bout of turmoil lately, especially for tech stocks.
No – what's been really interesting is how this acquisition triggered such an emotional response from the market. Despite Adobe's enthusiasm about the deal, the Figma fanbase seemed a little less enthusiastic…
<img style="max-width:800px" src="https://cmscritic.com/ms-content/uploads/2022/09/luke-skywalker-meme-no.jpg" alt="Luke Skywalker meme" />
And just like that, the Empire Strikes Back.
<h2>Why Figma? And why the pushback from fans?</h2>
The Figma acquisition speaks volumes about the growth of web collaboration software and the central role of design. But for its users, Figma represented everything Adobe wasn’t. In fact, Figma was a sort of the anti-Adobe. 
The fanbase has reason to be concerned: Adobe could bring Figma aboard the mothership under its expensive subscription model. There could be some poor integration or uncomfortable bloat. Even worse, it could become the kind of bolted-on utility that's prone to crashing – kind of like the Millennium Falcon with a broken hyperdrive.
Or, Adobe could do wonders with this amazing platform, building deeper functionality that expands the frontier for web-based collaboration within its toolsets. Figma's flexibility could be a game changer for the company and removes one of its digital experience rivals from the chessboard. 
One thing both companies have in common is the commitment to design. Founded by Dylan Field in 2016, Figma has held to the mantra that design should be collaborative, web-based, and real-time – with the mission to “open up” and move from the solitary design process. Figma has crystallized the concepts of sharing ideas and working collaboratively, something that Adobe’s UI design products like Photoshop have struggled to embrace. 
As for the fans, that's a product of Figma's heavy emphasis on community, which they have nurtured and grown over the years. This was likely a big driver of <a href="https://www.crunchbase.com/organization/figma/company_financials" target="_blank">Figma’s unicorn valuation</a>, which skyrocketed from <a href="https://www.bloomberg.com/news/articles/2021-06-24/software-design-startup-figma-is-now-worth-10-billion" target="_blank">$2 billion to $10 billion</a> in just a year. With more than 4 million users, including giants such as Microsoft, Slack, Google, Dropbox, and Twitter, the company has achieved the kind of presence and loyalty that are the envy of the tech world.
 
<img src="https://cmscritic.com/ms-content/uploads/2022/09/nothing-great-is-made-alone.jpg" alt="Figma - Nothing Great is Made Alone" />
<h2> </h2>
<h2>Adobe XD vs. Figma</h2>
So let's get down to brass tacks: Adobe XD and Figma are currently the most popular design tools on the market, both with similar features. For the past 5 years, Figma has been the biggest rival and competitor to Adobe XD, but Figma has managed to with the hearts of the design community. 
Figma believes the acquisition will help the Figma platform benefit from Adobe’s technology, expertise, and resources in the creative space. Figma has big ambitions for its products, with plans to improve its <a href="https://www.figma.com/design/" target="_blank">Figma Design</a>, <a href="https://www.figma.com/figjam/" target="_blank">FigJam</a>, and the <a href="https://www.figma.com/community/" target="_blank">Figma community</a> platforms while expanding into new areas.
“We will have the opportunity to incorporate their expertise in imaging, photography, illustration, video, 3D, and font technology to the Figma platform," said <a href="https://twitter.com/zoink" target="_blank">Dylan Field</a>, Co-founder &amp; CEO of Figma. "Additionally, we will have the opportunity to reimagine what the best creative tools could look like within the Figma technology stack.”
Top-down leadership is key in these kinds of earth-shattering transitions. Taking designers’ concerns into account, Field reassured the Figma community that he will remain CEO and that Figma will keep operating autonomously – without compromising its culture, the way it runs its business, and (perhaps most importantly) its pricing. 
<h2>Growth by Acquisition</h2>
The news from Adobe is huge – but maybe not that surprising. Adobe has been driving growth by investing in tools and products to execute complex workflows across teams. As part of this evolution, it <a href="https://news.adobe.com/news/news-details/2020/Adobe-to-Acquire-Workfront/default.aspx" target="_blank">acquired Workflow</a> – a leading work management platform for marketers – for $1.50 billion in 2020. Last year, <a href="https://www.cmscritic.com/adobe-acquires-video-collaboration-platform-frame-io/" target="_blank">Adobe also acquired Frame.io</a>, an industry-leading collaboration platform, for $1.275 billion. 
In its <a href="https://news.adobe.com/news/news-details/2022/Adobe-to-Acquire-Figma/default.aspx" target="_blank">press release</a>, Adobe stated that Figma’s web-based, multi-player capabilities will accelerate the delivery of Adobe’s Creative Cloud technologies on the web, making the creative process more productive and accessible to more people.
With this acquisition, Adobe once more solidified its position in the creative industry. With responsive design taking over about a decade ago, other apps such as <a href="https://www.omnigroup.com/omnigraffle/" target="_blank">Omnigraffle</a> and later <a href="https://www.sketch.com/" target="_blank">Sketch App</a> were born – and embraced by designers by offering a better solution for creating wireframes and high-fidelity prototypes suited for the responsive web. This was a huge departure from Photoshop and Illustrator and their respectively rigid structures. 
Figma is not alone in the web-based collaboration and UI design space. Platforms like <a href="https://www.cmscritic.com/uxpin-merge-review-sync-react-components-with-prototypes/">UXPin</a>, another subscription-based wireframing and prototyping tool, are effectively <a href="https://www.cmscritic.com/uxpin-merge-review-sync-react-components-with-prototypes/" target="_blank">bridging the gap between designers and developers</a>. 
As Figma zeroes in on $400 million in revenues at the end of 2022, it's safe to say that there's ample potential in this growing market space – and we'll have to see how Adobe's mindboggling acquisition brings imagination to life. 
<h2>About Figma</h2>
Figma is the open design company founded in 2012 by Dylan Field and Evan Wallace. With Figma’s cloud-based screen design tool, teams achieve a shared understanding around design without worrying about syncing, exporting, or installing software. Anyone involved in the product development process can always share up-to-date files with a link. That makes it easy to collaborate on the latest designs and prototypes and see their code attributes. Figma has simplified collaboration across the entire design process for thousands of companies like Microsoft, Slack, and Uber and millions of users, including designers, developers, product managers, marketers, and others.

Shock and Awe: Adobe to Acquire UI Design Platform Figma for $20 Billion

paris-tuzun

If you asked today’s web designers which wireframing or prototyping tool is best, you’re likely to get a few different answers. Well, maybe more than a few.As you might have guessed, there are plenty of choices out there: free tools, SaaS apps, and even some that aren’t purpose-built for the job (think <a target="_blank" href="https://www.microsoft.com/en-us/microsoft-365/powerpoint">PowerPoint</a>). With so many options to choose from, it may prove challenging to find a single tool that meets your needs.While most platforms offer similar features, few bring the entire design process into a unified experience. That’s where UXPin is changing the game. In this review, we’ll explore the benefits of their all-in-one wireframing and prototyping tool, which offers some slick, integrated capabilities – and is designed to work across every device.<h3>Wireframing and prototyping: what’s the difference?</h3>Building a website or mobile app without wireframes is like building a house without blueprints. Wireframes save significant time in the design process and help bring ideas and concepts into laser focus.But what exactly is a wireframe? Quite simply, it’s a low-fidelity “skeleton” of a website. Wireframes show the general layout of web pages, the elements on those pages, and the size and placement of those elements. Since it is meant to convey a website’s architecture, it is intentionally devoid of any colors or graphics.Wireframes are lightweight and fast to produce, allowing for ample design thinking, lean UX development, and iterative feedback. A lot of designers still start their wireframing on paper, sketching out digital components and entities in the most analog way.Prototypes, on the other hand, are medium-to-high fidelity views of a website or application. They offer more detail, showcasing visual elements such as colors, graphics, and font types. In essence, a prototype is a preview of what a working website or mobile application will look like to a user.<h3>A brief history of wireframes and prototypes</h3>Wireframes and prototypes have certainly been around the block. Wireframing has its roots in magazine mockups for galleys and layouts, while prototyping evolved from software product development with visual UI requirements – and a need for rapid testing and feedback.While wireframes are elemental in nature – using simple shapes and objects to detail the flow and structure – designers have often relied on different tools when moving into prototyping. The first ones emerged in the 1980s with <a target="_blank" href="https://www.adobe.com/products/illustrator.html">Adobe Illustrator</a>, <a target="_blank" href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, and <a target="_blank" href="https://www.microsoft.com/en-us/microsoft-365/visio/flowchart-software/">Microsoft Visio</a>.But it wasn’t until IBM introduced RAD (Rapid Application Development) in the 90s that the concept of minimum viable prototypes (MVPs) took off – and so did the focus on design experience. By the early 2000s, <a target="_blank" href="https://www.omnigroup.com/omnigraffle/">Omnigraffle</a>, <a target="_blank" href="https://www.gliffy.com/">Gliffy</a>, and <a target="_blank" href="https://balsamiq.com/">Balsamiq</a> were changing the way designers think about wireframing and prototyping by giving them more options to choose from. By 2010, UXPin and other solutions were hitting the market. The rest, as they say, is history.<h3>What is UXPin?</h3>UXPin is a comprehensive cloud-based design prototyping tool that works on any operating system. It brings developers and designers together even if they use Mac and Windows – because UXPin is fully powered by the cloud.With UXPin, you can move seamlessly through every phase of your project – from low-fidelity wireframes to high-fidelity prototypes – with access to rich features like interactive elements and animations. In addition, UXPin allows you to add conditional interactions, variables, and expressions to get your prototypes closer to real, coded apps.One of the best things about UXPin is that it's designed with both individual designers and teams in mind. It's flexible enough for a freelancer working on their own – or a squad collaborating to develop new products or experiences. UXPin offers some dynamite capabilities for enterprise customers to manage their teams and libraries with advanced permissions, making it an awesome platform for an ecosystem of users.<h3>Features</h3>Components<img src="https://cmscritic.com/ms-content/uploads/2023/08/uxpin-components.jpg" />Components save you plenty of time by minimizing repetitive and tedious work – allowing you to reuse existing parts across your designs. A button, a footer, an icon, or even a cell in a table can be a Component. UXPin comes with a handy library of pre-made components, but it also allows you to create your own components. You can also share them across your projects through UXPin’s Design System Libraries.Built-in Design Libraries<img src="https://cmscritic.com/ms-content/uploads/2023/08/uxpin-expressions.jpg" />Apart from your own libraries, UXPin offers built-in iOS, Material Design, Bootstrap, Foundation, and User Flows libraries – each with interactive elements, colors, text styles, and icons.Design system libraries are the place for shared design patterns (such as colors, text styles, assets, and Components) that allow teams to build high quality, consistent prototypes. This empowers users to save time while keeping projects steadily on-brand. With DS libraries, you can also create a fully-documented Design System.Data For a lot of designers, Lorem Ipsum is still a go-to placeholder for text. Still, for some projects, Latin copy isn't preferable – even at the mockup stage.Another great feature of UXPin is that enables users to add real content to their wireframes and prototypes using the <a target="_blank" href="https://www.uxpin.com/studio/blog/replace-lorem-ipsum-with-real-data/">Data</a> feature. Upload JSON, CSV or URLs and demo a prototype that's even closer to the finished product. If you're early in the process and want to use filler for placement, UXPin also has a database of placeholder components, from mock names to dummy credit card numbers.One other notable feature is stock photography. Most platforms don't provide direct access to image libraries, which can be essential to developing a finished prototype. UXPin lets you upload photos directly from their partner, <a target="_blank" href="https://unsplash.com/">Unsplash</a>. This integration may seem like a small thing, but it can accelerate the entire design process from idea to execution by enabling users to work fluidly in a single, unified platform.<img src="https://cmscritic.com/ms-content/uploads/2023/08/uxoin-unsplash-integration.gif" />Make Your Designs Interactive Once you build the static version of your prototype, you can use states to add interactive elements such as text fields, checkboxes, and radio buttons.In UXPin, each element can have several states with a different set of properties and interactions. For example, you’ll be able to create a single button that has a default, hover, active and disabled state – and then switch between these states once a specific action is triggered. States also let you build complex components like drop-down menus or navigations.For each state, you can determine an alternative set of properties. In the case of a button, it could be a different fill and content. The important fact is that you’ll still have the same elements, just with various styling options.<img src="https://cmscritic.com/ms-content/uploads/2023/08/uxpin-element-states.gif" />Import from Sketch One cool feature of UXPin is its ability to import from <a target="_blank" href="https://www.sketch.com/">Sketch</a>, which is an incredibly popular design tool. It seems like the UXPin team really understands the value that other applications play in the design ecosystem, and they’ve made it easier to build meaningful connections.Importing designs from Sketch to UXPin is just a simple drag-and-drop. UXPin keeps all of your layers intact, so you can pick up exactly where you left off and turn them into fully interactive online prototypes.Easy Collaboration UXPin is a cloud-based tool that works on any operating system – so you and your teammates can collaborate in real-time. As we've already mentioned, it effectively "unites" designers and developers, even if they use Mac and Windows systems. You can even take your collaboration to the next level with in-app commenting, allowing you to tag your teammates in comments and keep them in the loop when you're working on the same prototype.You can also make the most of your collaborative design process and invite your team, stakeholders, and reviewers to work with you. It's incredibly simple to set their permissions via User Management and control what they can see and do.Preview Designs on Mobile With the UXPin Mirror app, you can effortlessly preview your prototypes on mobile devices to see how they look and behave. As you make changes in the editor, the prototype on your mobile device will update on the fly.Another nifty feature: you can download the UXPin app from <a target="_blank" href="https://play.google.com/store/apps/details?id=com.uxpin.mirror">Google Play</a> or <a target="_blank" href="https://itunes.apple.com/us/app/uxpin-mirror/id1446596008?ls=1&amp;mt=8">App Store</a> and see exactly how your designs look on mobile devices.<img src="https://cmscritic.com/ms-content/uploads/2023/08/uxpin-preview.png" /><h3>Pricing</h3><img src="https://cmscritic.com/ms-content/uploads/2023/08/uxpin-pricing-annual.jpg" />UXPin offers two types of pricing: monthly and annual. There are four tiers:Basic Plan Get everything you’ll need for wireframing and prototyping, including animations, interactions, and states. Basic also offers:<ul><li>Version history for saving iterations of your designs and retrieving them at will.</li><li>Export function for moving your designs to PDF, PNG, and HTML.</li><li>Stakeholder approval for sharing your prototypes with your team or customers, gathering feedback, and obtaining the all-important "OK" to proceed.</li></ul><img src="https://cmscritic.com/ms-content/uploads/2023/08/uxpin-custom-workflows.png" /><ul><li>Comments and assignments for keeping your team and stakeholders connected around feedback and assigning specific tasks.</li><li>Password-protected views for securing your prototypes with a password.</li></ul>The Basic Plan is $24 per month but offers a discounted rate of $13 per month with an annual plan.Advanced Everything from the Basic plan, plus:<ul><li>Contextual documentation to set up guidelines or leave notes – and pin them to specific elements on your prototype.</li><li>Conditional logic for setting rules around custom interactions.</li><li>Expressions, which use Javascript to create computational components like shopping carts or validate user inputs such as emails.</li><li>Variables that dynamically update text elements, capture data from inputs, or store user preferences for later use on your prototype.</li></ul>The Advanced Plan is $39 per month. But like the Basic Plan, it offers a discounted rate of $29 per month with an annual plan.Professional Everything from the Advanced Plan, plus:<ul><li>Design systems: package your design, code, and other elements to create reusable Components and style guides.</li><li>Roles &amp; permissions: define what team members can do and what projects they have access to. Each team member has one role – “creator”, “manager”, “owner”, or “collaborator” – and you can control the state and privileges.</li><li>Priority support: get help when you need it via email, phone, or Zoom.</li><li>Advanced security: trust that anything you design is securely encrypted and fully backed-up by UXPin.</li></ul>The Professional Plan is $89 per month with a discount to $69 per month with an annual plan.Enterprise UXPin’s Enterprise plan is perfect for large organizations with dedicated design teams and product development squads. Used by Fortune 500 companies, Enterprise provides unlimited users, unlimited design systems, and advanced security – all of which allows you to facilitate the design process at scale.The Enterprise Plan has custom pricing based on the size and needs of your organization.<h3>Conclusion</h3>UXPin really earns the “UX” part of its name by focusing on the user experience. It’s the perfect blend of features for both wireframing and prototyping, and it brings team collaboration to the next level by working across platforms and operating systems. It definitely feels like an enterprise-grade product, but it’s also a solid tool for freelancers with its affordable Basic Plan.If you’re curious how UXPin stacks up against their competition, check out their “tale of the tape” comparison on their website. They proudly display how they rate against other similar platforms such as Figma, Invision, Framer, Adobe XD, Sketch, Axure, Balsamiq, Zeplin, Marvel App, and Proto.io. They even provide a <a target="_blank" href="https://get.uxpin.com/uxpin-vs-sketch/">checklist of differences</a>.One of the biggest advantages of UXPin is that it’s cloud-based. This allows users to design, prototype, and test ideas together – whenever, wherever. This is a big advantage over Sketch (for example), which only works on macOS. Someone using a Windows system can’t use Sketch, nor do they have access to files sent by other team members using it. Still, with Sketch being such a popular design tool, UXPin lets you import Sketch files and templates directly into their app – so you can get the best of both worlds.There is one con with UXPin: as a SaaS product, you’re on the hook to pay in perpetuity. With tools like Sketch, you only pay for the product once and renew when you’d like to upgrade. Your files belong to you – and aren’t locked into a third-party system. But what if you want to cancel your UXPin subscription? Well, if you want to maintain your libraries and components, you’ll need to “park your account” and keep an active profile. That costs $5 per month and only lets you preview your projects or export them. You can reactivate at any time, but it might be worth considering when you decide to sign up.If you’d like to see some examples of projects done with UXPin, they have a prototype showcase: <a target="_blank" href="https://showcase.uxpin.com/">https://showcase.uxpin.com/</a>You can also <a target="_blank" href="https://www.uxpin.com/sign-up">try UXPin for free</a> for 14 days without a credit card. You’ll be limited to 2 projects, but it’s still a great way to take it for a test drive and experience it yourself as a user.<h3>About UXPin</h3><a target="_blank" href="https://www.uxpin.com/">UXPin</a> is a design platform that for building mockups and wireframes, interactive prototypes, UX document creation, and collaborating with both design and development teams. Features include variables, conditional interactions, expressions, interactive states, and a data generator integrated with Unsplash to get free stock photos directly in UXPin.Unlike in other image-based design tools, anything you create in UXPin is based on html, css and js code. Since it's the same technology developers will work with, their code will match your design perfectly.Why code-based design? Since 2010, UXPin has been on a mission to enable the best user experiences by merging design and engineering into one world of better, faster product development.

UXPin Review: Elevate Design with All-in-one Prototyping and Wireframing

Explore a wide range of informative articles on Wireframe, insights, and industry updates. Stay informed and ahead of the curve with our diverse collection of news and posts covering the latest trends and developments in the industry

News

Shock and Awe: Adobe to Acquire UI Design Platform Figma for $20 Billion

UXPin Review: Elevate Design with All-in-one Prototyping and Wireframing