Design to Code

A series where real-world UI designs from Instagram, Dribbble & Facebook are recreated in Swift & SwiftUI

---

About This Series

I pick designs from Instagram, Dribbble, and other design communities and implement them from scratch in Swift (UIKit) or SwiftUI. The goal is simple — bridge the gap between design and code, and help iOS developers tackle real-world UI challenges.

Each entry includes:

• 📸 A preview of the design
• 💾 A link to download the full source code
• 🎨 Design credit where applicable

---

Repository Structure

Each episode lives in its own self-contained folder. The naming convention reflects the framework used and the episode number:

Design_to_code/
│
├── #37(Instagram Story Interaction Clone)/       ← SwiftUI / UIKit episode folder
│   └── design_to_code37.zip                      ← Xcode project archive
│
├── #36( Fashion App Onboarding)/
│   └── design_to_code36.zip
│
├── [SwiftUI] design_to_code29( Rating View Concept )/   ← SwiftUI-prefixed folders
│   └── design_to_code29.zip
│
├── [SwiftUI]design_to_code24( News App )/
│   └── design_to_code24.zip
│
├── design_to_code( Messaging App )/              ← UIKit episode folders
│   └── design_to_code14.zip
│
├── just_design( banking app )/                   ← Early "just_design" series
│   └── justDesign7.zip
│
├── design_to_code26.zip                          ← Standalone zip (no subfolder)
│
└── README.md

Folder Naming Conventions

Prefix	Framework	Example
[SwiftUI]	SwiftUI	[SwiftUI] design_to_code29(...)
[UIKit]	UIKit	Noted in README headers
design_to_code(...)	Mixed / UIKit	Most episodes #9–#27
just_design(...)	UIKit (early series)	Episodes #1–#8
#NN(...)	Mixed	Episodes #36–#37

How to Run an Episode

1. Navigate to the episode folder
2. Download the .zip file
3. Extract and open the .xcodeproj or .xcworkspace in Xcode
4. Build and run on a simulator or device (iOS 14+ recommended for SwiftUI episodes)

---

All Episodes

#37 · Instagram Story Interaction Clone

📦 Download Source Code

---

#36 · Fashion App Onboarding

📦 Download Source Code · Design by Neelesh Chaudhary on Dribbble

---

#35 · NFT Mobile App Concept

Screen 1	Screen 2

📦 Download Source Code · Design by Risang Kuncoro on Dribbble

---

#34 · [UIKit] Music Playlist App Interaction

📦 Download Source Code

---

#33 · [SwiftUI] Onboarding Concept

📦 Download Source Code · Design by Xitij Thakkar on Instagram

---

#32 · [UIKit] Nat Geo App Design

📦 Download Source Code · Design by Rish Designs on Instagram

---

#31 · [SwiftUI] Splash Screen Animation

📦 Download Source Code

---

#30 · [SwiftUI] Instagram Donate Concept

📦 Download Source Code · Design by jaja.design on Instagram

---

#29 · [SwiftUI] Rating View Concept

📦 Download Source Code

---

#28 · Maps App

📦 Download Source Code

---

#27 · Instagram Reels Clone

📦 Download Source Code

---

#26 · Video App

Design by Helena on Dribbble

---

#25 · Mail App

📦 Download Source Code · Design by Helena on Dribbble

---

#24 · [SwiftUI] News App

📦 Download Source Code · Design by uiuxzain on Instagram

---

#23 · [SwiftUI] Design Courses App

📦 Download Source Code

---

#22 · Custom Rating View

📦 Download Source Code

---

#21 · Photo Editor App

📦 Download Source Code

---

#20 · Travel App

📦 Download Source Code

---

#19 · Twitter Side Menu

📦 Download Source Code

---

#18 · App Store Dummy

📦 Download Source Code

---

#17 · Payments App

📦 Download Source Code

---

#16 · Facebook Post Reaction

📦 Download Source Code

---

#15 · Text Editor App

Screen 1	Screen 2

📦 Download Source Code

---

#14 · Messaging App

Screen 1	Screen 2

📦 Download Source Code · Design by Manuel Rovira on Instagram

---

#13 · Instagram Redesign 2

Screen 1	Screen 2

📦 Download Source Code · Design by Manuel Rovira on Instagram

---

#12 · Game Explorer App

Screen 1	Screen 2

📦 Download Source Code · Design by Manuel Rovira on Instagram

---

#11 · Thread & Discussion App

Screen 1	Screen 2

📦 Download Source Code · Design by Muhammad Abdull on Instagram

---

#10 · Instagram Redesign

Screen 1	Screen 2

📦 Download Source Code · Design by Muhammad Abdull on Instagram

---

#9 · Music App

📦 Download Source Code · Design by Design4me on Instagram

---

#8 · Travel App

Screen 1	Screen 2

📦 Download Source Code · Design by Sudhan PS on Instagram

---

#7 · Banking App

📦 Download Source Code · Design by Sudhan PS on Instagram

---

#6 · Meditation App

📦 Download Source Code · Design by arounda.agency on Instagram

---

#5 · Events App

📦 Download Source Code · Design by Mickael G

---

#4 · Instagram Refined

📦 Download Source Code · Design by Xitij Thakkar

---

#3 · Food Ordering App

📦 Download Source Code

---

#2 · Online Courses App

Screen 1	Screen 2

📦 Download Source Code · Design by Purrweb on Instagram

---

#1 · Bike E-Commerce App

Screen 1	Screen 2

📦 Download Source Code · Design by Marcin Grygierczyk on Dribbble

---

Support

If this series has helped you, a ⭐️ on the repo goes a long way — and feel free to share it with fellow iOS developers!

For questions or issues, reach out at dheerajsh123456@gmail.com

---

_{© Dheeraj Kumar Sharma · 2026}