Figma Sites: From Ui Design to No-Code Website
Jeremy Mura, Brand and Web Designer
Ve esta clase y miles más
Ve esta clase y miles más
Lecciones en esta clase
-
-
1.
Trailer
1:11
-
2.
Figma Sites Workspace
3:53
-
3.
Design Desktop Version Layout
3:16
-
4.
Design: Text Styles and Navbard Pt.1
4:42
-
5.
Design: Hero and Features Pt.2
6:08
-
6.
Design: Benefits and Footer Pt.3
5:14
-
7.
Add interactions (logo slider, hover effects)
5:20
-
8.
Make Mobile Responsive
4:49
-
9.
Publish Your Website
0:59
-
10.
Class Project and Resources
0:38
-
-
- --
- Nivel principiante
- Nivel intermedio
- Nivel avanzado
- Todos los niveles
Generado por la comunidad
El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.
23
Estudiantes
1
Proyecto
Acerca de esta clase
Design and ship professional websites Figma Sites, the brand-new no-code website builder baked right into Figma. Announced at Config 2025, Sites lets you design, prototype and publish—in a single tab.
This crash course is perfect for beginner web designers and creatives who’d rather spend time crafting ideas than wrangling HTML. Whether you’re freelancing, job-hunting, or simply want a slick place to showcase your work, you’ll walk away with a fully-functional, responsive portfolio site—no hand-off, no headaches.
Here’s What You’ll Learn
✨ Launch in One Tool
Design, tweak, and publish directly from Figma’s canvas with one-click hosting and a live preview.
✨ Responsive by Default
Harness Auto Layout and breakpoint presets so your portfolio looks perfect on every screen, from 4K monitors to phones.
✨ AI-Powered Workflow
Peek at the new “Make” AI features that generate production-ready interaction code from plain-language prompts—no dev required.
✨ Publish in Minutes
Connect a custom domain or publish to staging site.
✨ Work Smarter
Use pre built templates inside figma to build your website faster.
By the end of class you’ll have the confidence—and the workflow—to ship beautiful portfolio sites on your own, without waiting on developers.
Conoce a tu profesor(a)
About Jeremy
Jeremy Mura is an award-winning (LogoLounge Book 12) logo designer, Youtuber and creator from Sydney, Australia.
He has been in the design industry for 10 years working for both small and big brands worldwide. He has worked for brand names such as Disneyland Paris, Adobe Live, Macquarie Business School, American Express and Telstra.
He has over 6M Views on Youtube with over 650 videos uploaded, has taught over 80k Students on Skillshare and has grown a following of 100k on Instagram.
Jeremy has been featured on Adobe Live, LogoLounge Book 12, Skillshare, Conference, Creative Market.
You can follow him on Youtube, Instagram or get free resources on Jeremymura.com
Ver perfil completoProyecto de clase práctica
Class Project Resources
Resources HERE.
1. Design & Publish Your Portfolio Landing Page or a product of your choosing
Objective: Craft and launch a personal portfolio homepage that tells your story and showcases your best work.
Challenge: Combine engaging visuals, clear typography, and intuitive navigation to leave a lasting first impression.
2. Make It Responsive
Objective: Ensure your site shines on desktop, tablet, and mobile using Figma Sites’ built-in breakpoints.
Challenge: Test, iterate, and fine-tune until every interaction feels smooth on every device.
Class Discussion
Post WIP screenshots, prototypes, and final URLs in the project gallery—I’ll jump in with feedback and tips. Got questions? Drop a comment. And don’t forget to check the Resources tab for handy links, inspiration, and keyboard-shortcuts that speed things up.
Valoración de la clase
¿Por qué unirse a Skillshare?
Mira las galardonadas Skillshare Originals
Cada clase tiene lecciones cortas y proyectos prácticos
Tu membresía apoya a los profesores de Skillshare
Aprende desde cualquier lugar
Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.
Clases relacionadas
