Design · Beginner
Design systems, from scratch
A reading-card design system built from three supplied screens. Learn to audit visual decisions, define semantic tokens, document component states and deliver an editable specimen with a Figma workflow.
Written by Akis Apostoliadis for Skillfolio · 3 written lessons · Self-paced
Checking purchase availability…
Course price: $79 USD, plus applicable tax. One payment for this course. Compare all-course package prices: $29/month or $299 lifetime.
What you’ll make
A documented token system, editable component kit and tested card states, supported by an instructor decision log.
Before you begin
Basic familiarity with arranging text and frames in a design tool or HTML/CSS. Figma is optional; the supplied SVG, JSON and standalone HTML need no paid tool.
Who it’s for
Designers creating their first reusable interface kit.
- Design tokens
- Typography
- Component thinking
The complete curriculum
Preview the first lesson free. Purchase unlocks the remaining lessons, project and downloads.
Audit the decisions before drawing the system
Distinguish accidental visual drift from meaningful state and establish a traceable token proposal.
21 min read · 45 min practice · Free preview
Build the hierarchy and prove the component
Create a reusable component whose hierarchy survives difficult content and whose roles map to editable values.
23 min read · 75 min practice · Included with purchase
Document states, exceptions and the final handoff
Deliver a component contract, calibrated review evidence and a justified extension of the design system.
25 min read · 60 min practice · Included with purchase
See the work
A resilient reading-card system. Completed instructor specimen using fictional teaching material; not a learner result.This course works towards: A documented token system, editable component kit and tested card states, supported by an instructor decision log.
Explore completed teaching examples and the decisions behind them. These are instructor-authored examples, not learner testimonials.
What’s included
- Original written lessons, worked examples and guided practice.
- A course project, review criteria and reference responses.
- Downloadable course materials for purchased lessons.
Explore the course before committing. Start with the free lesson, or compare other courses.