Design_to_code - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #ai #golang #machine-learning #rust #deep-learning #docker #windows #cli #kubernetes #awesome-list #open-source

Design_to_code

(★ 498)

This compilation consists of designs randomly selected from various Instagram and Facebook pages, which I've endeavored to translate into code. I hope it proves beneficial for you.

파일 탐색기

최종 버전 다운로드 (.zip)

- design_to_code36.zip
- test
- design_to_code37.zip
- test
- design_to_code29.zip
- design_to_code30_upload_link
- design_to_code24.zip
- test
- Design_to_code10.zip
- design_to_code18.zip
- test
- design_to_code22.zip
- test
- design_to_code23.zip
- test
- design_to_code16.zip
- test
- design_to_code12.zip
- design_to_code13.zip
- test
- Upload Url
- design_to_code14.zip
- designToCode9.zip
- design_to_code17.zip
- test
- design_to_code21.zip
- test
- design_to_code15.zip
- design_to_code11.zip
- test
- design_to_code20.zip
- test
- design_to_code19.zip
- test
- design_to_code25.zip
- test
- design_to_code28.zip
- test
- design_to_code31.zip
- test
- design_to_code32.zip
- test
- design_to_code33.zip
- test
- design_to_code34.zip
- test
- design_to_code35.zip
- test
- justDesign7.zip
- test
- justDesign-ecommerce.zip
- justDesign5.zip
- justDesign4.zip
- justDesign6.zip
- test
- just_design(online courses).zip
- test.txt
- DownloadLink
- justDesign2.zip
- test
design_to_code26.zip
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Design to Code Banner](https://imgur.com/HhxNnSw.png)

<div align="center">

# Design to Code

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

[![Stars](https://img.shields.io/github/stars/dheerajghub/Design_to_code?style=for-the-badge&color=FA7343)](https://github.com/dheerajghub/Design_to_code/stargazers)
[![Forks](https://img.shields.io/github/forks/dheerajghub/Design_to_code?style=for-the-badge&color=0D96F6)](https://github.com/dheerajghub/Design_to_code/network/members)
[![Swift](https://img.shields.io/badge/Swift-FA7343?style=for-the-badge&logo=swift&logoColor=white)](https://developer.apple.com/swift/)
[![SwiftUI](https://img.shields.io/badge/SwiftUI-0D96F6?style=for-the-badge&logo=swift&logoColor=white)](https://developer.apple.com/xcode/swiftui/)
[![Buy Me a Coffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-%23FFDD00.svg?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://buymeacoffee.com/dheeraj.iosdev)

</div>

---

## 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

<img src="https://imgur.com/N0LPIN0.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/%2337(Instagram%20Story%20Interaction%20Clone)/design_to_code37.zip)

---

### #36 · Fashion App Onboarding

<img src="https://imgur.com/S1uPBSs.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/%2336(%20Fashion%20App%20Onboarding)/design_to_code36.zip) · Design by [Neelesh Chaudhary on Dribbble](https://dribbble.com/shots/14032250-Fashion-App-Onboarding)

---

### #35 · NFT Mobile App Concept

| Screen 1 | Screen 2 |
|:---:|:---:|
| <img src="https://imgur.com/rWoZACw.png" height="500"> | <img src="https://imgur.com/29EjuGE.png" height="500"> |

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code35(%20NFT%20Mobile%20App%20Concept%20)/design_to_code35.zip) · Design by [Risang Kuncoro on Dribbble](https://dribbble.com/shots/15543987-NFT-Mobile-App-Concept/attachments/7325359?mode=media)

---

### #34 · [UIKit] Music Playlist App Interaction

<img src="https://imgur.com/H6cHqdd.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code34(%20Music%20Playlist%20app%20interaction%20)/design_to_code34.zip)

---

### #33 · [SwiftUI] Onboarding Concept

<img src="https://imgur.com/i7mFkGs.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code33/design_to_code33.zip) · Design by [Xitij Thakkar on Instagram](https://www.instagram.com/exteedesign/)

---

### #32 · [UIKit] Nat Geo App Design

<img src="https://imgur.com/oMz7LPl.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code32(%20Nat%20Geo%20App%20Design%20)/design_to_code32.zip) · Design by [Rish Designs on Instagram](https://www.instagram.com/rish_designs/)

---

### #31 · [SwiftUI] Splash Screen Animation

<img src="https://imgur.com/pmwIzIJ.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code31(%20Splash%20screen%20animation%20)/design_to_code31.zip)

---

### #30 · [SwiftUI] Instagram Donate Concept

<img src="https://imgur.com/75vpBj2.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/%5BSwiftUI%5D%20design_to_code30(Instagram%20donate%20concept)/design_to_code30_upload_link) · Design by [jaja.design on Instagram](https://www.instagram.com/jaja.design/)

---

### #29 · [SwiftUI] Rating View Concept

<img src="https://imgur.com/YrOZFEf.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/%5BSwiftUI%5D%20design_to_code29(%20Rating%20View%20Concept%20)/design_to_code29.zip)

---

### #28 · Maps App

<img src="https://imgur.com/vy3TMgA.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code28(%20Maps%20App%20)/design_to_code28.zip)

---

### #27 · Instagram Reels Clone

<img src="https://imgur.com/LW9OvyV.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code(%20Instagram%20Reels%20clone%20)/Upload%20Url)

---

### #26 · Video App

<img src="https://imgur.com/nrbM3Zn.png" height="500">

Design by [Helena on Dribbble](https://dribbble.com/helenas)

---

### #25 · Mail App

<img src="https://imgur.com/ezy06LU.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code25(%20Mail%20App%20)/design_to_code25.zip) · Design by [Helena on Dribbble](https://dribbble.com/helenas)

---

### #24 · [SwiftUI] News App

<img src="https://imgur.com/146lasB.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/%5BSwiftUI%5Ddesign_to_code24(%20News%20App%20)/design_to_code24.zip) · Design by [uiuxzain on Instagram](https://www.instagram.com/p/CH7s6PTA6mT/)

---

### #23 · [SwiftUI] Design Courses App

<img src="https://imgur.com/BjXZOpo.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code(%20Design%20Course%20app%20in%20Swift%20UI)/design_to_code23.zip)

---

### #22 · Custom Rating View

<img src="https://imgur.com/07661ZE.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/Design_to_code(%20Custom%20Rating%20View%20)/design_to_code22.zip)

---

### #21 · Photo Editor App

<img src="https://imgur.com/1ksKq1a.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code(%20Photo%20editor%20app%20)/design_to_code21.zip)

---

### #20 · Travel App

<img src="https://imgur.com/Y441eqI.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code(%20Travel%20app%20concept%20)/design_to_code20.zip)

---

### #19 · Twitter Side Menu

<img src="https://imgur.com/PAHL3le.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code(%20Twitter%20Side%20menu%20)/design_to_code19.zip)

---

### #18 · App Store Dummy

<img src="https://imgur.com/ctqPjs6.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code(%20App%20Store%20dummy%20)/design_to_code18.zip)

---

### #17 · Payments App

<img src="https://imgur.com/uOHNx6I.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code(%20payments%20app%20)/design_to_code17.zip)

---

### #16 · Facebook Post Reaction

<img src="https://imgur.com/XBG7WTl.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code(%20facebook%20post%20reactions)/design_to_code16.zip)

---

### #15 · Text Editor App

| Screen 1 | Screen 2 |
|:---:|:---:|
| <img src="https://imgur.com/l6oa8L4.png" height="500"> | <img src="https://imgur.com/hsUGAcr.png" height="500"> |

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code(%20Text%20editor%20app)/design_to_code15.zip)

---

### #14 · Messaging App

| Screen 1 | Screen 2 |
|:---:|:---:|
| <img src="https://imgur.com/whcp3C0.png" height="500"> | <img src="https://imgur.com/gCj5jto.png" height="500"> |

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code(%20Messaging%20App%20)/design_to_code14.zip) · Design by [Manuel Rovira on Instagram](https://www.instagram.com/p/CClpNMTgERz/)

---

### #13 · Instagram Redesign 2

| Screen 1 | Screen 2 |
|:---:|:---:|
| <img src="https://imgur.com/KPIk78m.png" height="500"> | <img src="https://imgur.com/uCQnHhy.png" height="500"> |

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code(%20instagram%20redesign%202%20)/design_to_code13.zip) · Design by [Manuel Rovira on Instagram](https://www.instagram.com/p/CDwV8VYggKu/)

---

### #12 · Game Explorer App

| Screen 1 | Screen 2 |
|:---:|:---:|
| <img src="https://imgur.com/xhYqFGF.png" height="500"> | <img src="https://imgur.com/zMzxH5g.png" height="500"> |

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code(%20Game%20Explorer%20App)/design_to_code12.zip) · Design by [Manuel Rovira on Instagram](https://www.instagram.com/p/BxjhwXCgbQG/)

---

### #11 · Thread & Discussion App

| Screen 1 | Screen 2 |
|:---:|:---:|
| <img src="https://imgur.com/anCuEEp.png" height="500"> | <img src="https://imgur.com/I2YE3nZ.png" height="500"> |
| <img src="https://imgur.com/1AMkSqU.png" height="500"> | <img src="https://imgur.com/yI2AT6s.png" height="500"> |

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code(%20Threads%20and%20Discussion%20App%20)/design_to_code11.zip) · Design by [Muhammad Abdull on Instagram](https://www.instagram.com/p/B1CIDQBgpRY/)

---

### #10 · Instagram Redesign

| Screen 1 | Screen 2 |
|:---:|:---:|
| <img src="https://imgur.com/wM26MLq.png" height="500"> | <img src="https://imgur.com/KqLQq1W.png" height="500"> |

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code(%20%20instagram%20redefine%20)/Design_to_code10.zip) · Design by [Muhammad Abdull on Instagram](https://www.instagram.com/p/B-fznncA4tp/)

---

### #9 · Music App

<img src="https://imgur.com/OzATsb3.png" width="300">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/design_to_code(%20Music%20app%20)/designToCode9.zip) · Design by [Design4me on Instagram](https://www.instagram.com/p/CBvvDxTgtVb/)

---

### #8 · Travel App

| Screen 1 | Screen 2 |
|:---:|:---:|
| <img src="https://imgur.com/z2pRwYg.png" height="500"> | <img src="https://imgur.com/8IeMi2p.png" height="500"> |

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/just_design(%20travels%20app%20)/DownloadLink) · Design by [Sudhan PS on Instagram](https://www.instagram.com/p/B9HWfjRgXK4/)

---

### #7 · Banking App

<img src="https://imgur.com/Ooifc0e.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/just_design(%20banking%20app%20)/justDesign7.zip) · Design by [Sudhan PS on Instagram](https://www.instagram.com/p/B6Iv5ekgjzk/)

---

### #6 · Meditation App

<img src="https://imgur.com/UcbJpJy.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/just_design(%20Meditation%20App)/justDesign6.zip) · Design by [arounda.agency on Instagram](https://www.instagram.com/p/CAp1dYqg_-9/)

---

### #5 · Events App

<img src="https://imgur.com/82aBcoA.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/just_design(%20Events%20App%20)/justDesign5.zip) · Design by [Mickael G](https://www.instagram.com/p/CBdiVWqAAzm/)

---

### #4 · Instagram Refined

<img src="https://imgur.com/LglLXY4.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/just_design(%20Instagram%20refined%20)/justDesign4.zip) · Design by [Xitij Thakkar](https://www.instagram.com/p/CClWPwsAdt0/)

---

### #3 · Food Ordering App

<img src="https://imgur.com/wRKcPvZ.png" height="500">

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/just_design(Food%20ordering)/justDesign2.zip)

---

### #2 · Online Courses App

| Screen 1 | Screen 2 |
|:---:|:---:|
| <img src="https://imgur.com/osCPr70.png" height="500"> | <img src="https://imgur.com/vwAKDfP.png" height="500"> |

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/just_design(%20online%20course%20app)/just_design(online%20courses).zip) · Design by [Purrweb on Instagram](https://www.instagram.com/p/B-g6zsvih5G/)

---

### #1 · Bike E-Commerce App

| Screen 1 | Screen 2 |
|:---:|:---:|
| <img src="https://imgur.com/ou1NBKB.png" height="500"> | <img src="https://imgur.com/8Zc4y5P.png" height="500"> |

[📦 Download Source Code](https://github.com/dheerajghub/Design_to_code/blob/master/just_design(%20bike%20ecommerce)/justDesign-ecommerce.zip) · Design by [Marcin Grygierczyk on Dribbble](https://dribbble.com/shots/6910454-Bicycle-Store-App/attachments)

---

## 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**

[![Buy Me a Coffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-%23FFDD00.svg?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://buymeacoffee.com/dheeraj.iosdev)

---

<div align="center">
  <sub>© Dheeraj Kumar Sharma · 2026</sub>
</div>