In ThinkR-open/swatch: Build A {ggplot} Maquette From Figma File
library(testthat)
library(httr)
library(glue)
library(stringr)
pkgload::load_all()
Transformation of the raw Figma content to a tibble with only the design description of the main components: raw_to_design_tibble()
This function is used to arrange the raw data (list) to a digest tibble. Only the information about main components is keept. Only the items corresponding to a design characteristic is kept (color, style, opacity, etc.).
raw_file_content <- get_figma_file_content(file_key = "wRqIvMmymzSPuj0sEhnORb",
acess_token = Sys.getenv("FIGMA_TOKEN"))
raw_file_content %>% raw_to_design_tibble()
#' Transform a raw Figma content to a tibble with only the design description of the main components.
#'
#' @param .data List. An object returned by \code{architekter::\link{get_figma_file_content}()}
#'
#' @importFrom tibble tibble
#' @importFrom tidyr unnest_wider unnest
#' @importFrom dplyr mutate select everything pull bind_rows distinct
#' @importFrom purrr map_chr map flatten map_lgl
#' @importFrom grDevices rgb
#' @importFrom cli cli_alert_success
#'
#' @return A tibble. Design description of the main components.
#' @export
raw_to_design_tibble <- function(.data) {
# Info about main components
raw_list_main_comp <- .data$components
tibble_main_comp <- tibble(raw_list = raw_list_main_comp)
data_info <- tibble_main_comp %>%
unnest_wider(col = raw_list) %>%
mutate(id = names(raw_list_main_comp)) %>%
select(id, everything())
# Pages names
pages_names <- .data$document[[4]] %>% map_chr(~ .x$name)
id_page_templates <- which(pages_names %in% c("Page 1", "Template"))
# Design of main components
# _select only the design of main components
raw_list_design <- .data$document$children[[id_page_templates]]$children
id_sub_comp <- raw_list_design %>% map_chr(~ .x$id)
id_main_comp <- which(id_sub_comp %in% (data_info %>% pull(id)) == TRUE)
names(id_main_comp) <- data_info$name[which((data_info %>% pull(id) %in% id_sub_comp) == TRUE)]
raw_list_main_design <- list()
for(i in 1:length(id_main_comp)) {
raw_list_main_design_i <- raw_list_design[[id_main_comp[i]]]$children[[1]]
raw_list_main_design[[i]] <- raw_list_main_design_i
}
names(raw_list_main_design) <- names(id_main_comp)
# _transform to tibble
tibble_design_comp <- tibble(raw_list = raw_list_main_design)
data_design <- tibble_design_comp %>%
unnest_wider(col = raw_list)
# _keep only necessary columns
if ("strokeDashes" %in% colnames(data_design)) {
data_design <- data_design %>%
select(type, fills, strokes, strokeWeight, strokeDashes, style)
} else {
data_design <- data_design %>%
select(type, fills, strokes, strokeWeight, style)
}
# _add the name of the element and unnest type
data_design <- data_design %>%
mutate(element_name = names(raw_list_main_design)) %>%
unnest(type) %>%
select(element_name, everything())
# _unnest style
data_design <- data_design %>%
unnest_wider(style)
# _unnest fills
data_design <- data_design %>%
select(-fills) %>%
left_join(
data_design$fills %>%
flatten() %>%
map(~ tibble(fills_blendMode = .x$blendMode,
fills_type = .x$type,
fills_color = rgb(.x$color$r, .x$color$g, .x$color$b, alpha = .x$color$a)
)
) %>%
bind_rows() %>%
mutate(element_name = data_design %>% unnest(fills) %>% distinct(element_name) %>% pull()),
by = "element_name"
)
# _unnest strokes
if (any(!is.na(data_design %>% pull(strokes)))) {
data_design <- data_design %>%
select(-strokes) %>%
left_join(
data_design$strokes %>%
flatten() %>%
map(~ tibble(strokes_blendMode = .x$blendMode,
strokes_type = .x$type,
strokes_color = rgb(.x$color$r, .x$color$g, .x$color$b, alpha = .x$color$a)
)
) %>%
bind_rows() %>%
mutate(element_name = data_design %>% unnest(strokes) %>% distinct(element_name) %>% pull()),
by = "element_name"
)
}
# _unnest strokeDashes
if ("strokeDashes" %in% colnames(data_design)) {
if (any(!is.na(data_design %>% pull(strokeDashes)))) {
data_design <- data_design %>%
select(-strokeDashes) %>%
left_join(
tibble(strokeDashes = data_design$strokeDashes %>%
map_lgl(~ !is.null(.x))) %>%
filter(strokeDashes == TRUE) %>%
mutate(element_name = data_design %>% unnest(strokeDashes) %>% distinct(element_name) %>% pull()),
by = "element_name"
)
}
}
cli_alert_success("The raw Figma content has been successfully transformed to a tibble.")
return(data_design)
}
data(toy_raw_file_content)
toy_raw_file_content %>% raw_to_design_tibble()
test_that("raw_to_design_tibble works", {
data(toy_raw_file_content)
tibble_file_content <- raw_to_design_tibble(toy_raw_file_content)
expect_equal(object = dim(tibble_file_content),
expected = c(8, 21))
# long dput ----
expect_equal(object = tibble_file_content,
expected = structure(list(element_name = c("panel_background", "legend_text",
"legend_title", "panel_grid", "axis_text", "axis_title", "plot_subtitle",
"plot_title"), type = c("VECTOR", "TEXT", "TEXT", "VECTOR", "TEXT",
"TEXT", "TEXT", "TEXT"), strokeWeight = c(5, 1, 1, 1, 1, 1, 1,
1), fontFamily = c(NA, "Roboto", "Roboto", NA, "Roboto", "Roboto",
"Roboto", "Roboto"), fontPostScriptName = c(NA, NA, NA, NA, NA,
NA, "Roboto-Light", "Roboto-Light"), fontWeight = c(NA, 400L,
400L, NA, 400L, 400L, 300L, 300L), textAutoResize = c(NA, "HEIGHT",
"HEIGHT", NA, NA, NA, "HEIGHT", "WIDTH_AND_HEIGHT"), fontSize = c(NA,
9, 11, NA, 9, 11, 12, 20), textAlignHorizontal = c(NA, "LEFT",
"LEFT", NA, "LEFT", "LEFT", "LEFT", "LEFT"), textAlignVertical = c(NA,
"TOP", "TOP", NA, "TOP", "TOP", "TOP", "BOTTOM"), letterSpacing = c(NA,
0.36, 0.44, NA, 0, 0.44, 0.48, 0.8), lineHeightPx = c(NA, 10.546875,
12.890625, NA, 10.546875, 12.890625, 14.0625, 23.4375), lineHeightPercent = c(NA,
100, 100, NA, 100, 100, 100, 100), lineHeightUnit = c(NA, "INTRINSIC_%",
"INTRINSIC_%", NA, "INTRINSIC_%", "INTRINSIC_%", "INTRINSIC_%",
"INTRINSIC_%"), fills_blendMode = c("NORMAL", "NORMAL", "NORMAL",
"NORMAL", "NORMAL", "NORMAL", "NORMAL", "NORMAL"), fills_type = c("SOLID",
"SOLID", "SOLID", "SOLID", "SOLID", "SOLID", "SOLID", "SOLID"
), fills_color = c("#5FBDDEFF", "#000000FF", "#000000FF", "#5FBDDEFF",
"#B0B0B0FF", "#000000FF", "#000000FF", "#FDA6E3FF"), strokes_blendMode = c("NORMAL",
NA, NA, NA, NA, NA, NA, NA), strokes_type = c("SOLID", NA, NA,
NA, NA, NA, NA, NA), strokes_color = c("#000000FF", NA, NA, NA,
NA, NA, NA, NA), strokeDashes = c(TRUE, NA, NA, NA, NA, NA, NA,
NA)), row.names = c(NA, -8L), class = c("tbl_df", "tbl", "data.frame"
)))
# end long dput ----
})
# Run but keep eval=FALSE to avoid infinite loop
# Execute in the console directly
fusen::inflate(flat_file = "dev/flat_figma_design_extraction.Rmd",
vignette_name = "c - Design elements extraction from the Figma file",
open_vignette = FALSE,
check = FALSE,
overwrite = TRUE)
ThinkR-open/swatch documentation built on April 7, 2022, 6:08 p.m.
R Package Documentation
Browse R Packages
We want your feedback!
Note that we can't provide technical support on individual packages. You should contact the package authors for that.
library(testthat) library(httr) library(glue) library(stringr) pkgload::load_all()
Transformation of the raw Figma content to a tibble with only the design description of the main components: raw_to_design_tibble()
This function is used to arrange the raw data (list) to a digest tibble. Only the information about main components is keept. Only the items corresponding to a design characteristic is kept (color, style, opacity, etc.).
raw_file_content <- get_figma_file_content(file_key = "wRqIvMmymzSPuj0sEhnORb", acess_token = Sys.getenv("FIGMA_TOKEN")) raw_file_content %>% raw_to_design_tibble()
#' Transform a raw Figma content to a tibble with only the design description of the main components. #' #' @param .data List. An object returned by \code{architekter::\link{get_figma_file_content}()} #' #' @importFrom tibble tibble #' @importFrom tidyr unnest_wider unnest #' @importFrom dplyr mutate select everything pull bind_rows distinct #' @importFrom purrr map_chr map flatten map_lgl #' @importFrom grDevices rgb #' @importFrom cli cli_alert_success #' #' @return A tibble. Design description of the main components. #' @export raw_to_design_tibble <- function(.data) { # Info about main components raw_list_main_comp <- .data$components tibble_main_comp <- tibble(raw_list = raw_list_main_comp) data_info <- tibble_main_comp %>% unnest_wider(col = raw_list) %>% mutate(id = names(raw_list_main_comp)) %>% select(id, everything()) # Pages names pages_names <- .data$document[[4]] %>% map_chr(~ .x$name) id_page_templates <- which(pages_names %in% c("Page 1", "Template")) # Design of main components # _select only the design of main components raw_list_design <- .data$document$children[[id_page_templates]]$children id_sub_comp <- raw_list_design %>% map_chr(~ .x$id) id_main_comp <- which(id_sub_comp %in% (data_info %>% pull(id)) == TRUE) names(id_main_comp) <- data_info$name[which((data_info %>% pull(id) %in% id_sub_comp) == TRUE)] raw_list_main_design <- list() for(i in 1:length(id_main_comp)) { raw_list_main_design_i <- raw_list_design[[id_main_comp[i]]]$children[[1]] raw_list_main_design[[i]] <- raw_list_main_design_i } names(raw_list_main_design) <- names(id_main_comp) # _transform to tibble tibble_design_comp <- tibble(raw_list = raw_list_main_design) data_design <- tibble_design_comp %>% unnest_wider(col = raw_list) # _keep only necessary columns if ("strokeDashes" %in% colnames(data_design)) { data_design <- data_design %>% select(type, fills, strokes, strokeWeight, strokeDashes, style) } else { data_design <- data_design %>% select(type, fills, strokes, strokeWeight, style) } # _add the name of the element and unnest type data_design <- data_design %>% mutate(element_name = names(raw_list_main_design)) %>% unnest(type) %>% select(element_name, everything()) # _unnest style data_design <- data_design %>% unnest_wider(style) # _unnest fills data_design <- data_design %>% select(-fills) %>% left_join( data_design$fills %>% flatten() %>% map(~ tibble(fills_blendMode = .x$blendMode, fills_type = .x$type, fills_color = rgb(.x$color$r, .x$color$g, .x$color$b, alpha = .x$color$a) ) ) %>% bind_rows() %>% mutate(element_name = data_design %>% unnest(fills) %>% distinct(element_name) %>% pull()), by = "element_name" ) # _unnest strokes if (any(!is.na(data_design %>% pull(strokes)))) { data_design <- data_design %>% select(-strokes) %>% left_join( data_design$strokes %>% flatten() %>% map(~ tibble(strokes_blendMode = .x$blendMode, strokes_type = .x$type, strokes_color = rgb(.x$color$r, .x$color$g, .x$color$b, alpha = .x$color$a) ) ) %>% bind_rows() %>% mutate(element_name = data_design %>% unnest(strokes) %>% distinct(element_name) %>% pull()), by = "element_name" ) } # _unnest strokeDashes if ("strokeDashes" %in% colnames(data_design)) { if (any(!is.na(data_design %>% pull(strokeDashes)))) { data_design <- data_design %>% select(-strokeDashes) %>% left_join( tibble(strokeDashes = data_design$strokeDashes %>% map_lgl(~ !is.null(.x))) %>% filter(strokeDashes == TRUE) %>% mutate(element_name = data_design %>% unnest(strokeDashes) %>% distinct(element_name) %>% pull()), by = "element_name" ) } } cli_alert_success("The raw Figma content has been successfully transformed to a tibble.") return(data_design) }
data(toy_raw_file_content) toy_raw_file_content %>% raw_to_design_tibble()
test_that("raw_to_design_tibble works", { data(toy_raw_file_content) tibble_file_content <- raw_to_design_tibble(toy_raw_file_content) expect_equal(object = dim(tibble_file_content), expected = c(8, 21)) # long dput ---- expect_equal(object = tibble_file_content, expected = structure(list(element_name = c("panel_background", "legend_text", "legend_title", "panel_grid", "axis_text", "axis_title", "plot_subtitle", "plot_title"), type = c("VECTOR", "TEXT", "TEXT", "VECTOR", "TEXT", "TEXT", "TEXT", "TEXT"), strokeWeight = c(5, 1, 1, 1, 1, 1, 1, 1), fontFamily = c(NA, "Roboto", "Roboto", NA, "Roboto", "Roboto", "Roboto", "Roboto"), fontPostScriptName = c(NA, NA, NA, NA, NA, NA, "Roboto-Light", "Roboto-Light"), fontWeight = c(NA, 400L, 400L, NA, 400L, 400L, 300L, 300L), textAutoResize = c(NA, "HEIGHT", "HEIGHT", NA, NA, NA, "HEIGHT", "WIDTH_AND_HEIGHT"), fontSize = c(NA, 9, 11, NA, 9, 11, 12, 20), textAlignHorizontal = c(NA, "LEFT", "LEFT", NA, "LEFT", "LEFT", "LEFT", "LEFT"), textAlignVertical = c(NA, "TOP", "TOP", NA, "TOP", "TOP", "TOP", "BOTTOM"), letterSpacing = c(NA, 0.36, 0.44, NA, 0, 0.44, 0.48, 0.8), lineHeightPx = c(NA, 10.546875, 12.890625, NA, 10.546875, 12.890625, 14.0625, 23.4375), lineHeightPercent = c(NA, 100, 100, NA, 100, 100, 100, 100), lineHeightUnit = c(NA, "INTRINSIC_%", "INTRINSIC_%", NA, "INTRINSIC_%", "INTRINSIC_%", "INTRINSIC_%", "INTRINSIC_%"), fills_blendMode = c("NORMAL", "NORMAL", "NORMAL", "NORMAL", "NORMAL", "NORMAL", "NORMAL", "NORMAL"), fills_type = c("SOLID", "SOLID", "SOLID", "SOLID", "SOLID", "SOLID", "SOLID", "SOLID" ), fills_color = c("#5FBDDEFF", "#000000FF", "#000000FF", "#5FBDDEFF", "#B0B0B0FF", "#000000FF", "#000000FF", "#FDA6E3FF"), strokes_blendMode = c("NORMAL", NA, NA, NA, NA, NA, NA, NA), strokes_type = c("SOLID", NA, NA, NA, NA, NA, NA, NA), strokes_color = c("#000000FF", NA, NA, NA, NA, NA, NA, NA), strokeDashes = c(TRUE, NA, NA, NA, NA, NA, NA, NA)), row.names = c(NA, -8L), class = c("tbl_df", "tbl", "data.frame" ))) # end long dput ---- })
# Run but keep eval=FALSE to avoid infinite loop # Execute in the console directly fusen::inflate(flat_file = "dev/flat_figma_design_extraction.Rmd", vignette_name = "c - Design elements extraction from the Figma file", open_vignette = FALSE, check = FALSE, overwrite = TRUE)
R Package Documentation
Browse R Packages
We want your feedback!
Note that we can't provide technical support on individual packages. You should contact the package authors for that.
Embedding an R snippet on your website
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.