OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Course image
Course image
Coursera logo

Crie designs e protótipos de alta fidelidade com Figma

Miguel Revesso Teixeira

Neste projeto guiado você criará uma estrutura wireframe de alta fidelidade de uma landing page, ideal para analisar a estrutura da página, a experiência e interface de usuário, para facilitar o processo de construção ao programar.

Read more

Neste projeto guiado você criará uma estrutura wireframe de alta fidelidade de uma landing page, ideal para analisar a estrutura da página, a experiência e interface de usuário, para facilitar o processo de construção ao programar.

O produto final terá a função de representar de forma detalhada o resultado final de uma landing page ou website, ajudando também na relação design-desenvolvimento, ainda mais quando Figma facilita o código de estilo.

Você aprenderá como trabalhar na Figma usando suas diferentes ferramentas e complementos. Esta ferramenta está focada na criação de protótipos e projetos, mas também tem as funções necessárias para desenvolver outros tipos de projetos.

O trabalho em equipe também é facilitado com Figma, pois possui ferramentas que facilitam a colaboração entre várias pessoas.

Traduzido com a versão gratuita do tradutor - www.DeepL.com/Translator

Enroll now

Three deals to help you save

We found three deals and offers that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.
Valid until December 12
Annual Subscription Savings
Unlock programs from Google, Microsoft, and IBM and join 77% of learners who reported positive career outcomes.
Only $239!
Valid for a limited time only
Future-proof your career
Access O'Reilly books, live events, courses, and more. Save with an annual subscription.
Take
15%
off

What's inside

Syllabus

Visão Geral do Projeto
Neste projeto guiado você vai criar um protótipo de alta fidelidade de uma Landing Page. Ideal para analisar a estrutura da página, a experiência e interface de usuário, facilitando o processo de construção na hora de programar.

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Ensina conceitos de desenvolvimento para o Figma, uma ferramenta voltada para criação de protótipos e projetos
Aulas guiadas, passo a passo, que facilitam o processo de aprendizado
Ensina como trabalhar com as diferentes ferramentas e recursos do Figma, desenvolvendo habilidades técnicas
Aborda o assunto de forma detalhada, auxiliando na compreensão de conceitos e na aplicação prática
Otimizado para aprendizado colaborativo, facilitando o trabalho em equipe no design e desenvolvimento de Landing Pages

Save this course

Save Crie designs e protótipos de alta fidelidade com Figma to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Crie designs e protótipos de alta fidelidade com Figma with these activities:
Review HTML and CSS Basics
Refresh your foundational understanding of HTML and CSS to ensure you are well-prepared for this course's content.
Browse courses on HTML
Show steps
  • Review HTML syntax and structure.
  • Practice writing simple HTML documents.
  • Review CSS syntax and selectors.
  • Practice writing CSS stylesheets to style HTML elements.
Explore Figma Resources and Plugins
Expand your knowledge of Figma's capabilities by exploring resources and plugins that enhance its functionality and streamline your workflow.
Browse courses on Figma
Show steps
  • Research and install Figma plugins that address your specific needs.
  • Explore Figma's community forum and documentation for tips and best practices.
  • Attend webinars or workshops on Figma to learn from experts.
Practice Figma Design Exercises
Reinforce your grasp of Figma's tools and features through practical design exercises, enhancing your design skills.
Browse courses on Figma
Show steps
  • Follow online tutorials or courses on Figma.
  • Complete Figma design challenges and exercises.
  • Experiment with different Figma features and plugins.
Five other activities
Expand to see all activities and additional details
Show all eight activities
Create a Simple Landing Page
Apply your understanding of HTML and CSS to build a simple landing page in Figma, giving you hands-on experience with the design process.
Browse courses on Landing Page
Show steps
  • Plan the layout and structure of your landing page.
  • Design the visual elements of your landing page using Figma.
  • Implement your landing page's design using HTML and CSS.
  • Test and refine your landing page for usability and responsiveness.
Attend Figma User Meetups or Online Events
Connect with other Figma users, designers, and professionals to exchange knowledge, share experiences, and learn from their insights.
Browse courses on Figma
Show steps
  • Identify local or online Figma user groups or meetups.
  • Attend Figma conferences or webinars to engage with the broader Figma community.
  • Join Figma-related discussion forums or online communities.
Participate in a Figma Design Workshop
Gain hands-on experience and guidance from experts by participating in a Figma design workshop, enhancing your skills and knowledge.
Browse courses on Figma
Show steps
  • Research and identify Figma design workshops that align with your interests.
  • Register and attend the workshop.
  • Actively participate in the workshop activities and discussions.
  • Apply the knowledge and techniques learned in the workshop to your own design projects.
Create a Figma Design Tutorial or Resource
Solidify your understanding of Figma by creating a tutorial or resource that shares your knowledge and helps others learn about the software.
Browse courses on Figma
Show steps
  • Identify a specific Figma topic or technique that you can teach effectively.
  • Plan and outline the content of your tutorial or resource.
  • Create visual or written materials to convey your message.
  • Publish and share your tutorial or resource with the Figma community.
Contribute to Figma's Open Source Projects
Engage with the Figma community and contribute to the software's development by participating in its open source projects.
Browse courses on Figma
Show steps
  • Explore Figma's open source repositories on platforms like GitHub.
  • Identify issues or areas where you can contribute your skills.
  • Fork the repository, make your changes, and submit a pull request.
  • Collaborate with the Figma community to improve the software.

Career center

Learners who complete Crie designs e protótipos de alta fidelidade com Figma will develop knowledge and skills that may be useful to these careers:
UI Designer
A UI Designer is responsible for determining how an application should look. UI Designers implement the latest design trends and other creative techniques to maximize user engagement and enhance website functionality. This course teaches Figma, a prototyping and designing tool that can be used to create high-quality landing pages for websites and applications. Learning Figma may help a UI Designer create more impressive portfolios.
See salaries and explore the career path for UI Designer
UX Designer
UX Designers develop websites and applications with a focus on user experience. They conduct user research, create prototypes, and implement designs that make web pages easy to understand and navigate. Familiarity with prototyping and web design, as taught in this course, may be helpful for someone looking to become a UX Designer.
See salaries and explore the career path for UX Designer
Front-End Developer
Front-end developers convert designs created by UI/UX designers into functioning websites and web applications. They use their knowledge of HTML, CSS, and JavaScript to create user interfaces that deliver a high-quality user experience. This course teaches Figma, a prototyping tool that can help front-end developers create a bridge between their designs and code, making the development process more efficient.
See salaries and explore the career path for Front-End Developer
Product Designer
Product Designers oversee the entire design process, from initial concept to final product. They conduct user research, create prototypes, and test designs to ensure that products meet user needs and are easy to use. This course teaches Figma, a prototyping tool that is commonly used by Product Designers to create interactive prototypes.
See salaries and explore the career path for Product Designer
Graphic designer
Graphic Designers create visual concepts using digital tools to communicate ideas that inspire, inform, and captivate consumers. This course teaches Figma, a design and prototyping tool that can help Graphic Designers create high-quality designs for web and print.
See salaries and explore the career path for Graphic designer
Interaction Designer
Interaction Designers design interactive elements for websites and applications. They focus on the user experience, creating interactions that are intuitive and engaging. This course teaches Figma, a prototyping tool that can help Interaction Designers create clickable prototypes that demonstrate how a user would interact with a website or application.
See salaries and explore the career path for Interaction Designer
Web Developer
Web Developers use their knowledge of programming languages and design principles to create and maintain websites and applications. This course teaches Figma, a prototyping tool that can help Web Developers visualize and create the user interface for their websites and applications.
See salaries and explore the career path for Web Developer
Software Engineer
Software Engineers apply engineering principles to the design, development, deployment, and maintenance of software systems. This course teaches Figma, a prototyping tool that can help Software Engineers bridge the gap between design and development by providing a way to create interactive prototypes that can be shared with stakeholders.
See salaries and explore the career path for Software Engineer
Project Manager
Project Managers plan, organize, and execute projects to achieve specific goals. This course teaches Figma, a prototyping tool that can help Project Managers visualize and communicate project plans and timelines to stakeholders.
See salaries and explore the career path for Project Manager
Marketing Manager
Marketing Managers develop and execute marketing campaigns to promote products and services. This course teaches Figma, a prototyping tool that can help Marketing Managers create landing pages and other marketing materials.
See salaries and explore the career path for Marketing Manager
Business Analyst
Business Analysts work with stakeholders to understand their business needs and develop solutions that meet those needs. This course teaches Figma, a prototyping tool that can help Business Analysts create process flows and other visual representations of business processes.
See salaries and explore the career path for Business Analyst
Technical Writer
Technical Writers create documentation for software, hardware, and other technical products. This course teaches Figma, a prototyping tool that can help Technical Writers create interactive demos and other visual aids to illustrate technical concepts.
See salaries and explore the career path for Technical Writer
Data Analyst
Data Analysts collect, analyze, and interpret data to help businesses make informed decisions. This course teaches Figma, a prototyping tool that can help Data Analysts create data visualizations and other visual representations of data.
See salaries and explore the career path for Data Analyst
Sales Manager
Sales Managers lead and motivate sales teams to achieve revenue goals. This course teaches Figma, a prototyping tool that can help Sales Managers create sales presentations and other marketing materials.
See salaries and explore the career path for Sales Manager
Customer Success Manager
Customer Success Managers work with customers to ensure that they are satisfied with products and services. This course teaches Figma, a prototyping tool that can help Customer Success Managers create onboarding materials and other resources for customers.
See salaries and explore the career path for Customer Success Manager

Reading list

We've selected seven books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Crie designs e protótipos de alta fidelidade com Figma.
Atomic Design
Save
Este livro fornece uma base sólida nos princípios do Design Atômico, que são essenciais para criar sistemas de design escaláveis e consistentes. Ele ajuda os alunos a entender como decompor interfaces em componentes reutilizáveis, facilitando o gerenciamento e a manutenção do design.
Atomic Design
Paperback
Check
Atomic Design
Kindle Edition
Check
Cover image
CSS Animations and Transitions for the Modern Web
Save
Este livro aborda os fundamentos do design de interface para web, cobrindo tópicos como arquitetura da informação, tipografia, cor e layout. Ele fornece orientações práticas para criar interfaces de usuário intuitivas e esteticamente agradáveis.
(English) CSS Animations and Transitions for the Modern Web
Kindle Edition
$$
Design Systems
Save
Este livro é voltado para desenvolvedores que desejam entender e implementar sistemas de design. Ele cobre tópicos como os benefícios dos sistemas de design, como criá-los e mantê-los e como usá-los em projetos de desenvolvimento.
(English) Design Systems (Smashing eBooks)
Kindle Edition
$
(中文) System design: a systematic method of digital...
Paperback
$$
(日本語) Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド...
Kindle Edition
$$
Cover image
Designing with Video
Save
Este livro fornece orientação sobre como conduzir testes de usabilidade e criar protótipos para avaliar e melhorar o design de produtos digitais.
(English) Designing with Video: Focusing the user-centred...
Hardcover
$$$
Cover image
Innovation by Design
Save
Este livro fornece uma introdução ao Design Thinking, uma abordagem criativa para resolução de problemas. Ele discute tópicos como empatia, ideação, prototipagem e teste.
(English) Innovation by Design: How Any Organization Can...
Paperback
$$
(English) Innovation by Design: How Any Organization Can...
Kindle Edition
$
Cover image
Don't Make Me Think, Revisited
Save
Este livro fornece orientações práticas sobre como projetar sites fáceis de usar. Ele discute tópicos como usabilidade, arquitetura da informação e navegação.
(English) Don't Make Me Think, Revisited: A Common Sense...
Paperback
$$
(English) Don't Make Me Think, Revisited : A Common Sense...
Hardcover
$$$
(English) Don't Make Me Think, Revisited: A Common Sense...
Kindle Edition
$$
Cover image
Things That Make Us Smart
Save
Este livro clássico discute os princípios do design centrado no usuário. Ele fornece insights sobre como projetar produtos e interfaces que sejam fáceis de usar, agradáveis e seguros.
(English) Things That Make Us Smart: Defending Human...
Kindle Edition
$

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Here are nine courses similar to Crie designs e protótipos de alta fidelidade com Figma.
Crie wireframes digitais de baixa fidelidade com Figma
Most relevant
Next.js e React - Curso Completo - Aprenda com Projetos
Most relevant
Gerenciamento de projetos Agile
Most relevant
Satisfação garantida: desenvolva a fidelidade de clientes
Most relevant
Negociações de sucesso: estratégias e habilidades...
Most relevant
Criar wireframes e protótipos de baixa fidelidade
Most relevant
Design Thinking para Inovação
Most relevant
Redes Ecológicas
Most relevant
Curso de Inglês para Tecnologia da Informação
Most relevant
Course image
Effort
1 Hora
Level
Introductory
Via
Coursera
Institution
Coursera Project Network
Instructor
Miguel Revesso Teixeira
Language
Português
Good to know
Ensina conceitos de desenvolvimento para o Figma, uma ferramenta voltada para criação de protótipos e projetos
Aulas guiadas, passo a passo, que facilitam o processo de aprendizado
Ensina como trabalhar com as diferentes ferramentas e recursos do Figma, desenvolvendo habilidades técnicas
Aborda o assunto de forma detalhada, auxiliando na compreensão de conceitos e na aplicação prática
Otimizado para aprendizado colaborativo, facilitando o trabalho em equipe no design e desenvolvimento de Landing Pages
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser