When Unsplash came on the scene in 2013, it upended traditional stock photography. Instead of relying on cheesy, cheap tropes — the visual equivalent of junk mail — Unsplash featured a daily collection of beautiful imagery. Its editors curated the work and maintained high standards in their selection.

Unsplash could not exist without the generosity and craftsmanship of the artists that share their work for free. To thank them, it’s holding its second annual awards, recognizing the top contributions to the site in different areas. Throughout the months of November and December, Unsplash will feature work in categories ranging from portraits to street photography, and judges will select the best featured image in each group.

We’re helping Unsplash spread the word, since we know a lot of Figma designers are passionate photography hobbyists (and Unsplash users). If you’d like to submit a photograph, head here and enter by December 7th. Here’s the full list of categories that will be highlighted:

1. Aerial photography
2. Animals and wildlife
3. Astrophotography
4. Black and white
5. Food and drink
6. Interiors and architecture
7. Mobile photography
8. Nature and landscapes
9. People and portraits
10. Sports
11. Street photography
12. Tech and business
13. Unsplash community

You can get more information on what constitutes each of these categories, who the judges are and how photos will be evaluated by going to Unsplash’s Awards page.

Nominate photography for the 2018 Unsplash Awards was originally published in Figma Design on Medium, where people are continuing the conversation by highlighting and responding to this story.

In the Figma Feature Highlights series (see 1 and 2), we’ve been showcasing Figma’s super powers with ideas on how to use them. This week we cover “component overrides.” If the concept of “Components” in Figma is new to you, we recommend first reading our Support article on Components here or our original Components announcement blog.

Design systems must strike the right balance between flexibility and consistency. You might use the same foundational components everywhere, like lists, avatars or status bars, but you’ll still need to tweak and adapt instances of them depending on context. Maybe individual list items will have different lines of text, or the background color on a status bar will change if a user hovers over it.

Instead of forcing you to build these particular instances from scratch, design tools should make it easy for you to tweak the original component, while still maintaining your design system.

That’s where Figma’s component overrides function comes in handy. Overrides work exactly how they sound — by allowing you to “override” properties of a design instance without breaking it apart from its parent component. You can change things like the background color, font, stroke, or other properties in an instance, and the instance will still stay connected to the original parent component. As a result, when you adjust the parent component, the instance will continue to inherit those changes — while maintaining its distinct differentiators.

Overrides in action

In Figma, you can override a nearly endless number of properties in an instance, including:

• Color
• Type alignment
• Add, remove, modify strokes
• Styles
• Opacity
• Blend mode
• Fills
• Effects (drop shadows, blurs)
• Text
• Visibility (show/hide)

If you’re looking for inspiration, here are a few concrete examples of ways you might use overrides to maintain consistency in your design system.

1) Create a realistic list of information — Working on a simple to-do app or a complex table view for a dashboard? Create a single “cell” component and override the text in each separate instance to add unique data.

2) Show a button in different states — Need to show different states of a button after user behavior (hovering, pressing, ignoring, etc)? Use a single button component and override its background color (or text opacity…or drop shadow…or whatever you’d like!).

3) Build an address book with photographs — Want to create an address book with different people’s profiles? Override the fill from a circle component with placed images — like photographs — to customize each avatar.

4) Make a kaleidoscope — Looking for a little bonus fun? One of our designers, Rasmus Andersson, created the kaleidoscope gif below to dazzle you with the power of overrides.

Figma on Twitter

Share some workflow inspiration with fellow designers: Tweet a gif of your most creative use case for Component Overrides with the hashtag #FigmaOverrides. Here's an ex. from @rsms for inspiration: https://t.co/atFFNXkiAH

Here’s how to create your own kaleidoscope at home:

1. Make a frame, draw an illustration in it and convert it to a component.
2. Duplicate it to create an instance and place it adjacent to the right. Flip horizontal (shift-H).
3. Duplicate again and place the new instance below the previous. Flip vertical (shift-V).
4. Duplicate one more time and place the new instance in the “hole” that’s left to form a large 2x2 rectangle. Flip horizontal (shift-H).
5. Draw in the original component (top left corner) and watch the kaleidoscope unravel.

FAQs about component overrides

We get a lot of questions about component overrides and wanted to capture the most frequent ones and their answers. Here’s the 101 rundown on everything you might want to know about them (and you can find more information in our help documentation here).

Q: Can you duplicate a master component in a file?

A: No, it isn’t possible to duplicate a component in a single file. When you do that it will always create an instance of the original component. However, when you copy a component from file A and paste it into file B, you will have a fully functioning component in file B.

Q: Can you reset overrides in an instance?

A: Yes! If you decide you want to reset a component back to its original state then you can, but one of the unique things about Figma is that you can also reset any property for each element within your instance.

Q: If you edit your master component, will it automatically update the overridden instance?

A: Yes and no. As you further change the master component, you’ll see that the instance still updates accordingly, except for whatever property you manually changed. For example, if you have a blue circle as a component and change the instance’s color to green, then the instance will stay green even if you edit the master component to be red. However, if you change the stroke weight of the master component, then the instance will reflect those changes synchronously.

Q: Do overrides work across files?

A: No, they do not.

Q: Are there any properties you can’t override?

A: Yes, any properties that impact the layout of child layers. That includes:

• Size
• Position
• Point and bezier positions
• Constraint settings

Which little known feature should we highlight next?

Let us know what you think what should get the next Figma Feature Highlight treatment in the comments! You know us, we’re always gunning for user feedback. And be sure to brush up on our previous Figma Feature Highlights: Observation Mode and Sketch Import.

Figma Feature Highlight: Component Overrides was originally published in Figma Design on Medium, where people are continuing the conversation by highlighting and responding to this story.

The University of the Arts London is ranked the sixth university in the world for Art and Design in the QS world rankings. It has impacted the creative industries worldwide, in part by launching the iconic careers of Lubaina Himid, Stella McCartney and Anish Kapoor… just to name a few.

But it wasn’t until 2004 that the colleges formed an official federation under the name “University of the Arts London,” aka UAL. Today, the university is made up of six colleges, each with their own rich history and identity — most dating back to the early 19th century. But their unique past presents design challenges because the organization uses a number of identities. As Declan Talbert, a UX designer at UAL, put it, “everyone looks after their own site and they each want to implement their own style.” As a result, UAL’s digital experiences can feel disjointed and inconsistent.

Since last year (2017), the User Experience team has been focused on reshaping UAL’s core digital experience to be more user-centric as part of the Digital Transformation Program. The team partnered with the University’s brand, content and development teams for the program. Updating the website was phase one. And while a design system would be an eventual output of the project, the team stumbled upon the opportunity midway through the website project. As Andrea Caporale, UX manager at UAL, said, “the design system was good collateral damage.”

Making the switch mid-project

The UX team tested several design tools during the early phases of the website project and struggled with the siloed nature of most applications. As Talbert said, “We immediately fell into issues trying to collaborate with our Sketch files — the problem was we were not able to work seamlessly on files together.” Between working with outside agencies and internal stakeholders spread across 14 campuses, the team grew frustrated. Versioning issues caused confusion, syncing files took time, and, as a result, communication loops became exhausting which caused a rift between dev and design.

“After just three days we saw all the benefits of Figma.”

After testing out Figma, Talbert recommended the team try it. Because Figma is accessible from any computer with a browser and enabled the team to collaborate online in real-time, they decided to make the switch, even though they were midway through the website project. Because importing their original files from Sketch was a simple drag and drop, Caporale said, “after just three days we saw all the benefits of Figma.” Having a centralized source of the truth across developers, designers, key stakeholders and even executives resulted in an unprecedented level of transparency. And most impactful was the new level of collaboration between development and design. According to front-end developer Bo Ajayi-Walmsley, “Just seeing all our work within one tool was incredibly useful.”

Go big with Figma

Equipped with the right tool all teams and external agencies were finally speaking the same language. But given the extensive nature of the website project, the team decided they’d have to build everything from scratch. In an effort to save time, Caporale saw the opportunity to prioritize the design system. As Caporale puts it, “building out the Design System came naturally thanks to the quality of features in Figma.” Thus, the UAL design system was born.

Project: Design System

The teams worked in tandem on both the design system and the website project, both were of equal importance to the overall website redesign and helpful to align other Digital Transformation Program key projects. Caporale said, “The design system was not just about creating components for our website, it was a way to connect together all of our channels and give them the same style and functionality.” The goal was to harmonize components across colleges and streamline processes.

To get started, the UX team conducted a series of workshops with students and business partners to understand what features were critical in the design system. The idea was to uncover every single component and all the discrepancies.

The team then translated the style guide into digital assets. And given the complexity of UAL’s brand, the design system had to be flexible enough to allow the use of different colors, typography and personality. Using the team library in Figma allowed the UX team to have a living version of their brand guidelines that is accessible to all — no matter their device or location. And with the recent release of Figma Styles, “it was like our prayers were answered,” said Talbert. Because Styles allows you to apply color styles separately from text and effect styles, the team can provide an added level of flexibility.

Fast delivery, the Figma way

With the design system taking shape, the website project moved at lightning speed. Leveraging components, the team built base pages to act as templates, enabling development to spin up new pages fast. According to Joshua Shindler, Digital Development manager at UAL, “With our Design System in Figma, we’re able to move faster because we’re able to instantly see how designs can be created in code.” The teams were finally synchronized around one common system. For the first time, the teams could actually bridge the gap between developers and designers and effectively communicate with each other.

“We’re able to move faster because we can instantly see how designs can be created in code.”

Collecting feedback on the website design was simplified, too. “The executive board can access a Figma link, view it at their leisure and see how the website project is developing,” says Talbert.

A New Journey for UAL

In the end, the new UAL website launched — and on time. But it was the reaction to the project that may have been the biggest win. Everyone in the organisation feels this as an exciting, new beginning — from the students through to the executive board. As Caporale puts it, “Our design system in Figma marks the starting point of a new journey where we build more consistently and speak the same language across every single part of the UAL experience.”

The University of the Arts London’s accidental path to a design system was originally published in Figma Design on Medium, where people are continuing the conversation by highlighting and responding to this story.

Today we can monitor sleep, count our steps, record our heartbeat and even text our doctors — all with a click. Thanks to intuitive design, individuals are equipped to take ownership of their health unlike ever before.

When building experiences in healthcare, the stakes are higher. If your product fails, your patient fails — and that simple equation comes with risky outcomes. Designing for healthcare is complex — there are human lives on the line.

Meet Virta Health, the revolutionary company that delivers treatment for type 2 diabetes and other chronic metabolic diseases without medications or surgeries. This company is on a mission to reverse diabetes for 100 million people by 2025. Launched in 2014, Virta has already seen jaw-dropping results like:

• 94% of insulin users reduced or eliminated usage after 1 year
• 60% of patients reversed their type 2 diabetes after 1 year*

At Virta, design is central. According to David Hatch, Head of User Experience, it has been that way since the company’s inception, “The goal of design at Virta is to make things that allow all types of people to achieve healthy behavior change.”

Igniting the Figma flash mob

At Virta, design is a shared investment across all teams — from designers, marketers, and developers to physicians. The 11 person design team operates as a transparent and collaborative internal hub, touching every piece of the company.

“Other tools we had been using suddenly felt archaic.”

As early adopters of collaborative, web-based design tool Figma — some designers even refer to themselves as “OG Figma users” — Virta Health was designed from the ground up on Figma. Hatch said, “I felt like Figma was the future. The collaborative aspect is where our design culture took off.”

Collaboration and transparency are paramount for this young scaling startup. For Victor Kernes, the newest UX designer to join the team, getting up to speed was no challenge. “I was able to dive right in on day one because everything was current and lived in Figma.” (Fun fact: Victor taught himself to design by using Figma. Listen to his feature on Design Details Podcast).

As Hatch put it, “The idea that people could be untethered from the desktop environment made the tool easy to adopt.” Anyone can access, comment and participate in design from anywhere, on any machine. But the collaboration feature is what really hooked Hatch:

“I like to start a project, get something to a certain state and send the link to our UX Slack channel and ask for help. Within seconds I’ll see cursors jump into the canvas, start duplicating and making improvements. It’s impressive to see your team at work together. It’s like a Figma flash mob. Other tools we had been using suddenly felt archaic.”

Consistent design is intuitive design

The Virta design team subscribes to the principle that consistency is king. For example, if a patient is having a health issue, a physician will need to be able to communicate with their patient as quickly as possible through the Virta app. That path has to be predictable and well-known. There cannot be any unexpected left turns in the design and usability. You have to create consistency across everything. If someone is used to one flow, it can’t be different in another part of the app.

“I felt like Figma was the future. The collaborative aspect is where our design culture took off.”

For Virta, components in Figma are the key to unlocking consistent design. Once an element becomes repeatable, a component is created and UI can easily be duplicated which saves time. Victor explains, “Figma makes the process of replicating design much easier.”

Over time, the Virta team has made their component library more sophisticated. Based on the idea that if you build a component well, it allows for the desktop and mobile version to to exist in that single component and be responsive.

“As a designer who is responsible for creating UI patterns, the one thing I worry about the most is breaking consistent design patterns,” Joey said. “With components in Figma, consistency is created by default.”

In Virta’s visual component library today, everything is based off a structural component and then the team uses nested components to create new components from that base.

Joey Banks on Twitter

This is the kind of component composition I love nerding out about inside of @figmadesign. A basic example, but in Virta's visual component library, everything is based off of a structural component and then we're using nested components to create new components from that base.🤓 https://t.co/075LXsPGKA

The team is also taking that principle of basing everything off a structural component and applying that to code to bake in even more consistency.

Empowering non-designers

With design as the heartbeat of the company, Figma is like the blood supply. Figma files are passing through Slack channels all the time. Marketers are adding copy changes, physicians are providing feedback on prototypes and designers are collaborating.

In the recent relaunch of VirtaHealth.com, the design team was tasked with reimagining the site in an effort to bring in patients in a more efficient way. Stakeholders included marketing, product, leadership and developers and the entire project took place in Figma — from ideation to developer handoff. “It offered us peace of mind,” recalls Joey.

With Figma, anyone could see how the project was tracking at any given time. The product team sat with designers during ideation, marketing was able to adjust their own copy and developers were able to move quickly with Figma. That transparency allowed a seemingly big project to get underway fast with their first page going live in just one month.

“Figma results in us doing more showing rather than telling,” said Dian Xiao, a UX engineer at Virta. “We get better feedback and we can iterate with more up to date information.”

Victor and Alex Tran, UX designers who partner with the marketing team, came up with a self serve-model which helps marketing move faster. Marketing has access to templatized Figma files for social images, landing pages and collateral. They can go directly into a file, spin up their asset, tag a designer using comments for illustrations or tweaks and voilà, their asset is complete.

“Figma results in us showing rather than telling.”

According to Victor, it has reduced at least two, if not more, cycles with design and shaved weeks off the process. Joey states, “The most magical part about working in Figma is that it gives non-designers the power to participate in their own content.”

Dian agreed, “It’s great to have someone visually respond back to what you shared instead of using words or Photoshop. People can build on top of your design while you watch.”

On the app side, collaborating with physicians is woven into the workflow. “What’s important is making sure everything is as functional, succinct, compact and dense as possible while still being very usable,” says Joey. He’ll often send Figma links over to a physician for fast feedback or invite them in during ideation to test a flow. The intuitive nature of Figma allows non-designers to easily jump in. Hatch states, “It’s beautiful to see two sides of house come together with one tool.”

Transforming the future of healthcare

At Virta, the company has come together around this shared commitment to design and has seen real impact this company in it’s patients:

“I’ve learned a new way of thinking and a new way of living. I love the way my life is now.” — Wilma, Virta Patient

“The most important part of being in the Virta treatment is the app and scale that sends in my weight everyday gives me accountability.” Shirley, Virta Patient

By delivering a consistent user experience, they are positioned to make a real impression on the healthcare industry. As Hatch said, “We want to be proud of our designs but the most important thing is to serve and heal our patients.”

*Note that % reversal is defined as the % of patients with HbA1c less than 6.5% who are taking no glycemic control medications or only metformin.

How Virta Health uses Figma to help patients reverse type 2 diabetes was originally published in Figma Design on Medium, where people are continuing the conversation by highlighting and responding to this story.

Over the years product design has adopted many engineering best practices. But when it comes to reviewing and documenting changes, designers are limited by their desktop tools. To access version history, they must use friction-filled workarounds and export files.

That’s not the case with Figma. Because our tool is web based, your files are constantly saved, and you never have to sync. This continuous stream of version history is great for tracking your progress. That said, with so many versions listed it’s not always easy to see when important changes were made to a file.

Shortcut: ⌘ + ⌥ + S (Mac) and Ctrl+ Alt + S (Windows)

Today we are introducing simple but powerful functionality — Figma Version History — that allows you and your collaborators to organize your Figma file history. You can manually flag particular versions and save notes about each stage of design as you go. That way, you can revert to certain milestones — like how your design looked before its first critique, or which version of a design you first ran user tests on. You can easily restore these important versions or duplicate them into new files.

Better workflow

There are several benefits to this new way of working in Figma.

1) Better organization: By saving particular milestones, you’ll make your Version History easier to parse. Any autosaves that occur between manually saved versions will automatically collapse, so you can skim the history of your design without getting lost in the clutter. See below for a concrete example of the old way (left) and the new way (right).

Hot tip: Never seen your version history before? Click your file’s name and “Show Version History” to pull it up

2) Versions for pages: Previously, you could only see your Version History for your entire file, even if changes were made on different pages. Now, you can manage your Version History on a per page view. That will make it easier to track changes without getting lost in the noise. Click to a particular page, select the file name, and “View Version History.”

3) Faster design review: With our new notes functionality, stakeholders can communicate what has changed with each revision right from within the Version History. We hope this will reduce the time spent reviewing work, and help your team reach a better outcome, faster.

4) New shortcut alert: We know you love your keyboard shortcuts, so here’s a new one. Hit ⌘ + ⌥ + S on Macs and Ctrl+ Alt + S on Windows to quickly save and name a particular version.

Conclusion

We hope our new and improved Version History will add up to big productivity wins for your team. You’ll be able to stay in your valuable “flow” state, instead of interrupting design time to export versions. Stakeholders will be able to review different stages of a design without the hassle of meeting in person to sync, plus they can leave their thoughts on each version in the notes’ section.

These fine-grained controls build on our original autosave functionality, and the idea came from feedback from our community. Like always, keep the feature requests coming!

Now you can name and annotate your Figma Version History was originally published in Figma Design on Medium, where people are continuing the conversation by highlighting and responding to this story.

Since 2006, Xfive has gone from a two-man startup with a few remote contractors to a thriving web development shop with offices in Krakow, Melbourne, and San Francisco. The company provides development services to digital agencies, startups, and enterprise companies alike.

Two years ago, Xfive rebranded itself and launched a new website. Since then, the business has continued to rapidly progress, while parts of its website — including the homepage — lagged behind.

Several prominent areas like Customers and Work were simply outdated, but more fundamental issues were at hand — including a confusing navigation scheme, a multitude of CTAs vying for attention, and a swarm of landing pages to navigate (and maintain).

Due to the nature of their work, Xfive does not usually employ designers. Typically, clients provide the designs and Xfive executes on development.

Enter Lubos Kmetko, an Xfive content producer. Lubos had recently taken Figma for a test-drive as part of writing two comparison articles covering best UI design tools for Windows and best tools for designer-developer workflow.

Not a designer by trade, Lubos felt confident that he could handle the redesign with Figma. But he needed to make sure all stakeholders had a platform for reviewing comps and submitting feedback.

Prototyping and collaborating in Figma

Lubos used Figma to redesign the Homepage, Customers area, and Work sections of the website, which included streamlining the global navigation and reducing the number of CTAs and landing pages.

After creating mockups of each page, Lubos sent a preview link to various stakeholders spanning marketing, sales, production, editorial, and development. Even the chief operating officer wanted to review and feedback on the proposed changes.

Since Figma is 100% cloud-based, anyone with a browser could review and comment on the designs. “It was as simple as sending a link to the stakeholders,” said Lubos.

The team jumped into review the comps, using the Comments tool to exchange ideas and offer input. Often, Lubos was incorporating feedback in real time and/or explaining design and user interaction ideas to the team — all within Figma. Meanwhile, all feedback, changes, and updates were stored and remained in sync.

“By far, Figma offers the best workflow among the current UI design tools, especially when combined with prototyping and commenting,” said Lubos.

Milosz Bazela, COO and Head of Xfive, especially liked the ability to view and comment on mockups within the browser. “Thanks to Figma, it was easy for everybody — from marketing managers to copy writers — to access designs at all stages of development and to provide very specific feedback,” said Milosz.

Streamlining designer-developer workflow

Once comps were approved, it was time for the designer-developer handoff. “Figma works great for designer-developer collaboration and, during this project, it really proved itself,” said Lubos. Instead of sending files to developers via email or Box, and worrying about version control, Lubos shared designs via Figma.

Developers opened Figma in the browser and used Code Mode to inspect design files without using external tools like Avocode and Zeplin. Through Figma, they could inspect and export CSS as well as iOS and Android code.

“With Code Mode, I got all the specs I needed — whether it was size, color, or padding — which removed any guesswork and helped me code faster and more accurately,” said Aleksandra Worhacz, Front-end Developer at Xfive.

“The way Figma supports collaboration is simply amazing. It’s like Photoshop married Google Docs. But, surprisingly, Figma is much lighter and simpler,” added Artur Kot, Front-end Developer at Xfive.

Just the beginning…

For Xfive, this is just the beginning. Using Figma for its redesign became an important testing ground for using Figma on client projects. Lubos imagines creating and sharing functional prototypes with teammates and clients and collaborating in real time — instead of the “old way,” (attaching PDFs and JPEGs to an email in order to communicate functional design ideas).

“From sharing design prototypes, to discussing implementation details, to developer handoff, Figma makes collaborating so much easier,” concludes Lubos.

Web design without a web designer? Xfive turns to Figma. was originally published in Figma Design on Medium, where people are continuing the conversation by highlighting and responding to this story.

Convincing your team to switch to Figma, the collaborative online design platform, isn’t always easy. Open design represents a cultural shift, from design siloes to collaboration.

So, here to offer some pro tips on the transition is James Morris, senior designer at the popular social media management app Buffer. James took a step-by-step approach to moving Buffer to Figma, making sure he had company-wide support for the change. Buffer’s team is entirely remote, so they needed a design tool that simplified communication.

But for James, introducing Figma was about more than just a new tool. It was about shifting design’s role in the engineering-driven organization. “How can you help the design team have a place at the table by default?” he said. “How can you make design part of the discussion?”

Buffer’s commitment to transparency

It’s not surprising Buffer was drawn to Figma, because a core tenet of its culture is transparency — to the point that the company publishes all its employees’ salaries online. Despite that, its design team struggled to work with other departments, according to James. The tools they used trapped them in a separate world.

“How can you help the design team have a place at the table by default?”

Members of other teams had trouble finding the designs they were looking for, since files were often buried deep in Dropbox subfolders. Once they located them, they couldn’t see designs without buying the software that powered them, or upgrading to new versions. Even with the right license, developers and product managers were often afraid to open designs in case they accidentally saved over someone’s work.

“You realize the tool of choice really has a massive effect on the communication. It puts a wall up around the design team as though it has these special files no one can touch,” James said. “Figma promotes the opposite feeling. We’re there just a tap away.”

He explained that because Figma runs in the cloud, the collaboration issues disappear. Anyone can be given access to a design file via its URL, and teams can have unlimited view-only accounts (that are free!), where viewers can leave comments and pull data from designs to code them.

“We have engineers who are using Linux and much of the design software out there doesn’t support this platform,” James said. “One person was prepared to buy a Mac just so he could open design files! At that point, the benefits of Figma were crystal clear.”

Step 1 — open exploration

Just because Figma’s value seemed obvious to James, that didn’t mean it was clear to the rest of the organization. He knew the best way to rally support was to show, not tell. With a company wide email, he introduced a ‘period of exploration,’ asking teams to experiment with different design and collaboration tools to see what met their needs.

“You realize the tool of choice really has a massive effect on the communication.”

During this time, James took in feedback about Buffer’s workflow challenges and solutions. He lobbied for the ways Figma could fix these issues, including detailing the benefits in the original memo he sent out. Ultimately, James trusted that once people tried Figma, the collaboration features would prove themselves.

Step 2 — show, don’t tell

Whiteboarding sessions with product managers

During this exploration period, James used creative methods to help teams and individuals explore Figma. Since Buffer is remote, an easy first step was virtual whiteboarding. James is based in England, so he convinced one of Buffer’s Canadian PMs to brainstorm a feature with him.

“We both drew different ideas, like how people would collaborate in a Google Doc, except with shapes instead of words,” James said. “Figma showed itself very quickly, it’s incredibly easy to pick up.”

Because they used Figma to work together in real-time, James didn’t have to sit around waiting for a formal spec sheet from the PM.

Convincing the engineers

To persuade Buffer’s developers to get on board, James left them to their own devices. “I said, ‘Guys, check this out. Here’s the URL, see if you can get the information you need,’” James remembered. “They got really excited by just being able to open it up.”

Developers can use Figma’s free view-only tier to view CSS, iOS (Swift), and Android (XML) data in the design. All they need is a link to the file to open it — a far cry from the Photoshop era of downloading and paying for an unwieldy application.

“Engineers got really excited by just being able to open Figma up.”

“One of the Figma selling points for them was the source of truth. I could create a URL for a particular design, and that could be easily shared and that URL would stay the same,” James said. “Rather than exporting the designs as images or having to explain where the file is located in Dropbox.”

The final secret sauce for wooing the eng team? Tell them about Figma’s work with WebAssembly. We’ve been pushing the boundaries of browser technology, so you might be surprised how many engineers have already heard of us.

“A few of them loved Figma already because you guys are using WebAssembly,” James said. “You’ve got the best, most kick-ass web-based app. There’s already kudos there from an engineering point of view.”

Woo the designers with candy

Sometimes, designers can be the hardest group to woo to Figma. Many fear open, transparent design. Others don’t believe Figma’s web-based application can perform just as quickly as a desktop one. Figma has done a lot of work on performance and in some cases beats its desktop counterparts, but people have to experience it themselves to believe it.

Housseynou Fall on Twitter

Why I choose @figmadesign over Sketch. https://t.co/sZRO97tlNO

So, to convince designers to give Figma a shot, tempt them with the candy: The vector network, team library + constraints functionalities, desktop app, and sketch import tool. James took the time to jump into Figma files with other Buffer designers and demonstrate the power of these features.

“Our junior designer, Tom, didn’t realise the true power of components and how they can make it easier to work with complex designs,” James said. “After I showed him he was like, ‘Wow, this is amazing.’”

Often, once a designer is excited by the Figma candy, they’ll wind up staying for the Figma carrot — the collaboration functions that make it far easier for them to handoff designs to engineers, or communicate what they’re working on to the leadership team.

Conclusion

After giving Buffer staff ample time to try different design tools, and helping them discover the best of Figma, James didn’t have much more work to do to convince people to make the switch. The benefits were obvious, and everyone was on board. To finalize the decision, he sent out one final memo, summarizing why the company was moving to Figma.

In the email James concluded: “The design tool Figma will help us be more open, collaborative and consistent with our designs and help us bridge the gap with design handover for engineers.”

How to convince your team to switch to Figma was originally published in Figma Design on Medium, where people are continuing the conversation by highlighting and responding to this story.