Mohamed Ramadan
Country: Egypt
معسكر أنظمة التصميم (Design Systems & Tokens)
In this camp, you will receive more than 30 hours of high-quality live interactive educational content online, and you will learn and apply building design systems using the atomic design methodology (Atomic Design), managing design codes (Design Tokens), documenting the system and linking it to the code.
duration
4 weeks
hours
30-hour
Educational track camps
Select a camp to view details • 6 comprehensive camps
0 of 6 camps completed (0%)
Your progress on the path
About this camp
You'll go from building disparate components to designing an integrated system that ensures consistency across every screen, and from difficult-to-interpret design decisions to documented Design Tokens that speak the same language as developers. This camp not only teaches you how to use Figma, but it teaches you how to think about design as a living, scalable, and maintainable system, and brings you out with a real design system ready for delivery.
After camp, you will be able to:
- Understand the difference between Design System, Style Guide, and UI Kit and choose what works for your project.
- Build systematic components using Atomic Design from the simplest elements to the most complex.
- Create dynamic components using Auto Layout, Variants, and States.
- Build documented Design Tokens and connect them to your components within Figma.
- Systematically create Dark Mode and Light Mode.
- Document the design system and deliver it to developers professionally.
- Export Figma variables to JSON and convert them to CSS ready for development.
This camp is suitable for you if:
- An experienced interface designer who wants to take your business from designing screens to building systems.
- A designer who works within a team and suffers from inconsistency between components and displays.
- A designer who wants to speak the same language as developers and deliver his work professionally.
- A design manager or team leader who wants to build a unified design system for his product.
- For anyone who sees in themselves the ability to commit and persevere to learn new skills.
Tools you will need during camp:
- Provides a computer or laptop with a stable Internet connection.
- Free Figma account (and we'll walk you through the steps to set it up when needed).
- Install the Zoom application and create an account on it to attend live and interactive sessions
educational curriculum
What you will learn in this camp
Your educational journey - step by step
We believe that effective learning begins with clear, thoughtful steps. In this course, you will embark on a guided educational journey, starting from the basics and gradually moving you towards professionalism. Each stage is carefully designed to confidently build your skills and give you a practical understanding that you can apply directly to real-life projects.
Atomic design methodology (Atomic Design) and its levels.
How to plan and analyze component levels.
Understanding Component States (States & Variants)
Interactive hands-on activity: Use Figma Auto Layout and Properties to create dynamic components.
Interactive hands-on activity: Create a Button using Variables and Auto Layout.
Interactive practical activity: building complex components (Molecules & Organisms).
What are design codes (Design Tokens) and why are they important?
The difference between design codes (Design Tokens) and Figma variables (Figma Variables).
Types of design symbols (Design Tokens) and naming strategies.
Design code planning and building strategies (Design Tokens).
Organize and connect components to Design Tokens within Figma
create(Dark Mode & Light Mode)
Why is documentation important? And how to create it in practical ways.
Best Tools for Delivery Phase for Developers (Handoff).
Design System Maintenance (Design System): Its Areas and Importance
Governance (Governance): Models and best practices for managing change.
Export Figma variables to JSON and preview the code
Export and Conversion Tools (Style Dictionary)
Convert JSON to CSS and link it to the project
Setting up a Variable Library (Variables) in Figma for export
The Complete Workflow: From Figma to Development
Graduates' opinions
Rowan Alaa El-Din
Country: Egypt
26 January, 2025
Hind Ashour
Country: Egypt
15 July, 2024