Creá tu primer UI Kit en Figma from Coursera

What's inside

Syllabus

Visión general del proyecto

Al final de este proyecto habrás creado tu primer UI kit en Figma siguiendo la estructura de Atomic Design para poder aplicar en tus futuros trabajos. A lo largo de estas tareas, podrás diseñar tus primeros componentes bajo la lógica que propone Atomic Design, preparar los componentes necesarios para crear un UI Kit, y finalmente podrás aplicarlo en el diseño y desarrollo de un proyecto real. Este proyecto está guiado para diseñadores intermedios que desean o están comenzando a introducirse en el mundo de Diseño UX/UI, ya que partiremos de una base de conocimientos básica sobre el diseño de interfaces y sobre el uso de la herramienta Figma. Además, en Figma utilizaremos herramientas para la creación de componentes, y descargamos plugins para agilizar nuestro trabajo. Este proyecto les proporcionará la capacidad de comprender la necesidad y organización de Atomic Design, tanto como sus beneficios aplicados en un proyecto real. Además, profundizaremos en el uso de Figma y todas sus capacidades para el uso cotidiano en un ambiente de diseño. Figma es una herramienta líder en el diseño de interfaces. Funciona como un editor de vectores e ilustraciones, además de generar prototipos animados y funcionales en cualquier pantalla que necesites, además de tener características off-line y está habilitada para Windows y MacOS.

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Consigue un conocimiento básico de Figma y conceptos de UX UI Design antes de empezar este curso

Perfecciona tus habilidades en Figma a través del uso de herramientas para la creación de componentes y plugins para agilizar tu trabajo

Domina la lógica de diseño de Atomic Design para crear y organizar tus componentes

Crea un UI Kit para aplicarlo en tus futuros proyectos de diseño de interfaces

Comprende la necesidad y organización de Atomic Design

Aprende a aplicar Atomic Design en un proyecto real

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 Creá tu primer UI Kit en Figma with these activities:

Gather inspiration for UI Kits

Show steps

Broaden your horizons by collecting inspiring UI Kits for future reference.

Show steps

Visit UI Kit inspiration websites
Organize your inspiration into folders

Primer on atomic design

Show steps

Review the core ideas of Atomic Design and the organizational structure it provides.

Browse courses on Atomic Design

Show steps

Read an overview of Atomic Design
Sketch out a simple digital interface using atomic design principles

Practice creating UI components

Show steps

Sharpen your skills in creating individual UI components.

Show steps

Gather examples of UI components
Create a library of your own UI components
Use your UI components to build a simple interface

Six other activities

Expand to see all activities and additional details

Show all nine activities

Brainstorm a UI Kit for an existing website

Show steps

Harness your understanding of Atomic Design to plan a UI Kit for an existing website.

Show steps

Choose an existing website
Identify the different components of the website
Organize the components using Atomic Design principles

Create a simple Figma prototype

Show steps

Build and refine your skills in the use of Figma and its prototyping tools.

Browse courses on Figma

Show steps

Install Figma on your device
Create a new Figma prototype
Create a simple interface
Create a simple interaction
Test your prototype

Discuss UI Kit development with classmates

Show steps

Engage with fellow students to exchange ideas and best practices in UI Kit development.

Show steps

Join a study group or online forum
Discuss your UI Kit projects and ideas
Share your knowledge and learn from others

Create a UI Kit with Figma plugins

Show steps

Learn how to use Figma plugins to enhance your UI Kit creation process.

Browse courses on Figma

Show steps

Research different Figma plugins
Install a few plugins
Create a UI Kit with the plugins

Contribute to Figma UI Kit open-source projects

Show steps

Make practical use of your skills by contributing to the Figma open-source community.

Browse courses on Figma

Show steps

Find an open-source Figma UI Kit project
Make a small contribution to the project
Share your contribution with the community

Create a UI Kit for a personal project

Show steps

Apply your newfound UI Kit development skills to a personal project.

Show steps

Define the scope of your project
Create a design for your project
Develop a UI Kit for your project
Implement your project
Test your project

Career center

Learners who complete Creá tu primer UI Kit en Figma will develop knowledge and skills that may be useful to these careers:

User Interface (UI) Designer

A UI Designer may use the design system taught in this course to create prototypes for digital products. Their work may include designing websites, mobile apps, and software interfaces. This course may help them understand how to create a consistent and cohesive user experience across different platforms.

See salaries and explore the career path for User Interface (UI) Designer

UX Designer

A UX Designer may use the design system taught in this course to create user-centered designs for digital products. Their work may include researching user needs, creating wireframes and prototypes, and conducting user testing. This course may help them understand how to create a user experience that is both functional and enjoyable.

See salaries and explore the career path for UX Designer

Front-End Developer

A Front-End Developer may use the design system taught in this course to implement the visual and interactive elements of a website or application. Their work may include writing HTML, CSS, and JavaScript code. This course may help them understand how to create a user interface that is both visually appealing and functional.

See salaries and explore the career path for Front-End Developer

Interaction Designer

An Interaction Designer may use the design system taught in this course to create interactive prototypes and experiences for digital products. Their work may include designing the flow of a website or application, and creating animations and transitions. This course may help them understand how to create a user experience that is both engaging and intuitive.

See salaries and explore the career path for Interaction Designer

Design Researcher

A Design Researcher may use the design system taught in this course to conduct user research and gather insights about their needs. Their work may include interviewing users, conducting surveys, and analyzing data. This course may help them understand how to create a user experience that is both effective and efficient.

See salaries and explore the career path for Design Researcher

Visual Designer

A Visual Designer may use the design system taught in this course to create the visual identity of a brand or product. Their work may include designing logos, typography, and color palettes. This course may help them understand how to create a visual language that is both consistent and memorable.

See salaries and explore the career path for Visual Designer

Product Manager

A Product Manager may use the design system taught in this course to create a roadmap for a new product or feature. Their work may include defining the product's vision, setting priorities, and tracking progress. This course may help them understand how to create a product that meets the needs of users and the business.

See salaries and explore the career path for Product Manager

Information Architect

An Information Architect may use the design system taught in this course to create the structure and organization of a website or application. Their work may include defining the site map, creating navigation systems, and organizing content. This course may help them understand how to create a user experience that is both easy to use and find.

See salaries and explore the career path for Information Architect

Service Designer

A Service Designer may use the design system taught in this course to create a service that meets the needs of users. Their work may include researching user needs, designing service blueprints, and evaluating service delivery. This course may help them understand how to create a service that is both effective and efficient.

See salaries and explore the career path for Service Designer

Content Designer

A Content Designer may use the design system taught in this course to create written content for websites, applications, and other digital products. Their work may include writing copy for buttons, menus, and help files. This course may help them understand how to create content that is both clear and concise.

See salaries and explore the career path for Content Designer

Motion Designer

A Motion Designer may use the design system taught in this course to create animations and transitions for digital products. Their work may include designing animations for logos, buttons, and other UI elements. This course may help them understand how to create animations that are both visually appealing and functional.

See salaries and explore the career path for Motion Designer

Graphic designer

A Graphic Designer may use the design system taught in this course to create visual content for websites, applications, and other digital products. Their work may include designing logos, icons, and illustrations. This course may help them understand how to create visual content that is both visually appealing and consistent with the overall design system.

See salaries and explore the career path for Graphic designer

Design Engineer

A Design Engineer may use the design system taught in this course to create and build digital products. Their work may include designing and developing user interfaces, writing code, and testing products. This course may help them understand how to create a product that is both functional and user-friendly.

See salaries and explore the career path for Design Engineer

UX Researcher

A UX Researcher may use the design system taught in this course to conduct user research and gather insights about their needs. Their work may include interviewing users, conducting surveys, and analyzing data. This course may help them understand how to create a user experience that is both effective and efficient.

See salaries and explore the career path for UX Researcher

Product Designer

A Product Designer may use the design system taught in this course to create a product that meets the needs of users. Their work may include researching user needs, designing prototypes, and conducting user testing. This course may help them understand how to create a product that is both useful and desirable.

See salaries and explore the career path for Product Designer