Design Process Zero to One: From Planning to Design and Delivery with Figma

Once you’ve mastered the basics of CSS, use Grid to freely create complex web layouts. Practice step by step—from the core concepts of CSS Grid to analyzing Figma designs and implementing them on the web—and develop the layout design skills needed for professional web publishing.

From basics to practical application, an all-in-one UI design class mastering everything with Figma! Master essential features like Auto Layout and Components, along with responsive design, efficient handoff, and collaboration skills for real-world work. Start now and upgrade your design capabilities to the next level!

This course provides UX principles and practical know-how necessary for planning and designing AI products. We will explore user-value-centered AI utilization methods, UX planning and design methods using AI, core UX principles and theories learned through everyday design cases, and UX research and data analysis methods for providing a better experience.

The ability to build a design system is no longer an option but an essential competency for employment and practical work. In this course, you can develop professional skills starting from the basics, covering everything from design system concepts to Figma Variables, tokens, components, and responsive design. In the comprehensive practical project, you will build a design system that encompasses mobile, tablet, and desktop, and create service pages. If you are a beginner, completing this course will give you a competitive edge that makes interviewers feel you are "ready for immediate deployment." If you are a developer or a solo entrepreneur, you will be able to lay the foundation for building your own design system and create consistent, high-quality products.

There are app/web ideas that they want to implement, but they are at a loss as to where to start due to their lack of experience in app service planning, startup representatives who want to learn planning systematically in a short period of time, and junior planners who want to learn the planning work process and know-how of experienced planners. We will teach you a new planning method using Figma and the work skills of a PM with 17 years of experience from the basics so that you can become an expert.

Have you taken your first steps into web development? We have a special offer for those who are just getting started with HTML, CSS, and javascript! Do you want to create a mobile website to keep up with the mobile era, but are unsure where to begin? Don’t worry. By analyzing and implementing a Figma mobile design yourself, you’ll naturally learn the fundamentals of responsive web development. Based on a sophisticated mobile design, you’ll explore everything from subtle interactions that capture users’ attention to techniques that adapt perfectly to a variety of screen sizes. We’ll share our know-how to help your website shine on every device. Shall we get started together?

If you’ve learned the basics of HTML/CSS/JavaScript, it’s time to bring them together into a complete website. Analyze a Figma design, implement it with HTML/CSS, then add JavaScript (jQuery) interactions, make it responsive, and deploy it—experiencing the full process of professional web publishing.

Even if you are not a major or a designer, you will learn how to directly create and modify web UIs, proposals, and design systems using Claude Design and Figma. To ensure immediate application in practice, the course proceeds step-by-step with a focus on hands-on practice—covering everything from the differences between Claude Code and Claude Design to installation, plugin utilization, component-based UI production, design modification, and methods for applying them to live services. This lecture is designed to help developers, planners, and marketers who found design tools difficult to experience rapid result-making through AI and component-based workflows.

In this course, you will take away a “homepage template with reservation function” that can be used for real businesses.

Do you have a basic understanding of HTML, CSS, and JavaScript (jQuery)? But are you unsure how to build an entire website? If so, challenge yourself to implement a shopping mall homepage by referring to a design. We’ll show you how to build a website by studying a completed design and understanding the project’s intent and detailed design elements.

Did design seem difficult and Figma look complicated? We are now in an era where even non-designers can create screens themselves! From basic functions like shapes, text, and masks to background removal, AI image generation, and automated UI creation—learn how to naturally integrate Figma's AI features into your professional workflow. From creating landing pages to configuring shopping mall UI screens, experience a practical way to use Figma that allows you to complete results without a designer's help. Point 1. You can create screens yourself just by mastering Figma's core functions - Practice-oriented learning of essential drawing functions such as frames, shapes, text, and masks - Experience completing a full project by creating every section of a landing page from start to finish Point 2. Drastically reduce work speed using Figma AI - Naturally utilize AI features like background removal, image generation, and layer organization within the workflow - Focused on application methods connected to actual design tasks, not just simple feature introductions Point 3. Acquire practical design sense by creating shopping mall UIs - Create UI screen sets using Auto Layout, Components, and the Make Designs feature - Learn practical skills that enable non-designers to design and complete screens on their own

You can enhance your mobile web production skills, which are the most competitive assets for publisher employment and practical publishing work. You will be able to solidify almost all production methods and know-how required to create mobile webs as a publisher. In particular, to cover much of the design ability required of publishers and developers these days, we have provided detailed explanations of the process of working on mobile web UI design using Figma. A key strength of this mobile web publishing course is the detailed instruction on how to create HTML wireframes for every single page. Through this lecture, your ability to create HTML wireframes will improve significantly. In mobile web publishing, you will acquire practical skills comparable to real-world work by learning how to perfectly adjust layouts for mobile and tablet devices using CSS variables (Var). You will fully develop intermediate-to-advanced practical CSS skills, centered around Flex layouts.

In the AX era where AI technology and UX design converge, what strategies should product teams use to design customer experiences? A 17-year veteran senior researcher from a major corporation and knowledge sharer with a PhD in HCI will share insights based on the latest trends, use cases, and research findings.

Learn how to quickly adapt a single design for various social media platforms using Figma’s Auto Layout and Variables. Build an easy-to-edit content creation system and complete three templates: an Instagram carousel, a Facebook post, and an Instagram Story.

Now, with the power of AI, anyone can easily plan apps and design UIs! It's okay even if you don't know coding or have no UI experience. AI tools like Claude and ChatGPT will turn your ideas into reality. With just a few questions, you can analyze target customers, design app structures, and even automatically generate UI screens. In this lecture, we will teach you step-by-step from the basics so that even those who are new to Figma can follow along. Even without drawing by hand, you can import existing website UIs at once with the HTML to Design plugin, and with AI tools like Google Stitch or readdy.ai, you can create high-quality screens in a few seconds. This lecture is perfect for anyone dreaming of starting a business, wanting to switch careers to a planner, or wishing to communicate with developers. Instead of complex theories, we will only teach practical know-how that you can immediately use. Now, with just an idea, anyone can plan app services!

Figma Design + AI-Assisted Coding + Deployment Full-Stack Course!! [Figma + Vibe Coding (HTML/CSS/Tailwind/React) + Git + vercel Deployment] Your design, exactly as envisioned!! Complete it through vibe coding with zero deviation—not even 1 pixel! A full-stack guide to increasing your real-world productivity fivefold with AI! You can become a full-stack designer capable of both design and coding. ✅ Implement the intent behind your design with zero deviation—not even 1 pixel ✅ Design structures that AI can understand ✅ The ability to create prompts that precisely control AI ✅ The ability to effortlessly modify code written by AI as it pleases Experience the incredible transformation of shortening the process from design to coding and deployment to one-fifth of the time.

I have worked at seven different small startups that had neither data analysts nor user researchers, and I've stumbled through various trials and errors. I will share the many realistic challenges a UX designer can face, along with the deep insights I gained while navigating through those difficulties.

This explains intermediate-level After Effects techniques and above that can be utilized in practical work. Although explained using CC2023, it focuses on fundamental principles regardless of version. Rather than wasting time on tool explanations, I've prepared material that enables proactive research.

Have you ever created an IR Deck only to receive feedback that it "lacks persuasion"? In most cases, the problem lies not in the design, but in the structure of the message. Based on real-world experience in IR Deck design, I have outlined the criteria for designing a narrative flow from an investor's perspective. This class is designed to help you grow into a hands-on designer who can architect structure beyond just visuals.

From problem definition to research synthesis, ideation, and prototyping! Use AI as your practical partner to quickly create a high-quality UX/UI portfolio. You will learn to strategically utilize both the latest AI tools and proven tools consistently used in the industry to fit your project.