Share
Si no lo ha oído antes, Sympli es una herramienta diseñada para simplificar el proceso de tomar una interfaz diseñada en Photoshop o Sketch e implementarla para la web o como una aplicación funcional de iOS o Android. El flujo de trabajo funciona así: primero, un diseñador crea un proyecto para web, iOS o Android que puede contener cualquier número de diseños. Estos diseños representan las diferentes pantallas que deberían estar disponibles en la aplicación que está desarrollando. A continuación, el desarrollador puede usar estos diseños para crear fácilmente una interfaz para un sitio web o una nueva aplicación.
En este artículo, le mostraré algunas de las muchas características que Sympli ofrece a los desarrolladores para crear aplicaciones para iOS o Android fácilmente, basándose en el trabajo realizado por los diseñadores..
Si desea ver lo que Sympli tiene para ofrecer a los diseñadores, lea este artículo de Kezz Bracey:
El uso de Sympli como desarrollador comienza con la descarga e instalación de un complemento para Android Studio o Xcode. Instalar estos complementos es muy fácil, y los videos tutoriales que se muestran en las páginas de descarga vinculadas lo ayudarán si tiene algún problema..
El complemento Sympli para Android y Xcode proporciona acceso a especificaciones de diseño interactivo (algunos equipos usan el término "documentos de líneas rojas"). Abra una maqueta y haga clic en los elementos de diseño para obtener toda la información necesaria para implementar el diseño en su aplicación.
Como se muestra en la siguiente captura de pantalla, Sympli le brinda toda la información que posiblemente pueda necesitar sobre una vista en particular para que pueda implementar un diseño de píxel perfecto manualmente en el código o en Interface Builder o Layout Editor..
Tenga en cuenta que Sympli convierte automáticamente los píxeles en maquetas de diseño en puntos, así como otros parámetros como rellenos, sombras y bordes a términos y unidades específicos de Android o iOS.
Además, en caso de que la maqueta se haya creado en Sketch, el complemento Sympli mostrará las reglas de cambio de tamaño aplicadas a los widgets en Sketch, lo que ayuda a los desarrolladores a establecer los valores de restricción adecuados..
Una de las características principales de Sympli para desarrolladores es la capacidad de arrastrar y soltar vistas desde un diseño a un archivo de Android XML o iOS Storyboard. Sympli se encarga de una gran cantidad de problemas al crear interfaces al posicionar y dimensionar sus vistas exactamente como aparecen en el diseño original. Además de esto, Sympli también puede configurar muchos otros atributos, como el color de fondo y las fuentes personalizadas para vistas de texto..
Para aplicar un estilo a la vista existente en Interface Builder en Xcode, presione el botón "Shift" que arrastre y suelte el elemento de diseño en la vista.
Para generar un código de estilo para las vistas creadas programáticamente, arrastre y suelte el código de su controlador con el botón derecho del ratón presionado.
A partir de aquí, todo lo que tiene que hacer es modificar las restricciones de sus vistas para que puedan adaptarse a lo que esperaría en dispositivos con diferentes tamaños de pantalla. Para iOS, esto significaría agregar restricciones de diseño automático, y para Android significaría configurar las vistas en el tipo correcto de diseño para su diseño.
Además de la generación de código de estilo para vistas estándar, el complemento de Sympli para Xcode ayuda a los desarrolladores a crear controles personalizados basados en los datos vectoriales de la maqueta de diseño..
Seleccione una forma vectorial en la maqueta y presione el botón "Fragmento" al lado del nombre de una capa en el panel de detalles. Esto abrirá una ventana emergente con código Swift que se dibuja de la misma manera que se diseñó mediante programación. También hay una opción útil para copiar un código listo para Xcode Playground para continuar construyendo una vista personalizada con una vista previa en vivo del patio de recreo de inmediato..
Esto es extremadamente útil para cualquier aplicación que requiera un dibujo manual de vistas en la pantalla..
Mientras el diseñador haya configurado y cargado todo correctamente, Sympli puede encargarse de importar las imágenes y las fuentes personalizadas utilizadas en el diseño. Al importar, Sympli solicita al diseñador que nombre la imagen o fuente de acuerdo con las mejores prácticas de la plataforma. Por ejemplo, si una imagen llamada Imagen 1 se está cargando en un proyecto de Android, Sympli solicitará al diseñador que le cambie el nombre imagen_1. Esto garantiza que no tenga que perder el tiempo de desarrollo cambiando el nombre de los archivos para que puedan cargarse fácilmente. Además, los desarrolladores pueden crear reglas de cambio de nombre para que se apliquen cada vez que se actualice la maqueta.
En los complementos de Xcode y Android Studio, al hacer clic en el botón que se muestra a continuación al ver las imágenes o fuentes en un diseño, se importarán a su proyecto..
Sympli es muy inteligente en cuanto a la importación de activos. Pondrá imágenes en sus catálogos de activos en iOS y en la carpeta de recursos de su proyecto en Android; Incluso creará versiones a escala para diferentes dispositivos automáticamente..
Nota: Sympli ha anunciado que pronto agregará una opción para los complementos de Android Studio y Xcode para exportar activos vectoriales (PDF para iOS y VectorDrawable) desde cualquier capa vectorial en la maqueta..
De forma predeterminada, Sympli permite la sincronización automática para el diseño de su proyecto en los complementos de Xcode y Android Studio. Esto significa que, incluso mientras trabaja, si el diseñador realiza algunos cambios y los carga en Sympli, el nuevo diseño estará disponible de inmediato en Xcode y Android Studio..
Cuando se realicen cambios en un diseño, Sympli descargará automáticamente la última versión del diseño y le notificará la actualización. Esto garantiza que nunca tendrá que verificar manualmente que está trabajando con los últimos diseños y también elimina la necesidad de que el diseñador le notifique cuando haya realizado cambios..
Además de descargar automáticamente las copias más recientes de los diseños para su proyecto, Sympli también hace que sea muy fácil ver las versiones anteriores de cualquier diseño. Tanto en los complementos IDE como en la aplicación web de Sympli, puede ir y ver fácilmente las versiones anteriores de cualquier diseño..
Esto puede ser particularmente útil si no está seguro de qué cambios se han realizado en la última versión de un diseño específico. En la aplicación web de Sympli, puede desplazarse fácilmente entre diferentes versiones del mismo diseño para ver qué cambios se han realizado:
Por último, esta acumulación de versiones anteriores también puede ser muy útil si una revisión de su aplicación requiere que se use un diseño anterior. Para evitar la molestia de intentar encontrar un archivo antiguo en sus descargas en un correo electrónico, con Sympli puede seleccionar una versión de una lista desplegable simple en el complemento IDE:
Sympli Webapp proporciona un navegador de cambios donde puede comparar visualmente dos versiones de la maqueta de diseño y ver los cambios de lado a lado. Esto hace que las adiciones, eliminaciones y otras actualizaciones sean inmediatamente obvias para la vista, lo que aumenta la productividad de los equipos como resultado. No solo eso, los desarrolladores también pueden ver los cambios en el nivel de una propiedad, por ejemplo, si un color cambia ligeramente o un borde se vuelve 1px más grueso.
Para cualquier maqueta cargada en Sympli más de una vez, habrá un botón "Buscar cambios" en la barra superior que abre un navegador de cambios de lado a lado. Seleccione las versiones de maqueta que desea comparar y haga clic en las regiones resaltadas para ver los cambios reales.
6. Resumen del proyecto
Tanto la aplicación web Sympli como los complementos IDE pueden mostrarle una Resumen Para cualquier proyecto. Esta pantalla de resumen muestra todos los colores y fuentes utilizados en todo el proyecto. Esto puede ser muy útil si necesita obtener los detalles de un color o fuente específicos y no está completamente seguro de en qué diseño se utiliza ese recurso. También se puede usar como una referencia siempre disponible al desarrollar su aplicación si necesita usar un color o fuente exacta en algún lugar donde no se le haya proporcionado un diseño.
Como puede ver, Sympli hace que sea mucho más fácil desarrollar una aplicación a partir de diseños de interfaz creados por otra persona. Sympli se encarga de gran parte del trabajo manual relacionado con la conversión de archivos PSD o Sketch en un Storyboard para iOS o un XML para Android. Este tiempo ahorrado debido a que Sympli se puede usar de manera más productiva, por ejemplo, puede dedicar su tiempo a la funcionalidad real en lugar de copiar tediosamente códigos de color e imágenes.!
Si desea obtener más información sobre Sympli o si desea probarlo usted mismo, diríjase a su sitio web y vea algunos de sus excelentes tutoriales en video sobre cómo instalar y usar los complementos de Xcode y Android Studio..
Como siempre, asegúrese de dejar sus comentarios y sugerencias en los comentarios a continuación.
Accentsconagua