metalab logo
October 22, 2019
Design

What We're Working On: Pitch (and our thoughts on Figma)

We’ve all used PowerPoint. Whether it was back in grade school or something we use every day at work, we've all been lead to believe it’s a necessary evil. Yes, Powerpoint has expanded its feature set over the years but they haven't made much headway solving the fundamental issues. Templates are a beast. Versioning is a nightmare. The features you need are buried under the ones you don’t—and don’t even get me started on how to generate a chart. 

The thing about necessary evils though, is they’re often not that necessary.

All of this is why we were stoked to work with the team at Pitch who are building the “presentation tool for the Slack generation.” With intuitive features like real-time collaboration, live data integrations, asset libraries and third-party integrations (such as for stock photos), Pitch’s goal is to show the world that Keynote, MS PowerPoint and Google Slides aren’t necessary evils. 

Pitch is here to show how behind the times and needlessly complicated presentation software is.

Pitch is putting those tools on notice. Just as Slack showed how antiquated other workplace communication platforms were, Pitch is here to show how behind the times and needlessly complicated presentation software is.

Until we can unveil more of the work we’ve been doing to help Pitch take down its presentation tool opponents, we thought we'd share what we've learned while dabbling with new tools to build these new products. In the case of designing Pitch, we got to try out the new kid on the block: Figma

The design team at Pitch had already adopted Figma as their go-to design tool which presented us with a unique learning opportunity and opened our eyes to a debate we didn't know we wanted in on—Figma or Sketch?

Making molehills out of mountains

But first, a bit of background. Here at Metalab, we love Sketch. It’s been a game-changer for our product design toolkit since the Photoshop days. We also think the “if you don’t use this design tool, you’re cancelled” fights are very tired. There’s needless drama over which tool is best for the job. We believe the best tool is the one that best meets the needs of your team.

Okay, back to the project. Pitch's team had been using Figma since their inception, so we decided together that it was a good opportunity for our team to learn and expand our toolkit further. We’d heard good things about Figma but we had some reservations:

  1. Our lack of experience with Figma might influence our ability to deliver our expertise as effectively as possible.
  2. It lacked certain features that had become central to us as Sketch devotees.
  3. While there would be benefits to 24/7 client team access to our design files, we know every designer knows the anxiety that comes with premature file sharing.

Nevertheless, we dove in. Was it challenging to balance internal and external review processes and manage client team expectations? Yes. Were we surprised by how much this new-kid-on-the-block tool surpassed our expectations? Yes. Here’s what we discovered. 

Figma or Sketch?

On Collaboration

So long, Abstract file syncing. Native cloud collaboration means Figma is to designers what Google Docs is to everyone else. Design repositories finally become a thing of the past. The collaborative functionality of Figma also makes working with remote teams in the same file virtually seamless. Prototyping mode kills the need for the cumbersome Abstract + Sketch duo when it comes to presenting work. And when feedback can be shared directly in the working file, it saves time triaging InVision comments or clicking back and forth between screens. For both remote teams and client collaboration, Figma enhanced our ability to work smarter, not harder—together.

On features and functionality 

Initially, Figma’s lack of plugins was a major drawback. We’d come to rely on Sketch Plugins in our daily workflow, so could we really live without Stark, Copy to All, Symbol Swapper and our own internally developed plugins? Luckily, Figma recently launched its own set of plugins, so we didn’t have to get too far outside our comfort zone. And while both Sketch Cloud and Sketch for Teams have attempted to meet the growing demand for collaboration-first functionality, it simply wasn’t built with collaboration as a cornerstone.

On pricing 

TL;DR: there isn’t a huge difference in cost, per person, between either product. However, when you account for not needing Abstract to achieve what Figma provides out of the box, you’re essentially getting two products for the price of one. And because Figma is cloud-based, you can access your account from any machine, whereas Sketch is only accessible via licensed machines which in 2019 feels very...dated.

The verdict? It’s player’s choice.

From a learning curve perspective, Figma ended up being quite intuitive, worked in a similar manner to the tools our team already knows how to use, and the team found the documentation helpful for learning the more advanced features. Now that we know Figma well, we’re able to get others up to speed more quickly. 

Ultimately, the right tool for the job is whichever tool both the client and internal teams are most comfortable with. Some of us still prefer Sketch for various reasons, while others are Figma converts. If this post has done nothing more than pique your interest in giving this new tool a go, we’ll consider it a win. 

Moving from Sketch to Figma: A few tips

Files

Figma files are stored in the cloud and can be accessed within Figma’s file browser. By default, files you create can be found within the Drafts folder. Paid Figma plans offer the ability to organize and share files by Team and Project. Each file allows users to collaborate simultaneously and also offers automatic version history that can be easily accessed. But with all your files in the cloud, you might be asking: “Are my files stuck within Figma forever?” Nope! Figma offers the ability to export (and import) .fig files for safekeeping on your company’s archive.        

Figma shared resources

💡Handy Tip: Figma allows you to import Sketch files. Simply drag your Sketch file into Figma’s file browser.

Frames

When ramping up on Figma, Frames felt hard to understand but after a while we came to appreciate them. Frames can be thought of as Figma’s souped-up version of a Sketch Artboard. They are used to contain content and have the option to clip content that lies outside of its boundaries. Frames can be nested within each other, offer the ability to scroll within a prototype and allow you to create a custom layout grid. By default, when a Frame is resized, the content within it adapts. The way an object adapts is referred to as its Constraints. Selecting an object within a Frame will reveal the Constraints panel, which allows you to choose how your content adapts to its parent.        

Figma frames

💡Handy Tip: Want to resize your Frame without adjusting your content? Hold down the Command key while resizing.

Styles

Styles in Figma can be defined for Grid, Color, Text, and Effects. Styles are accessed from the icon made of four circles and each is treated separately. For instance, in Sketch you could define a style that includes text settings as well as color, but in Figma you would create and set text styles and color separately.

Figma style editor

💡Handy Tip: You can add a group name before your style name to automatically group styles together. For example, naming your h1 style “Headings/h1” would allow you to group all headings together within your text styles.

Components

We’ve all come to rely on Sketch Symbols and the efficiency they add to our workflow. Figma offers a similar feature, Components. Unlike Sketch’s symbol page, master components can live anywhere within your file. Rather than relying on an overrides panel, instances of a component are adjusted in-line. Need to edit text? Simply click into the text field of the component and edit the content.

Figma Components

💡Handy Tip: Like Sketch, Figma allows for slash-separated naming, which will automatically group your components (e.g. “Atoms/Buttons/Primary Button”).

Libraries

Figma’s Team Libraries allow you to publish components that can be shared between projects and individual files. When publishing a library you can choose which specific components will be shared. Libraries can be linked and accessed from the Assets tab, which lives next to the Layers tab.

Figma sharing library

💡Handy Tip: If you’re working on a library component and want to ensure it doesn’t get published by accident, name it with a period at the beginning and it will be ignored.

Keyboard Shortcuts

Most keyboard shortcuts are similar when moving from Sketch to Figma, but there are minor differences. Custom shortcuts are not yet supported within Figma, but you can still create custom shortcuts from within the Keyboard settings in macOS System Preferences.

Figma keyboard shortcuts

💡Handy Tip: See all Figma’s keyboard shortcuts by pressing ‘control+shift+?’

From the Survey:
What challenges are you facing today?

Most of our startup founders were primarily concerned with financial budget constraints, prioritization of focusing on the right product features, getting buy-in from stakeholders and investors, and keeping up with the constant changes in the market.

Enterprise leaders had a different challenge, concerned with the ability to get organizational alignment and clarity across complex levels within the organization.

However, the common challenges that both startup founders and enterprise leaders from the majority of our participants were around hitting timelines to ensure speed to market, available resources, and ensuring the product would resonate with customers in today’s market.

PLAN OF ATTACK

User Research

Talking to users to understand their needs, requirements, pain points, and how a product could better enable or change their day-to-day life.

Concept Designs and Prototypes

Establishing the underlying product idea and how it will be expressed visually. This includes ideating and designing the differentiators (more on this later). Then, testing those design prototypes with users to understand their reactions.

Product Market Fit, Vision, and Strategy

Determining a product's value proposition for a given market and understanding the widespread set of customers it might resonate with. Looking at the competitive landscape to identify competition and their strengths and weaknesses. Mapping user needs to business opportunities to create a vision, goals, and objectives that your product will address.

Product Definition

Identifying all the key features needed, high-level design direction, user journeys, and high-level happy path flows. This also determines the conceptual architecture, tools, technologies, and high-level operational needs to bring those key features to life.

Design and Development Sprints

Working in an iterative, sprint-like manner during the product delivery lifecycle. This allows you to focus your efforts in two to three week bursts, designing out key features and moments of the product, testing it out with users, developing those features, performing quality assurance, and then retrospectively learning from the past two weeks to improve.

Go-to Market and Marketing

A go-to-market strategy is a detailed plan for launching a new product or expanding into a new market. This helps you launch your product to the right audience, with the right messaging, at the right time.

From the Survey:
Where would you invest?

In our survey, we asked product leaders where they would invest most heavily in the product cycle. The majority of answers come in with Product Definition, followed by determining Product Market Fit and Strategy. Design and development of the product along with user testing took the middle priorities, and go-to-market and QA took 5th and 6th respectively.

Finding the right focus

Discovery + Solution
Prod
Def
Foundations +
Differentiation

30%

Feature Design
Development + User Testing

60%

Marketing + Growth

10%

30% focused on getting to Product Definition

User Research
Concept Designs and Prototypes
Product Market Fit, Vision and Strategy
Product Definition

We find this is typically the right amount of time to ensure you have an understanding of the opportunity areas and that your product addresses 1) the needs of your target market, 2) has a design and features that are differentiated from competitors, and 3) it will be able to generate your target business goals.

60% in Design, Development and User Testing sprints

The bulk of your efforts should be focused on creating an exceptional user experience for your product. This is where you bring the product to life and test that it resonates with your target audience. You always want to measure to ensure that it meets your needs.

10% of time and efforts towards Go to Market and Marketing.

Once your product is ready for showtime, you need to dedicate time to ensure it will reach your target market. You also want to validate that they understand its value and why they should engage with it.

VAlidators

Do our monetization plans make sense to drive revenue?
Will this resonate with the market?
What is the competitive landscape?
What are the key features that will drive early user adoption?

Differentiators

Domain
Experts

product
blueprint

Now that you have a strategy and your differentiators in place, it’s time to draft the entire product experience into a single document. This is a key step in the product lifecycle called product definition. 

One of the key deliverables that comes out of the product definition is the product blueprint. Your product blueprint allows you to visualize the entire product service on one page. This helps manage its complexity, including the actions and touchpoints of all the actors, key features, technical dependencies, and operational requirements.

Behind the scenes, there are several key assets that power this product blueprint: 

Goals and objectives
Priorities
High-level designs
Definition of key features
User journeys
Technical architecture and plan
Key operational dependencies
High-level roadmap

This view helps to ensure your team is aligned on the critical pieces of success.

That being said, it’s easy to go overboard with product blueprints, so don’t boil the ocean! Focus on the few critical features and components that will make a big impact for your customers.

Remember to trust in yourself and the research that has been done. Your customers don't always know what the right solution is for their wants and needs. That's why it's your job to consider their needs in the context of your product's potential and develop an appropriate blueprint that can scale in the future.

Skilled
Makers

We saw earlier that you’re going to be spending the majority of your time in the product definition/design, testing, and build phases, which means you need a talented team of skilled makers. 

This may seem obvious, but when building the right team with the right chemistry within your budget, there are a lot of factors to consider. How long will it take for the team to gel? Do you stick with who you have? When should you contract vs. hire?

Chemistry is Key to Achieving Velocity

Too often, we see companies spend big budgets hiring a ton of great developers and designers. They throw them onto a project expecting the product will be delivered fast only to find the team isn’t hitting their milestones. Why? 

Teams typically struggle to get going immediately because of differing working styles, personalities, mindsets, and honestly… sometimes ego. That’s why you shouldn’t focus on individual hires but on the team as a whole.

If you have time, budget, and desire to invest in the future culture of your company, you have to invest time to build the team dynamics. We find that it typically takes 4-5 sprints for a team to find its groove — approximately four months, or more.

If you are an early stage startup, and don’t have a lot of time (six months or less), but still want to get a product out there quickly, we recommend hiring a pre-built team of skilled makers who have launched several products together. 

The key takeaway is to not waste all of your time and money hiring. Building a successful team takes time and cycles of members working together to hit their stride. When necessary, augment with experts to help your team grow, add a skill, or just simply to outsource a function. It ultimately comes down to how you want to allocate your resources.

From the Survey:
Hires vs Contractors

Industry leaders we spoke to prioritized Engineering, Product, and Design roles as full time hires (in that order).

Research and Brand functions to be the first specialized roles that could be contracted. There is no one-size-fits-all answer: this could work for those who are racing to build quickly and already have many of their market questions answered, but could cripple a team that is in the opposite situation.

With CEOs and Execs, the most suitable roles for contracting work are Research, Brand & Design.

Accelerators

Don’t reinvent the wheel… and don’t build everything from scratch! Accelerators are existing tools and technologies you can leverage or integrate into your product.

Accelerators enable us to get new products to market faster and enhance our team's capacity to build quality into the development process and focus on solving the most important problems.

There are three main types of accelerators we leverage at MetaLab:

Design and Prototyping Tools

Some of the tools that we use to help accelerate the design process to create and test out designs, concepts, and prototypes with users include Figma, Framer.io, and even Typeform.

Figma: Design Tokens to improve styling and brand consistency in the products we build
Figma: Lokalise integrations for supporting localization in the design process
Chromatic to enable simple VQA workflows in conjunction with Storybook for component libraries and design systems

SAAS Integrations or Cloud Platforms

For development, we use many different tools and platforms on our projects to help accelerate the product development lifecycle and build products that can scale to meet customer demand.  Several of the most popular and impactful integrations and platforms used by our teams include:

The wide range of resources and services offered by Amazon Web Services allow us to architect globally scalable solutions
IaC tools like Terraform Cloud to accelerate the deployment and management of foundational architectures that we see across many different projects
For quickly enabling teams to build and deploy web prototypes and services we’ve come to adopt Vercel and Heroku for ease and simplicity
Microsoft App Center enables us to construct build and deploy workflows across multiple mobile platforms like Apple App Store and Google Play
We leverage a wide range of content management systems that allow us to quickly model data schemas and provide administrative capability including Storyblok, Sanity, Contentful, and others.
Sentry provides our engineering teams with visibility into code quality, error logs, and performance early in the development lifecycle

AI Tools

AI is everywhere these days for a reason. It’s powering brand new ways to get work done and being incorporated into almost every tool we already use to make workflows easier. From content creation to scheduling, we are seeing tools popping up for everything. Here are a few that can help accelerate product development:

Image/Video Generators: Dall-E and MidJourney (image) and Runway (video) are tools allowing for renderings based on a few lines of text as a prompt or by using another image as inspiration. Adobe Photoshop also includes a generative AI that can not only add to an image but help with the editing workflow as well.
Large Language Models: Perhaps the most popular AI tools, LLMs like ChatGPT and Google Bard have a laundry list of useful applications like content generation, researching new topics, generating code, refining copy, and much more. With the right prompts, ChatGPT can also help with generating user stories and epics at the onset of a project.
Interface Design Tools: UIzard, Galileo, and Genius can all help to create UI structures and frameworks to boost design efficiency.

There are important considerations to keep in mind when using any AI tool in a responsible way. Sensitivity of data uploaded into any of these systems and the originality of the content is a big one.

Policies and regulation with AI are still being figured out, so it’s wise to exercise caution when setting guidelines for your product teams. Leverage these tools as inspiration or starting points for copy, as pieces of a larger composite for images, or to get as specific as possible with prompts in order to generate something unique.

Feedback
mechanisms

Product development succeeds when teams develop a culture of continuous learning. This is fueled by rigorous testing, analytics, and strategic iteration during key phases of the product lifecycle.

In the discovery phase, we immerse ourselves in understanding our potential early adopters' needs and motivations (see #validators). Alongside this, we work with clients to think through solid analytics strategies. This step instills a data-centric culture from the start, setting the stage for ongoing learning and adaptation. 

By aligning qualitative user insights with a framework for quantitative data capture, we ensure the product strategy we craft will continually evolve to meet user needs.

As we pivot to the alpha and beta stages, the emphasis turns to iterative improvement. We engage early adopters in testing programs. Their first-hand experiences provides invaluable feedback to detect bugs and potential enhancements. 

This feedback, bolstered by real-time analytics data, drives our evidence-based refinement process, prepping the product to be market-fit.

By investing in this cycle of continuous learning — persistent testing, data-informed analytics, and strategic iteration — we embrace a user-centric ethos in product development. This equips our clients to not just navigate, but also thrive.

When Ravi Mehta (former CPO at Tinder/Product Director at Facebook) was working on the first iteration of his personalized coaching product, he validated it quickly with a paid offering he pieced together with a number of low-code tools.

Leveraging learnings from a community of early adopters, he partnered with MetaLab to help enhance, refine, and evolve the product into the Outpace app.

Outpace launched earlier this year. It provides guided programs for personalized career development designed to level up with the support of a one-on-one AI coach.

Revenue
drivers

We are in a post-WeWork/Theranos era of founders promising growth without showing any profit. You need to ask yourself "What do we need to show investors?" Users are great, but how is this actually going to make money?

You have to show real numbers and an actionable monetization strategy. This means outlining your marketing and growth strategies — and the mechanisms that will bring in not only revenue but profit.

Revenue strategies can vary greatly, but the following are a few of the most common buckets of digital product monetization mechanisms:

Direct Payment

One-time purchases, subscription models, pay-per-use, or any other mechanisms in which users are paying you directly for access to the product.

Advertising/Marketing Platform

Revenue generated from 3rd parties such as advertisers within the platform, commercial sponsors or partners, or marketing and selling other products.

Commercialization and Licensing

Leveraging your product, or packaged-up data, as a platform to license out to customers for their use. This can be through licensing, white-labeling, or some form of direct payment access.

Ancillary Model

Offering a main service that customers find valuable and then focusing on adding additional features and value at a cost. This can be done through bundling, cross-selling complementary products, a freemium model, or, most commonly, in-app purchases.

There are many ways to monetize a product, and this is by no means an exhaustive list. The right way is the one that will resonate with your audience, so feel free to experiment and be flexible when choosing a strategy.

We’ve been supporting Modular with the release of their new AI platform and product offerings. Early in our engagement, they asked us to design a marketing site to help them grow and segment their sales pipeline. This allowed them better understand, and target, existing and potential users. We took those early learnings to ensure the product landed with their audience and supported their revenue targets.

The product lifecycle doesn’t end with a launch, it goes far beyond. Once you begin to get a better understanding of your customers and their purchase behaviours, it’s vital to adapt, being flexible with pricing, monetization strategies, and identifying unexpected revenue drivers. 

For example, you may see that your primary offering for your SaaS tool is slowly gaining traction, but over and over customers are requesting access to an API for a specific data flow. You may be sitting on a large additional untapped revenue stream and there could be more. Meet your customers where they are!

Trusted
Advisors

It helps to consult the people who’ve been there before. There are a million people on LinkedIn who are trying to sell you a service or product that you may not need. There are critical steps that could cost you if you miss them. There are shortcuts you may not even know exist. Trusted advisors can help you navigate this and more. There is just no substitute for experience.

Find seasoned product leaders, designers, or engineers who have launched products in the past and will be familiar with the nitty-gritty details. They will have the perspective to help you find the forest through the trees. You want people on your side who can make sure you are spending your time, efforts, and money on the right things.

These are the Product Survival Kit items that we recommend to anyone who is creating and launching a product in today's climate. It's a mix of techniques, processes, people, actions and tools that we've seen provide success to many of our clients, colleagues and partners out there. But remember — each product is different, so find the mix that worst best for you. 

It may seem daunting but it is possible to successfully bring your idea or product concept to life today.  This may even be the right moment to go after it. Companies who launch useful and impactful products during economic downturns have a history of surviving and thriving. The next one could be you.

Get the recording of Jona's Collision Talk

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
This guide is based on the collective learnings of the team here at MetaLab but a special shoutout to those who helped us with the writing of this post:
- Angie Amlani, Research Director
- Anshul Sharma, Product Director
- Aaron Geiser, Engineering Director
- Mike Wandelmaier, Head of Design

We’ve all used PowerPoint. Whether it was back in grade school or something we use every day at work, we've all been lead to believe it’s a necessary evil. Yes, Powerpoint has expanded its feature set over the years but they haven't made much headway solving the fundamental issues. Templates are a beast. Versioning is a nightmare. The features you need are buried under the ones you don’t—and don’t even get me started on how to generate a chart. 

The thing about necessary evils though, is they’re often not that necessary.

All of this is why we were stoked to work with the team at Pitch who are building the “presentation tool for the Slack generation.” With intuitive features like real-time collaboration, live data integrations, asset libraries and third-party integrations (such as for stock photos), Pitch’s goal is to show the world that Keynote, MS PowerPoint and Google Slides aren’t necessary evils. 

Pitch is here to show how behind the times and needlessly complicated presentation software is.

Pitch is putting those tools on notice. Just as Slack showed how antiquated other workplace communication platforms were, Pitch is here to show how behind the times and needlessly complicated presentation software is.

Until we can unveil more of the work we’ve been doing to help Pitch take down its presentation tool opponents, we thought we'd share what we've learned while dabbling with new tools to build these new products. In the case of designing Pitch, we got to try out the new kid on the block: Figma

The design team at Pitch had already adopted Figma as their go-to design tool which presented us with a unique learning opportunity and opened our eyes to a debate we didn't know we wanted in on—Figma or Sketch?

Making molehills out of mountains

But first, a bit of background. Here at Metalab, we love Sketch. It’s been a game-changer for our product design toolkit since the Photoshop days. We also think the “if you don’t use this design tool, you’re cancelled” fights are very tired. There’s needless drama over which tool is best for the job. We believe the best tool is the one that best meets the needs of your team.

Okay, back to the project. Pitch's team had been using Figma since their inception, so we decided together that it was a good opportunity for our team to learn and expand our toolkit further. We’d heard good things about Figma but we had some reservations:

  1. Our lack of experience with Figma might influence our ability to deliver our expertise as effectively as possible.
  2. It lacked certain features that had become central to us as Sketch devotees.
  3. While there would be benefits to 24/7 client team access to our design files, we know every designer knows the anxiety that comes with premature file sharing.

Nevertheless, we dove in. Was it challenging to balance internal and external review processes and manage client team expectations? Yes. Were we surprised by how much this new-kid-on-the-block tool surpassed our expectations? Yes. Here’s what we discovered. 

Figma or Sketch?

On Collaboration

So long, Abstract file syncing. Native cloud collaboration means Figma is to designers what Google Docs is to everyone else. Design repositories finally become a thing of the past. The collaborative functionality of Figma also makes working with remote teams in the same file virtually seamless. Prototyping mode kills the need for the cumbersome Abstract + Sketch duo when it comes to presenting work. And when feedback can be shared directly in the working file, it saves time triaging InVision comments or clicking back and forth between screens. For both remote teams and client collaboration, Figma enhanced our ability to work smarter, not harder—together.

On features and functionality 

Initially, Figma’s lack of plugins was a major drawback. We’d come to rely on Sketch Plugins in our daily workflow, so could we really live without Stark, Copy to All, Symbol Swapper and our own internally developed plugins? Luckily, Figma recently launched its own set of plugins, so we didn’t have to get too far outside our comfort zone. And while both Sketch Cloud and Sketch for Teams have attempted to meet the growing demand for collaboration-first functionality, it simply wasn’t built with collaboration as a cornerstone.

On pricing 

TL;DR: there isn’t a huge difference in cost, per person, between either product. However, when you account for not needing Abstract to achieve what Figma provides out of the box, you’re essentially getting two products for the price of one. And because Figma is cloud-based, you can access your account from any machine, whereas Sketch is only accessible via licensed machines which in 2019 feels very...dated.

The verdict? It’s player’s choice.

From a learning curve perspective, Figma ended up being quite intuitive, worked in a similar manner to the tools our team already knows how to use, and the team found the documentation helpful for learning the more advanced features. Now that we know Figma well, we’re able to get others up to speed more quickly. 

Ultimately, the right tool for the job is whichever tool both the client and internal teams are most comfortable with. Some of us still prefer Sketch for various reasons, while others are Figma converts. If this post has done nothing more than pique your interest in giving this new tool a go, we’ll consider it a win. 

Moving from Sketch to Figma: A few tips

Files

Figma files are stored in the cloud and can be accessed within Figma’s file browser. By default, files you create can be found within the Drafts folder. Paid Figma plans offer the ability to organize and share files by Team and Project. Each file allows users to collaborate simultaneously and also offers automatic version history that can be easily accessed. But with all your files in the cloud, you might be asking: “Are my files stuck within Figma forever?” Nope! Figma offers the ability to export (and import) .fig files for safekeeping on your company’s archive.        

Figma shared resources

💡Handy Tip: Figma allows you to import Sketch files. Simply drag your Sketch file into Figma’s file browser.

Frames

When ramping up on Figma, Frames felt hard to understand but after a while we came to appreciate them. Frames can be thought of as Figma’s souped-up version of a Sketch Artboard. They are used to contain content and have the option to clip content that lies outside of its boundaries. Frames can be nested within each other, offer the ability to scroll within a prototype and allow you to create a custom layout grid. By default, when a Frame is resized, the content within it adapts. The way an object adapts is referred to as its Constraints. Selecting an object within a Frame will reveal the Constraints panel, which allows you to choose how your content adapts to its parent.        

Figma frames

💡Handy Tip: Want to resize your Frame without adjusting your content? Hold down the Command key while resizing.

Styles

Styles in Figma can be defined for Grid, Color, Text, and Effects. Styles are accessed from the icon made of four circles and each is treated separately. For instance, in Sketch you could define a style that includes text settings as well as color, but in Figma you would create and set text styles and color separately.

Figma style editor

💡Handy Tip: You can add a group name before your style name to automatically group styles together. For example, naming your h1 style “Headings/h1” would allow you to group all headings together within your text styles.

Components

We’ve all come to rely on Sketch Symbols and the efficiency they add to our workflow. Figma offers a similar feature, Components. Unlike Sketch’s symbol page, master components can live anywhere within your file. Rather than relying on an overrides panel, instances of a component are adjusted in-line. Need to edit text? Simply click into the text field of the component and edit the content.

Figma Components

💡Handy Tip: Like Sketch, Figma allows for slash-separated naming, which will automatically group your components (e.g. “Atoms/Buttons/Primary Button”).

Libraries

Figma’s Team Libraries allow you to publish components that can be shared between projects and individual files. When publishing a library you can choose which specific components will be shared. Libraries can be linked and accessed from the Assets tab, which lives next to the Layers tab.

Figma sharing library

💡Handy Tip: If you’re working on a library component and want to ensure it doesn’t get published by accident, name it with a period at the beginning and it will be ignored.

Keyboard Shortcuts

Most keyboard shortcuts are similar when moving from Sketch to Figma, but there are minor differences. Custom shortcuts are not yet supported within Figma, but you can still create custom shortcuts from within the Keyboard settings in macOS System Preferences.

Figma keyboard shortcuts

💡Handy Tip: See all Figma’s keyboard shortcuts by pressing ‘control+shift+?’

Celebrate little wins
Embrace the scroll
Coach them though big ideas
Embrace the scroll
...make sure anyone can use it
Give them one task at a time
Teach by example
Create a 'consumer-friendly' feel
Focus on the most common user needs, but...
Start with mobile
Principles we
can use today
Share:
Twitterfacebookemail