Forem: Manuel González Villegas

Including Figma images in your SwiftUI/Compose Previews

Manuel González Villegas — Fri, 06 Jun 2025 12:51:55 +0000

A seamless way to integrate your figma designs into your workflow

Introduction

During our development process here at Playtomic, we often encounter challenges that lead to frustrating back-and-forth exchanges between developers and designers. One of the main issues is ensuring that the implementation aligns perfectly with the designs, often due to small misalignments like missing or extra spaces.

To address this, we looked for ways to enhance our workflow and improve collaboration. Figma is the tool our product design team uses to create stunning interfaces, so integrating those designs into our mobile projects can be cumbersome.

That’s why we created FigmaPreview, a component available for both SwiftUI and Jetpack Compose, allowing us to set an image from Figma as a background directly in the Xcode or Android Studio preview while we code. This simple yet powerful addition to our workflow helps ensure pixel-perfect precision across platforms, significantly reducing the back-and-forth between design and development and allowing us to move faster while maintaining high-quality UI.

💡To keep this post clear and avoid repetition, I'll focus on the SwiftUI implementation. However, both the SwiftUI and Jetpack Compose versions share the same API and behave almost identically, with just a few platform-specific differences that I'll cover at the end.

What is FigmaPreview?

FigmaPreview is a custom SwiftUI component that lets you overlay your figma designs directly onto the SwiftUI views, and this background image can serve as a reference, allowing you to make a pixel perfect (or very closely) implementation.

Before diving into the details, here’s a quick example of how FigmaPreview helps catch subtle misalignments that might go unnoticed at first glance:

How to use FigmaPreview

To use FigmaPreview you just need to follow the following simple steps:

Obtain a token from your account to allow to the component to reach up to your private design files. Obtaining a token is pretty simple, you just need to go to your account settings and click on Generate new token button

Get a link from Figma by clicking on the view that you need to work on

Wrap your preview view inside of the FigmaPreview component. You only need to invoke the class init from your preview view

struct ExamplePlaytomicView_Previews: PreviewProvider {
    static var previews: some View {
        FigmaPreview(url: "Your figma's url here") {
            ExamplePlaytomicView(
                firstParam: "something",
                secondParam: 47
                ...
            )
        }
    }
}

Now you can adjust the alpha of the figma image that you have in the background of your preview to compare the figma design with your implementation

How we use FigmaPreview

Essentially, we are doing 2 main usages of FigmaPreview across our development process.

Coding complete screens

When building entire screens, we use FigmaPreview as a background, so we can align our implementation with precision. This ensures that our screens closely matches the intended design from the very beginning, reducing misalignments.

Catalog components

In addition to full screens, we also use FigmaPreview for individual UI components. To support this, we maintain a separate app within our main project as a component catalog. Our designers can use this app to review and validate UI components, ensuring they meet pixel perfect standards with FigmaPreview enabled.

This approach not only ensures design accuracy at a granular level but also streamlines our workflow, as designers can review, test and approve components directly in the catalog app. By the time the components are added to the main screens, they are already pixel perfect, reducing the need for further adjustments.

How it is implemented

The implementation of this component is not very complex, essentially, we just need to transform the url that we obtain from figma into a one that provides you only the image view.

💡To obtain the original figma url you can review the second step of the section How to use FigmaPreview

To implement this, we use the Figma API, which provides the necessary functionality to access images from Figma files. Here’s a quick breakdown of the process:

Extracting the fileId and nodeId: First, we parse the URL of the Figma file to obtain two key parameters, the fileId and the nodeId. These identifiers specify the file and specific frame or component from which we want to obtain an image.
Requesting the image from Figma’s API: Now, with the fileId and nodeId we can request the image with a simple GET request to the following endpoint: https://api.figma.com/v1/images/{fileId}?ids={nodeId} In the request header, we include a custom header named X-Figma-Token with our figma access token. This returns a URL of the image, which we then use as the base of this component.

Obtaining the image URL

Here is an example of how to retrieve the Figma image URL:

    class FigmaPreviewModel: ObservableObject {
        @State private var originalUrl = ""
        @Published var imageUrl: String = ""

        /**
         * Original URL: https://www.figma.com/file/ILeBSptVwqyqpr3gR2KZLh/Improvements-for-switching-teams?type=design&node-id=2012-6765&mode=design&t=60wrWFvQkrJyMHIg-1
         * API URL that needs to be tranformed: https://api.figma.com/v1/images/ILeBApGukqyqprK932KZLh?ids=2099-6965&format=png
         */
        func updateUrl(figmaUrl: String, scale: CGFloat) {
            guard originalUrl != figmaUrl else { return }
            guard
                let url = URL(string: figmaUrl),
                let components = NSURLComponents(url: url, resolvingAgainstBaseURL: false),
                let fileId = components.path?.split(usingRegex: "/").getOrNull(index: 2),
                let nodeId = components.queryItems?.first(where: { $0.name == "node-id" })?.value
            else {
                return
            }
            guard
                let requesrUrl =
                URL(string: "https://api.figma.com/v1/images/\(fileId)?ids=\(nodeId)&format=png&use_absolute_bounds=true&scale=\(scale)")
            else { return }
            var request = URLRequest(url: requesrUrl)
            request.addValue("{your_token_here}", forHTTPHeaderField: "X-Figma-Token")
            let dataTask = URLSession.shared.dataTask(with: request) { data, response, _ in
                guard
                    (response as? HTTPURLResponse)?.statusCode == 200,
                    let data
                else { return }
                DispatchQueue.main.async {
                    guard
                        let decodedPreview = try? JSONDecoder().decode(FigmaPreviewItem.self, from: data),
                        let imageURL = decodedPreview.images?[nodeId.replacingOccurrences(of: "-", with: ":")]
                    else { return }
                    self.imageUrl = imageURL
                    self.originalUrl = figmaUrl
                }
            }
            dataTask.resume()
        }
    }

    struct FigmaPreviewItem: Decodable {
        let err: String?
        let images: [String: String]?
    }

Android implementation:

        class FigmaPreviewModel {
            private var originalUrl = ""
            var imageUrl by mutableStateOf("")

            /**
             * Original URL: https://www.figma.com/file/ILeBSptVwqyqpr3gR2KZLh/Improvements-for-switching-teams?type=design&node-id=2012-6765&mode=design&t=60wrWFvQkrJyMHIg-1
             * API URL that needs to be tranformed: https://api.figma.com/v1/images/ILeBApGukqyqprK932KZLh?ids=2099-6965&format=png
             */
            @Throws(IOException::class)
            fun updateUrl(figmaUrl: String, density: Float) {
                if (originalUrl == figmaUrl) {
                    return
                }
                val url = URL(figmaUrl)
                val components = url.path.split("/")
                val fileId = components.getOrNull(2) ?: return
                val query = url.query ?: return
                val nodeId = query.split("&").firstOrNull { it.startsWith("node-id=") }?.split("=")?.getOrNull(1) ?: return
                val requestUrl = URL("https://api.figma.com/v1/images/$fileId?ids=$nodeId&format=png&use_absolute_bounds=true&scale=$density")
                val httpURLConnection = requestUrl.openConnection() as HttpURLConnection
                httpURLConnection.apply {
                    requestMethod = "GET"
                    addRequestProperty("X-Figma-Token", "{your_token_here}")
                }
                httpURLConnection.requestMethod = "GET"
                val responseCode = httpURLConnection.responseCode
                if (responseCode != HttpURLConnection.HTTP_OK) {
                    return
                }
                val inputReader = BufferedReader(InputStreamReader(httpURLConnection.inputStream))
                var inputLine: String?
                val response = StringBuffer()
                while (inputReader.readLine().also { inputLine = it } != null) {
                    response.append(inputLine)
                }
                inputReader.close()
                Handler(Looper.getMainLooper()).post {
                    JSONObject(response.toString()).optJSONObject("images")?.optString(nodeId.replace("-", ":"))?.let { imageUrl = it }
                    originalUrl = figmaUrl
                }
            }
        }

Displaying the Figma image

Once we have the URL, we can create the view to display the image as a background:

    public struct FigmaPreview<Content: View>: View {
        @StateObject var model = FigmaPreviewModel()
        @State private var url: String
        @State private var opacity: Double
        private let content: Content

        public init(
            url: String,
            opacity: Double = 0.4,
            @ViewBuilder content: () -> Content
        ) {
            _url = State(initialValue: url)
            _opacity = State(initialValue: opacity)
            self.content = content()
        }

        public var body: some View {
            @Environment(\.colorScheme) var colorScheme
            ScrollView {
                VStack {
                    HStack {
                        Text("Code")
                        Slider(value: $opacity, in: 0 ... 1)
                            .padding(.horizontal)
                        Text("Figma")
                    }.padding(.horizontal, medium)
                    ZStack(alignment: .top) {
                        content.frame(maxWidth: figmaPreviewDefaultWidth)
                        HStack {
                            let scale = UIScreen.main.scale
                                AsyncImage(url: URL(string: model.imageUrl), scale: scale)
                                .opacity(opacity)
                                .onAppear { model.updateUrl(figmaUrl: url, scale: scale) }
                                .dashedBorder(color: R.color.playtomicSwiftUI.emerald.opacity(0.5))
                        }
                        .ignoresSafeArea(.all)
                        .frame(width: figmaPreviewDefaultWidth)
                        .dashedBorder(color: R.color.playtomicSwiftUI.sky_blue.opacity(0.5))
                    }.frame(minWidth: figmaPreviewDefaultWidth)
                }
            }
        }
    }

Android implementation:

        val figmaPreviewDefaultWidth = 375.dp

        @Composable
        fun FigmaPreview(url: String, opacity: Float = 0.4f, contentScale: ContentScale = ContentScale.FillBounds, content: @Composable () -> Unit) {
            var opacityState by remember { mutableStateOf(opacity) }
            val model = remember { FigmaPreviewModel() }

            val density = LocalDensity.current.density
            val localContext = LocalContext.current

            LaunchedEffect(url) { Executors.newFixedThreadPool(1).execute { model.updateUrl(url, density = density) } }
            LaunchedEffect(Unit) {
                // mgonzalez: Put here the context that is needed to start any preview
                val contextProvider = object : IContextProvider {
                    override val applicationContext: android.content.Context
                        get() = localContext.applicationContext

                    override val currentActivity: Activity?
                        get() = localContext as? Activity

                    override val activityStack: List<Activity>
                        get() = listOf()
                }
                Context.contextProvider = contextProvider
                PlaytomicUI.initialize(contextProvider = contextProvider)
            }

            Column(verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier) {
                Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.padding(horizontal = Medium)) {
                    Text("Code")
                    Slider(
                        value = opacityState, onValueChange = { opacityState = it }, valueRange = 0f..1f, modifier = Modifier
                        .padding(horizontal = 16.dp)
                        .weight(1f)
                    )
                    Text("Figma")
                }

                Box(
                    contentAlignment = Alignment.TopCenter,
                    modifier = Modifier
                        .requiredWidth(figmaPreviewDefaultWidth)
                        .dashedBorder(Color.Blue)
                ) {
                    Box(modifier = Modifier.dashedBorder(Color.Green)) { content() }

                    val modifier = if (contentScale == ContentScale.FillBounds) {
                        Modifier
                    } else {
                        Modifier.matchParentSize()
                    }

                    PlaytomicImage(
                        urlString = model.imageUrl,
                        placeholder = com.playtomicui.R.drawable.ic_asset_add_picture_disable,
                        options = ImageOptions.ORIGINAL,
                        contentScale = contentScale,
                        modifier = modifier.alpha(opacityState)
                    )
                }
            }
        }
        ```

This approach simplifies our development process by displaying the figma design right within Xcode. You can see our implementation here:

Some limitations that the component have

Each time you make a change in your code, the component needs to load again the image, what some times might be a bit annoying
On android, you need to run the preview to see the figmapreview working

Decorator pattern vs inheriting in Kotlin

Manuel González Villegas — Mon, 13 Dec 2021 08:15:03 +0000

In playtomic, especially in the mobile team, we are fan of the decorator pattern, and in this article I will try to explain why it is a better idea to use the decorator pattern than inheritance, showing an example of how we use it.

This article will be technical, so I recommend to you to read before a bit of theory about the difference between inheritance and the decorator pattern. https://newbedev.com/decorator-pattern-versus-sub-classing

The inheritance

The inheritance in Kotlin is the same as in some other languages, we use the inheritance when we know there is a relationship between a child and its parent class, for example, an iPhone is a phone, a phone is an electronic device. Each child is an specialised version of the parent in which inherits all the properties of the parent.

The decorator pattern

The decorator pattern is a design pattern that allows behavior to be added to an individual object, dynamically, without affecting the behavior of other objects from the same class.
The coolest of the decorator pattern is that you can create a decorator class and use it more than once, and at any moment you can add or remove any other one (with the inheritance you can not).

An example in playtomic

Let’s see an example about how Playtomic app manages the HTTP requests. As a spoiler I will tell you that with the decorator pattern we can change which http client we are using in runtime, yes, in runtime. Let 's see.

To start, we have a IHttpClient interface, which is a basic thing that we will need to create the decorator classes. In this case we only have one simple method to make a request with an object that contains the needed information to make that request.

interface IHttpClient {
    fun request(httpRequest: HttpRequest): Promise<HttpResponse>
}

In our case, we also have some other implemented methods (inside the interface) to make our lives easier while we are making requests. All of them are very similar to this one:

    fun get(endpoint: String, params: Map<String, Any>?): Promise<ByteArray> =
            request(HttpRequest(method = HttpMethod.get, url = endpoint, queryParams = params))
                    .then(map = { it.body })

Well, I am not going to show very deeply the implementation of each of our http clients implementation, I will just enumerate some of them:

OkHttpClient => This one is the main client that makes the remote http requests to our backend

class OkHttpClient(
        private val baseUrl: String,
        timeOut: Long? = null,
        client: OkHttpClient? = null,
        private val urlEncoder: IHttpParameterEncoder = HttpUrlParameterEncoder(),
        private val bodyEncoders: List<IHttpParameterEncoder> = listOf(HttpJsonParameterEncoder(), ...))
    : IHttpClient {

This is the base HTTP client, so here there is nothing too much to see.

AuthHttpClient => With this one, we include the authentication and if the session has expired we can re-login to the user and throw the request again (and for the user is totally transparent)

class AuthHttpClient(private val httpClient: IHttpClient,
                     private val keychain: IKeyValueStorage) : IHttpClient by httpClient {

In this case we are decorating the http client to add the authentication into the request, so, as you can see into the class definition (... by httpClient) means that the interface that this class is implementing IHttpClient interface is being decorated by the parameter httpclient. So, in that case we can only implement into this class the methods that we need for the decoration (In this case, is the only one that we have). So, it looks like this:

    override fun request(httpRequest: HttpRequest): Promise<HttpResponse> =
            request(httpRequest, refreshTokenAllowed = true)

    fun request(httpRequest: HttpRequest, refreshTokenAllowed: Boolean): Promise<HttpResponse> {
        val headers = httpRequest.headers?.toMutableMap() ?: mutableMapOf()
        val accessToken = keychain.accessToken
        if (accessToken != null && isAnemoneRequest(httpRequest)) {
            headers.put("Authorization", "Bearer $accessToken")
        }
        val authHttpRequest = httpRequest.copy(headers = headers)
        val pendingPromise = PendingPromise<HttpResponse>()
        httpClient.request(authHttpRequest).then(pendingPromise::fulfill).catchError { error ->
            if (this.isAnemoneRequest(httpRequest) && this.isSessionError(error)) {
                if (refreshTokenAllowed) {
                    if (accessToken != this.keychain.accessToken) {
                        this.request(httpRequest = httpRequest, refreshTokenAllowed = false).then(pendingPromise::fulfill).catchError(pendingPromise::reject)
                    } else {
                        this.refreshToken(PendingRequest(request = httpRequest, promise = pendingPromise, error = error))
                    }
                } else {
                    this.logout?.invoke()
                    this.httpClient.request(httpRequest).then(pendingPromise::fulfill).catchError(pendingPromise::reject)
                }
            } else {
                pendingPromise.reject(error)
            }
        }
        return pendingPromise
    }

As I said before, we are including into the request a header with the authentication needed information and checking if the request fails because of a session expired error to throw the request again.

AnalyticsHttpClient => This one measures and track the response, so with this we can analyse the traffic, the error rate ...

class AnalyticsHttpClient(private val httpClient: IHttpClient,
                          private val analyticsManager: IAnalyticsManager) : IHttpClient by httpClient {

This decorator is doing something very similar to the previous one to be able to track timings and errors

LocalHttpClient => This one use as response some jsons stored into the app

class LocalHttpClient(private val context: Context) : IHttpClient {

This is another base client to read local documents in JSON to be able to serve it as a response.

And if you are still asking how we are changing the used http client in runtime, I will confess that it has nothing to do with the decorator pattern but this is how we are doing it. We have another implementation of the IHttpClient interface that receives 2 implementations of the HTTP client and depending on the endpoint url and method verb we decide which one to use.

class AppHttpClient(val appVersion: String,
                    var localHttpClient: IHttpClient,
                    var remoteHttpClient: IHttpClient)
    : IHttpClient {

    private val localEndpoints = mapOf<String, String>(
            "POST /v2/auth/login" to "/v2/auth/login",
            "GET /v2/users/me" to "/v2/users/me",
            "GET /v2/tournaments/7c0b8e6f-3693-4f48-b370-b9643a8d04fe" to "/v2/tournaments/1",
            "GET /v2/status/version_control" to "/v2/status/version_control",
            "" to ""
    )

    override fun request(httpRequest: HttpRequest): Promise<HttpResponse> {
        val headers = httpRequest.headers?.toMutableMap() ?: mutableMapOf()
        headers.put("X-Requested-With", "${BuildConfig.APPLICATION_ID}.app $appVersion")
        headers.put("User-Agent", "Android ${android.os.Build.VERSION.RELEASE}")

        val appHttpRequest = httpRequest.copy(headers = headers)
        val key = "${appHttpRequest.method.description} ${appHttpRequest.url}"

        val file = localEndpoints[key]
        return if (file != null) {
            localHttpClient.request(appHttpRequest.copy(url = file))
        } else {
            remoteHttpClient.request(appHttpRequest)
        }
    }
}

To complete this post and understand the power of the composition thanks to the decorator pattern, let’s take a quick look at how easy it is to add a new decorator component, to include a new behavior or remove one of it just by adding or removing the proper line into the instantiation. Ours one looks like this:

        val baseHttpClient = OkHttpClient(baseUrl = baseUrl, timeOut = 30)
        val authHttpClient = AuthHttpClient(
                httpClient = baseHttpClient,
                keychain = keychain
        )
        val analyticsHttpClient = AnalyticsHttpClient(
                httpClient = authHttpClient,
                analyticsManager = managerProvider.analyticsManager
        )
        val appHttpClient = AppHttpClient(
                appVersion = appVersion,
                localHttpClient = LocalHttpClient(applicationContext),
                remoteHttpClient = analyticsHttpClient
        )