Original
Design to SwiftUI
disclaimer: this is a work in progress, soon I’ll move each one of this to their own “project” and keep them in different repos or never do it.
The Idea
With the release of SwiftUI, and after tinkering with Storyboards and UIKit, the Apple interface development seemed to get to a point where it’s easy enough to grasp for a designer and “code enough” to be embraced as a valid workflow for design-developing (I’m learning Swift now to be even more into the develop side).
This blog post it’s a little showroom of a few projects I’ve been replicating from Dribbble into SwiftUI. The oldest projects are actually broken, those were coded into playgrounds for iPad and in a update they broke somehow, and the error handling at the moment in playgrounds is very basic.
The projects
Fintech
Original design: Fintech Dark Theme
SwiftUI: Github repo
The main goal of this view, and this front, was managing the “view inside of a view” for achieving this I took some design choices, mainly cuz I did want to bloat the project with images, even the icons and some images aren’t the same, you get the idea and flow of the view.
Finance App
Original design: Finance App
SwiftUI: Github repo
This time the challenge was catch up with new modifiers and views, also came back to SwiftUI, cuz I was a little busy at work, so more than a nice interaction it’s just a nice UI.
Team Management
Original design: Team Management
SwiftUI: Github repo
The main goal of this view, was to achieve a complex full size view, and manage a little data model.
Clean Bank UI [BROKEN]
Original design: Clean Bank UI
SwiftUI: Github repo
In this project I manage to recreate a complex UI in Playgrounds for iPad, you will have to believe it worked, cuz the code broke in a update from playgrounds for mac, since the error catching isn’t so good, I have no idea what’s broken.
Lekan Menu[BROKEN]
Original design: Lekan Menu
SwiftUI: Github repo
The first one in the series, the idea was to manage a delay animation, did it with some weird boolean management, then realized the proper way was using the animation modifier.
Diseño a SwiftUI
disclaimer: esto es un trabajo en progreso, pronto moveré cada uno de estos a su propio “proyecto” y los mantendré en repos diferentes o nunca lo haré.
La Idea
Con el lanzamiento de SwiftUI, y después de juguetear con Storyboards y UIKit, el desarrollo de interfaces de Apple pareció llegar a un punto donde es lo suficientemente fácil de entender para un diseñador y “suficientemente código” para adoptarse como un flujo de trabajo válido para diseñar-desarrollando (estoy aprendiendo Swift ahora para meterme aún más en el lado del desarrollo).
Esta entrada del blog es una pequeña vitrina de algunos proyectos que he estado replicando desde Dribbble en SwiftUI. Los proyectos más antiguos están rotos, esos fueron codificados en playgrounds para iPad y en una actualización se rompieron de alguna manera, y el manejo de errores en ese momento en playgrounds es muy básico.
Los proyectos
Fintech
Diseño original: Fintech Dark Theme
SwiftUI: Repo en Github
El objetivo principal de esta vista, y este frente, fue manejar la “vista dentro de una vista”. Para lograrlo tomé algunas decisiones de diseño, principalmente porque no quería inflar el proyecto con imágenes; incluso los íconos y algunas imágenes no son las mismas, pero se entiende la idea y el flujo de la vista.
Finance App
Diseño original: Finance App
SwiftUI: Repo en Github
Esta vez el desafío fue ponerme al día con los nuevos modificadores y vistas, además volví a SwiftUI porque estaba un poco ocupado en el trabajo, así que más que una interacción bonita es simplemente una UI agradable.
Team Management
Diseño original: Team Management
SwiftUI: Repo en Github
El objetivo principal de esta vista fue lograr una vista de tamaño completo compleja, y manejar un pequeño modelo de datos.
Clean Bank UI [ROTO]
Diseño original: Clean Bank UI
SwiftUI: Repo en Github
En este proyecto logré recrear una UI compleja en Playgrounds para iPad, tendrás que creerme que funcionó, porque el código se rompió en una actualización de playgrounds para mac, y como el manejo de errores no es tan bueno, no tengo idea de qué está roto.
Lekan Menu [ROTO]
Diseño original: Lekan Menu
SwiftUI: Repo en Github
El primero de la serie, la idea era manejar una animación con retraso, lo hice con un manejo raro de booleanos, luego me di cuenta de que la manera correcta era usando el modificador de animación.
デザインからSwiftUIへ
免責事項: これは進行中の作業です。そのうちそれぞれを独自の「プロジェクト」に移して別々のリポジトリで管理するつもりです — あるいは永遠にしないかも。
アイデア
SwiftUI のリリース後、Storyboards と UIKit をいじった結果、Apple のインターフェース開発はデザイナーでも理解できるレベルに達し、デザイン開発の有効なワークフローとして受け入れられるくらい「十分なコード」になったと感じました（さらに開発側に踏み込むため、今は Swift を学んでいます）。
このブログ記事は、Dribbble から SwiftUI へ複製_してきたいくつかのプロジェクトの小さなショールームです。古いプロジェクトは実際に壊れています。_iPad の playgrounds でコーディングしたものが、あるアップデートで何らかの理由で壊れてしまいました。当時の playgrounds のエラー処理はとても基本的なものでした。
プロジェクト一覧
Fintech
オリジナルデザイン: Fintech Dark Theme
SwiftUI: Github リポジトリ
このビューの主な目標は「ビューの中のビュー」を管理することでした。そのためにいくつかのデザイン上の決断をしました。主にプロジェクトに画像を_詰め込みたくなかった_からです。アイコンや画像が完全に同じではなくても、ビューの_アイデアとフロー_は伝わると思います。
Finance App
オリジナルデザイン: Finance App
SwiftUI: Github リポジトリ
今回のチャレンジは新しいモディファイアやビューへのキャッチアップでした。仕事が少し忙しかったこともあって SwiftUI に戻ってきたので、素敵なインタラクションというよりはシンプルに良い UI という感じです。
Team Management
オリジナルデザイン: Team Management
SwiftUI: Github リポジトリ
このビューの主な目標は、複雑な_フルサイズビュー_を実現し、小さな_データモデル_を管理することでした。
Clean Bank UI [壊れています]
オリジナルデザイン: Clean Bank UI
SwiftUI: Github リポジトリ
このプロジェクトでは iPad の Playgrounds で複雑な UI を再現することができました。動いていたことは信じてもらうしかありません。Mac 版 playgrounds のアップデートでコードが壊れてしまい、エラー処理がそれほど良くないため、何が壊れているのかまったくわかりません。
Lekan Menu [壊れています]
オリジナルデザイン: Lekan Menu
SwiftUI: Github リポジトリ
_シリーズの第一弾_です。ディレイアニメーションを管理するのが目的で、変なブーリアン管理でなんとかやりましたが、後になって正しい方法は animation モディファイアを使うことだと気づきました。