Scribd
Upload
118 views

FIGMA

FIGMA is a popular web-based collaborative design tool that allows users to create user interfaces and prototypes. It offers real-time collaboration, interactive prototyping features, and is accessible from any browser. FIGMA has a robust free version and paid subscription plans. Plugins expand its functionality for tasks like wireframing, design systems, and more. Wireframes created in FIGMA provide a basic visual structure to represent a website or app layout before final design. Landing pages focus users on a single call-to-action like signing up or purchasing, whereas regular website pages provide general information and multiple calls-to-action.

Uploaded by

Cess
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
118 views

FIGMA

FIGMA is a popular web-based collaborative design tool that allows users to create user interfaces and prototypes. It offers real-time collaboration, interactive prototyping features, and is accessible from any browser. FIGMA has a robust free version and paid subscription plans. Plugins expand its functionality for tasks like wireframing, design systems, and more. Wireframes created in FIGMA provide a basic visual structure to represent a website or app layout before final design. Landing pages focus users on a single call-to-action like signing up or purchasing, whereas regular website pages provide general information and multiple calls-to-action.

Uploaded by

Cess
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

FIGMA

Introduction

Peña, Mary Angeneth


What is FIGMA?
A popular browser-based, collaborative user interface design tool, used in
industries worldwide to create dynamic and interactive prototypes.

Versatile web design tool that enables real-time collaboration

Provide user with the ability to add functionalities including text manipulation,
color changes, image adjustments, hovering, scrolling, and animation.

Highly accessible and can be operated from any browser

 Offers numerous pricing options, including robust free version and various in-
depth paid subscription plans
CO-CREATE IN MAKE
ONE SPACE DESIGNS FEEL
REAL
BRING DESIGN SCALE DESIGN
& DEV &
CLOSER DEVELOPMEN
ALLIGN YOUR T
TEAM
Short HISTORY Bridging Code and Design
We believed in embracing concepts from
- Launched beta in 2015 engineering and design, and taking the best
of both worlds.
- Co-Founder & CEO – Dylan Field

Opening up design Design: Meet the internet


“I’ve seen firsthand how working in a Since day one, we believed that all software
collaborative digital space moves teams from a should be online, real-time, and collaborative
mindset of ‘my ideas’ to ‘our ideas’. This requires
a radical shift – a level of trust and transparency
that many of us are still catching up to. In many Beyond multiplayer
ways, design is deeply personal, and opening up We launched FIGMA community as a space
that work to others to build and remix can feel like for anyone to publish their own files, or
opening up a part of yourself” remix and learn from others
FIGMA
PLUGINS
Figma’s plugin library offers a wide range of
plugins for different use cases, including design
systems, design tokens, wireframing, resource
collections, and more.
Best FIGMA PLUGINS
 WireFrame Best for creating wireframes quickly
 Illustrations Best for free illustrations
 ProtoPie Best for turning your Figma designs into high-fidelity prototypes
 PitchDeck
Presentation Studio Best for creating pitch decks

 Autoflow Best for establishing user flows


 UIHUT Best for finding design resources
 Draw Connector Best for connecting layers
 TinyImage
Compressor Best for exporting compressed image files
Best FIGMA PLUGINS
 Blush Best for creating and customizing illustrations
 TokensStudio Best for handling complex design systems
 ColorWell Best for mixing colors in your designs
 Mockuuups Studio Best for viewing designs in device mockups
 LottieFiles Best for adding animations to your Figma designs
 LoremIpsum Best for adding sample text to your Figma designs
 Unsplash Best for adding images to your Figma designs
 Icons8 Best for adding graphics to your Figma designs
 Image Tracer Best for converting images into vector layers
Best FIGMA PLUGINS
 Iconscout
Best for adding a wide range of design assets to your Figma
designs

 Flaticon
Best for adding icons to your Figma designs

 RemoveBG
Best for mixing colors in your designs

 Inconify
Best for adding icons to your Figma designs
FIGMA
WIREFRAMES
A wireframe is a simple visual guide that
represents the skeletal framework of a website or
digital product. Think of it as a blueprint for your
final design.
LANDING PAGE
 A landing page is a webpage designed to persuade users to take one specific
action. For example, having users sign up for a newsletter, purchase a product, or
RSVP for an event.

 Users typically arrive at landing pages via a pay-per-click advertising campaign.


But they may also find your landing page through your homepage, social media
posts, organic search results, and email campaigns.

 Like your homepage, landing pages are often the first experience visitors have
with your website. But homepages and landing pages serve different purposes.
Homepage vs. Landing Page
 Homepages contain general information about your
company. They’re a gateway to other pages on your site
where the visitor can learn more.

 Landing pages, on the other hand, are standalone pages


focused on driving conversions.
Homepage vs. Landing Page
 Homepages contain general information about your
company. They’re a gateway to other pages on your site
where the visitor can learn more.

 Landing pages, on the other hand, are standalone pages


focused on driving conversions.
Homepage vs. Landing Page
 Homepages may also have multiple calls to action (CTAs).
Encouraging visitors to browse the site’s blog, check out its
products or services, or sign up for a newsletter

 In contrast, a landing page usually has a single, focused CTA


designed to encourage visitors to take a specific action. Such as
making a purchase, filling out a form, or downloading a resource.
Any other CTAs are usually duplicates or close variations of the
primary CTA.
Regular website vs. landing pages
 Regular website pages (like blogs, help articles, a pricing page, a careers
page, etc.) are typically designed to provide visitors with information about
your business. Rather than to drive a specific action or conversion like
landing pages.
 Regular website pages may also include multiple CTAs. While landing
pages contain just one. For example, a blog post may have CTAs that
encourage users to sign up for a newsletter and check out related products
or services.
 Meanwhile, a landing page will drive visitors toward a single, focused action.
How Landing Pages Work?
The landing page should be your visitor’s last step before they convert. That is, when they become a
customer or a lead.)

Landing pages are great for:


 Getting email newsletter signups
 Selling a product or driving pre-orders for it
 Distributing marketing material, like ebooks and catalogs
 Linking users to an app download
 Registering users for an event
 Scheduling users for a product demonstration or sales call

Landing pages are not so great for:


 Presenting several different products or services
 Linking to other pages on your website
 Telling your company story
EXAMPLES

You might also like