# WARNING - Generated by {fusen} from /dev/flat_figma_design_extraction.Rmd: do not edit by hand
#' 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
#' @examples
#' data(toy_raw_file_content)
#' toy_raw_file_content %>% raw_to_design_tibble()
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)
}
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.