├── .gitignore ├── LICENSE ├── README.md ├── deps.edn └── src └── figma ├── core.clj ├── hiccup.clj └── specs.clj /.gitignore: -------------------------------------------------------------------------------- 1 | /target 2 | /classes 3 | /checkouts 4 | pom.xml 5 | pom.xml.asc 6 | *.jar 7 | *.class 8 | /.lein-* 9 | /.nrepl-port 10 | .hgignore 11 | .hg/ 12 | src/figma/components.cljs 13 | components.html 14 | *.iml 15 | .idea 16 | .cpcache 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | THE ACCOMPANYING PROGRAM IS PROVIDED UNDER THE TERMS OF THIS ECLIPSE PUBLIC 2 | LICENSE ("AGREEMENT"). ANY USE, REPRODUCTION OR DISTRIBUTION OF THE PROGRAM 3 | CONSTITUTES RECIPIENT'S ACCEPTANCE OF THIS AGREEMENT. 4 | 5 | 1. DEFINITIONS 6 | 7 | "Contribution" means: 8 | 9 | a) in the case of the initial Contributor, the initial code and 10 | documentation distributed under this Agreement, and 11 | 12 | b) in the case of each subsequent Contributor: 13 | 14 | i) changes to the Program, and 15 | 16 | ii) additions to the Program; 17 | 18 | where such changes and/or additions to the Program originate from and are 19 | distributed by that particular Contributor. A Contribution 'originates' from 20 | a Contributor if it was added to the Program by such Contributor itself or 21 | anyone acting on such Contributor's behalf. Contributions do not include 22 | additions to the Program which: (i) are separate modules of software 23 | distributed in conjunction with the Program under their own license 24 | agreement, and (ii) are not derivative works of the Program. 25 | 26 | "Contributor" means any person or entity that distributes the Program. 27 | 28 | "Licensed Patents" mean patent claims licensable by a Contributor which are 29 | necessarily infringed by the use or sale of its Contribution alone or when 30 | combined with the Program. 31 | 32 | "Program" means the Contributions distributed in accordance with this 33 | Agreement. 34 | 35 | "Recipient" means anyone who receives the Program under this Agreement, 36 | including all Contributors. 37 | 38 | 2. GRANT OF RIGHTS 39 | 40 | a) Subject to the terms of this Agreement, each Contributor hereby grants 41 | Recipient a non-exclusive, worldwide, royalty-free copyright license to 42 | reproduce, prepare derivative works of, publicly display, publicly perform, 43 | distribute and sublicense the Contribution of such Contributor, if any, and 44 | such derivative works, in source code and object code form. 45 | 46 | b) Subject to the terms of this Agreement, each Contributor hereby grants 47 | Recipient a non-exclusive, worldwide, royalty-free patent license under 48 | Licensed Patents to make, use, sell, offer to sell, import and otherwise 49 | transfer the Contribution of such Contributor, if any, in source code and 50 | object code form. This patent license shall apply to the combination of the 51 | Contribution and the Program if, at the time the Contribution is added by the 52 | Contributor, such addition of the Contribution causes such combination to be 53 | covered by the Licensed Patents. The patent license shall not apply to any 54 | other combinations which include the Contribution. No hardware per se is 55 | licensed hereunder. 56 | 57 | c) Recipient understands that although each Contributor grants the licenses 58 | to its Contributions set forth herein, no assurances are provided by any 59 | Contributor that the Program does not infringe the patent or other 60 | intellectual property rights of any other entity. Each Contributor disclaims 61 | any liability to Recipient for claims brought by any other entity based on 62 | infringement of intellectual property rights or otherwise. As a condition to 63 | exercising the rights and licenses granted hereunder, each Recipient hereby 64 | assumes sole responsibility to secure any other intellectual property rights 65 | needed, if any. For example, if a third party patent license is required to 66 | allow Recipient to distribute the Program, it is Recipient's responsibility 67 | to acquire that license before distributing the Program. 68 | 69 | d) Each Contributor represents that to its knowledge it has sufficient 70 | copyright rights in its Contribution, if any, to grant the copyright license 71 | set forth in this Agreement. 72 | 73 | 3. REQUIREMENTS 74 | 75 | A Contributor may choose to distribute the Program in object code form under 76 | its own license agreement, provided that: 77 | 78 | a) it complies with the terms and conditions of this Agreement; and 79 | 80 | b) its license agreement: 81 | 82 | i) effectively disclaims on behalf of all Contributors all warranties and 83 | conditions, express and implied, including warranties or conditions of title 84 | and non-infringement, and implied warranties or conditions of merchantability 85 | and fitness for a particular purpose; 86 | 87 | ii) effectively excludes on behalf of all Contributors all liability for 88 | damages, including direct, indirect, special, incidental and consequential 89 | damages, such as lost profits; 90 | 91 | iii) states that any provisions which differ from this Agreement are offered 92 | by that Contributor alone and not by any other party; and 93 | 94 | iv) states that source code for the Program is available from such 95 | Contributor, and informs licensees how to obtain it in a reasonable manner on 96 | or through a medium customarily used for software exchange. 97 | 98 | When the Program is made available in source code form: 99 | 100 | a) it must be made available under this Agreement; and 101 | 102 | b) a copy of this Agreement must be included with each copy of the Program. 103 | 104 | Contributors may not remove or alter any copyright notices contained within 105 | the Program. 106 | 107 | Each Contributor must identify itself as the originator of its Contribution, 108 | if any, in a manner that reasonably allows subsequent Recipients to identify 109 | the originator of the Contribution. 110 | 111 | 4. COMMERCIAL DISTRIBUTION 112 | 113 | Commercial distributors of software may accept certain responsibilities with 114 | respect to end users, business partners and the like. While this license is 115 | intended to facilitate the commercial use of the Program, the Contributor who 116 | includes the Program in a commercial product offering should do so in a 117 | manner which does not create potential liability for other Contributors. 118 | Therefore, if a Contributor includes the Program in a commercial product 119 | offering, such Contributor ("Commercial Contributor") hereby agrees to defend 120 | and indemnify every other Contributor ("Indemnified Contributor") against any 121 | losses, damages and costs (collectively "Losses") arising from claims, 122 | lawsuits and other legal actions brought by a third party against the 123 | Indemnified Contributor to the extent caused by the acts or omissions of such 124 | Commercial Contributor in connection with its distribution of the Program in 125 | a commercial product offering. The obligations in this section do not apply 126 | to any claims or Losses relating to any actual or alleged intellectual 127 | property infringement. In order to qualify, an Indemnified Contributor must: 128 | a) promptly notify the Commercial Contributor in writing of such claim, and 129 | b) allow the Commercial Contributor to control, and cooperate with the 130 | Commercial Contributor in, the defense and any related settlement 131 | negotiations. The Indemnified Contributor may participate in any such claim 132 | at its own expense. 133 | 134 | For example, a Contributor might include the Program in a commercial product 135 | offering, Product X. That Contributor is then a Commercial Contributor. If 136 | that Commercial Contributor then makes performance claims, or offers 137 | warranties related to Product X, those performance claims and warranties are 138 | such Commercial Contributor's responsibility alone. Under this section, the 139 | Commercial Contributor would have to defend claims against the other 140 | Contributors related to those performance claims and warranties, and if a 141 | court requires any other Contributor to pay any damages as a result, the 142 | Commercial Contributor must pay those damages. 143 | 144 | 5. NO WARRANTY 145 | 146 | EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, THE PROGRAM IS PROVIDED ON 147 | AN "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER 148 | EXPRESS OR IMPLIED INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OR 149 | CONDITIONS OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A 150 | PARTICULAR PURPOSE. Each Recipient is solely responsible for determining the 151 | appropriateness of using and distributing the Program and assumes all risks 152 | associated with its exercise of rights under this Agreement , including but 153 | not limited to the risks and costs of program errors, compliance with 154 | applicable laws, damage to or loss of data, programs or equipment, and 155 | unavailability or interruption of operations. 156 | 157 | 6. DISCLAIMER OF LIABILITY 158 | 159 | EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, NEITHER RECIPIENT NOR ANY 160 | CONTRIBUTORS SHALL HAVE ANY LIABILITY FOR ANY DIRECT, INDIRECT, INCIDENTAL, 161 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING WITHOUT LIMITATION 162 | LOST PROFITS), HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN 163 | CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 164 | ARISING IN ANY WAY OUT OF THE USE OR DISTRIBUTION OF THE PROGRAM OR THE 165 | EXERCISE OF ANY RIGHTS GRANTED HEREUNDER, EVEN IF ADVISED OF THE POSSIBILITY 166 | OF SUCH DAMAGES. 167 | 168 | 7. GENERAL 169 | 170 | If any provision of this Agreement is invalid or unenforceable under 171 | applicable law, it shall not affect the validity or enforceability of the 172 | remainder of the terms of this Agreement, and without further action by the 173 | parties hereto, such provision shall be reformed to the minimum extent 174 | necessary to make such provision valid and enforceable. 175 | 176 | If Recipient institutes patent litigation against any entity (including a 177 | cross-claim or counterclaim in a lawsuit) alleging that the Program itself 178 | (excluding combinations of the Program with other software or hardware) 179 | infringes such Recipient's patent(s), then such Recipient's rights granted 180 | under Section 2(b) shall terminate as of the date such litigation is filed. 181 | 182 | All Recipient's rights under this Agreement shall terminate if it fails to 183 | comply with any of the material terms or conditions of this Agreement and 184 | does not cure such failure in a reasonable period of time after becoming 185 | aware of such noncompliance. If all Recipient's rights under this Agreement 186 | terminate, Recipient agrees to cease use and distribution of the Program as 187 | soon as reasonably practicable. However, Recipient's obligations under this 188 | Agreement and any licenses granted by Recipient relating to the Program shall 189 | continue and survive. 190 | 191 | Everyone is permitted to copy and distribute copies of this Agreement, but in 192 | order to avoid inconsistency the Agreement is copyrighted and may only be 193 | modified in the following manner. The Agreement Steward reserves the right to 194 | publish new versions (including revisions) of this Agreement from time to 195 | time. No one other than the Agreement Steward has the right to modify this 196 | Agreement. The Eclipse Foundation is the initial Agreement Steward. The 197 | Eclipse Foundation may assign the responsibility to serve as the Agreement 198 | Steward to a suitable separate entity. Each new version of the Agreement will 199 | be given a distinguishing version number. The Program (including 200 | Contributions) may always be distributed subject to the version of the 201 | Agreement under which it was received. In addition, after a new version of 202 | the Agreement is published, Contributor may elect to distribute the Program 203 | (including its Contributions) under the new version. Except as expressly 204 | stated in Sections 2(a) and 2(b) above, Recipient receives no rights or 205 | licenses to the intellectual property of any Contributor under this 206 | Agreement, whether expressly, by implication, estoppel or otherwise. All 207 | rights in the Program not expressly granted under this Agreement are 208 | reserved. 209 | 210 | This Agreement is governed by the laws of the State of New York and the 211 | intellectual property laws of the United States of America. No party to this 212 | Agreement will bring a legal action under this Agreement more than one year 213 | after the cause of action arose. Each party waives its rights to a jury trial 214 | in any resulting litigation. 215 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # figma->hiccup 2 | 3 | Converts Figma designs into Hiccup and Reagent components to render in the browser. 4 | 5 | ## How to use 6 | - See commented code in core namespace 7 | - Replace `'Personal-Access-Tokens` and `'Document-ID` with your own. Read more here https://www.figma.com/developers/docs#auth 8 | 9 | ## Code overview 10 | - `figma.specs` — specs covering Figma file structure as specified in https://www.figma.com/developers/docs#fileformat 11 | - `figma.hiccup` — compiles Figma file structure into Hiccup 12 | 13 | ## FAQ 14 | 15 | ### Why it doesn't layout elements in browser in the same way as in Figma editor? 16 | 17 | Because Figma is using its own constraint layout system to position elements on the screen, which is different from CSS. However this behaviour can be reproduced via custom layout algorithm. See http://overconstrained.io/ for reference 18 | -------------------------------------------------------------------------------- /deps.edn: -------------------------------------------------------------------------------- 1 | {:deps {org.clojure/clojure {:mvn/version "1.10.1"} 2 | org.clojure/clojurescript {:mvn/version "1.10.536"} 3 | clj-http {:mvn/version "3.8.0"} 4 | cheshire {:mvn/version "5.8.1"} 5 | reagent {:mvn/version "0.9.0-SNAPSHOT"} 6 | rum {:mvn/version "0.11.2"} 7 | zprint {:mvn/version "0.4.15"} 8 | garden {:mvn/version "1.3.9"}}} 9 | -------------------------------------------------------------------------------- /src/figma/core.clj: -------------------------------------------------------------------------------- 1 | (ns figma.core 2 | (:require [clj-http.client :as http] 3 | [cheshire.core :as c] 4 | [clojure.spec.alpha :as s] 5 | [rum.core :as rum] 6 | [zprint.core :as zp] 7 | [figma.hiccup :as hiccup] 8 | [figma.specs] 9 | [clojure.string :as str])) 10 | 11 | (defn key->file-url [key] 12 | (str "https://api.figma.com/v1/files/" key)) 13 | 14 | (defn key->image-url [key {:keys [ids format]}] 15 | (str "https://api.figma.com/v1/images/" key 16 | "?ids=" (str/join "," ids) 17 | "&format=" (name format))) 18 | 19 | (defn get-figma-file [token key] 20 | (-> (http/get (key->file-url key) {:headers {"X-Figma-Token" token}}) 21 | :body 22 | (c/parse-string true))) 23 | 24 | (defn get-figma-images [token key ids] 25 | (-> (http/get (key->image-url key {:ids ids :format :svg}) 26 | {:headers {"X-Figma-Token" token}}) 27 | :body 28 | (c/parse-string true) 29 | :images)) 30 | 31 | ;; ============================================== 32 | 33 | (comment 34 | (require '[figma.specs] :reload-all) 35 | (require '[figma.hiccup] :reload-all) 36 | (require '[garden.core :refer [css]]) 37 | 38 | (def f-file 39 | (get-figma-file 40 | 'Personal-Access-Tokens 41 | 'Document-ID)) 42 | 43 | (binding [figma.hiccup/*css-cache* (atom #{})] 44 | (let [{:keys [schemaVersion document]} f-file 45 | ast (->> (:document f-file) 46 | (s/conform :figma/node)) 47 | hiccup (hiccup/figma->hiccup ast) 48 | styles (-> @figma.hiccup/*css-cache* 49 | (clojure.string/join)) 50 | html (rum/render-static-markup hiccup) 51 | {figma-document :document 52 | components :components} 53 | (hiccup/hiccup->components hiccup "components") 54 | base-styles (css [:body {:margin 0}] 55 | [:.figma-canvas {:min-height "100vh" 56 | :min-width "100vw"}]) 57 | pre (str "" 58 | "")] 59 | (->> (str pre html) 60 | (spit "components.html")) 61 | (-> (conj components '(ns figma.components 62 | (:require [reagent.core :as r]))) 63 | (->> (into [])) 64 | (conj `(~'defn ~'figma-document [] ~figma-document) 65 | `(~'r/render [~'figma-document] (.-body js/document))) 66 | (->> (map zp/zprint-str) 67 | (interpose "\n\n") 68 | (apply str) 69 | (spit "src/figma/components.cljs")))))) 70 | -------------------------------------------------------------------------------- /src/figma/hiccup.clj: -------------------------------------------------------------------------------- 1 | (ns figma.hiccup 2 | (:require [rum.server-render :as ssr])) 3 | 4 | (def css-reset 5 | {:button {:border-radius 0 6 | :border "none"}}) 7 | 8 | (defn round-to 9 | ([n] 10 | (round-to 100 n)) 11 | ([precision n] 12 | (double (/ (Math/round (double (* precision n))) precision)))) 13 | 14 | (defn figma-color->rgba [{:keys [r g b a]}] 15 | (let [v (->> (mapv double [r g b]) 16 | (mapv #(Math/round (* 255 %)))) 17 | v (conj v (round-to a)) 18 | v (->> (interpose ", " v) 19 | (apply str))] 20 | (str "rgba(" v ")"))) 21 | 22 | (defn merge-css [effects] 23 | (->> (group-by first effects) 24 | (map (fn [[key values]] 25 | [key (->> (map second values) 26 | (interpose ", ") 27 | (apply str))])) 28 | (into {}))) 29 | 30 | 31 | 32 | (defmulti figma-effect->css (fn [_ v] (:type v))) 33 | 34 | (defmethod figma-effect->css "INNER_SHADOW" 35 | [key {:keys [color offset radius]}] 36 | (let [{:keys [x y]} offset] 37 | [key (str "inset " x "px " y "px " radius "px " (figma-color->rgba color))])) 38 | 39 | (defmethod figma-effect->css "DROP_SHADOW" 40 | [key {:keys [color offset radius]}] 41 | (let [{:keys [x y]} offset] 42 | [key (str x "px " y "px " radius "px " (figma-color->rgba color))])) 43 | 44 | 45 | 46 | (defmulti figma-fill->css (fn [_ v] (:type v))) 47 | 48 | (defmethod figma-fill->css "SOLID" [key {:keys [color]}] 49 | [key (figma-color->rgba color)]) 50 | 51 | (defmethod figma-fill->css "GRADIENT_LINEAR" [key {:keys [color]}] 52 | [key (figma-color->rgba color)]) 53 | 54 | 55 | 56 | (defn -constraints->helper-attrs [{:keys [vertical horizontal]}] 57 | {:data-constraint-x horizontal 58 | :data-constraint-y vertical}) 59 | 60 | 61 | 62 | (defmulti -figma-styles->css first) 63 | 64 | (defmethod -figma-styles->css :default [_] 65 | nil) 66 | 67 | (defmethod -figma-styles->css :backgroundColor [[_ color]] 68 | {:background-color (figma-color->rgba color)}) 69 | 70 | (defmethod -figma-styles->css :opacity [[_ opacity]] 71 | {:opacity opacity}) 72 | 73 | (defmethod -figma-styles->css :absoluteBoundingBox [[_ {:keys [width height]}]] 74 | {:width width 75 | :height height}) 76 | 77 | (defmethod -figma-styles->css :effects [[_ effects]] 78 | (->> (map #(figma-effect->css :box-shadow %) effects) 79 | merge-css)) 80 | 81 | (defmethod -figma-styles->css :fills [[_ fills]] 82 | (->> (map #(figma-fill->css :background-color %) fills) 83 | merge-css)) 84 | 85 | (defmethod -figma-styles->css :strokeWeight [[_ weight]] 86 | {:border-width weight}) 87 | 88 | (defmethod -figma-styles->css :strokes [[_ strokes]] 89 | (if-not (empty? strokes) 90 | (let [stroke (first strokes) 91 | stroke (-> stroke 92 | (assoc-in [:color :a] (:opacity stroke)))] 93 | {:border-color (->> stroke 94 | (figma-fill->css :color) 95 | second) 96 | :border-style (clojure.string/lower-case (:type stroke))}) 97 | {})) 98 | 99 | (defmethod -figma-styles->css :cornerRadius [[_ radius]] 100 | {:border-radius radius}) 101 | 102 | (defmethod -figma-styles->css :font-type-style 103 | [[_ {:keys [fontFamily 104 | italic 105 | fontWeight 106 | fontSize 107 | textAlignHorizontal 108 | letterSpacing 109 | lineHeightPx]}]] 110 | {:font-family fontFamily 111 | :font-weight fontWeight 112 | :font-size (str fontSize "px") 113 | :text-align (clojure.string/lower-case textAlignHorizontal) 114 | :letter-spacing (round-to letterSpacing) 115 | :line-height (str lineHeightPx "px") 116 | :font-style (when italic "italic")}) 117 | 118 | (defmethod -figma-styles->css :cornerRadius [[_ radius]] 119 | {:border-radius radius}) 120 | 121 | (defmethod -figma-styles->css :text-fills [[_ fills]] 122 | (->> (map #(figma-fill->css :color %) fills) 123 | merge-css)) 124 | 125 | (defmethod -figma-styles->css :text-effects [[_ effects]] 126 | (->> (map #(figma-effect->css :text-shadow %) effects) 127 | merge-css)) 128 | 129 | 130 | 131 | (defn figma-styles->css [styles] 132 | (->> (map -figma-styles->css styles) 133 | (into {}) 134 | (filter second) 135 | (into {}) 136 | (hash-map :style))) 137 | 138 | ;; ========================================== 139 | 140 | (def ^:dynamic *css-cache*) 141 | 142 | (defn -render-css [{:keys [style] :as attrs}] 143 | (let [class (str "figma-" (hash style)) 144 | sb (StringBuilder.)] 145 | (ssr/append! sb "." class "{") 146 | (doseq [[k v] style] 147 | (let [k (ssr/normalize-css-key k) 148 | v (ssr/normalize-css-value k v)] 149 | (ssr/append! sb k ":" v ";"))) 150 | (ssr/append! sb "}") 151 | (->> (str sb) 152 | (swap! *css-cache* conj)) 153 | (-> attrs 154 | (dissoc :style) 155 | (update :class #(str % " " class))))) 156 | 157 | ;; ========================================== 158 | 159 | (defmulti figma-node->hiccup :type) 160 | 161 | (defmethod figma-node->hiccup "DOCUMENT" [{:keys [children]}] 162 | `[:div.figma-document {} 163 | ~@(map figma-node->hiccup children)]) 164 | 165 | (defmethod figma-node->hiccup "CANVAS" 166 | [{:keys [children name] :as element}] 167 | (let [attrs (select-keys element [:backgroundColor]) 168 | attrs (-render-css (figma-styles->css attrs)) 169 | element `[:div.figma-canvas ~attrs 170 | ~@(map figma-node->hiccup children)]] 171 | (with-meta element {:figma/type :figma/canvas 172 | :figma/name name}))) 173 | 174 | (defmethod figma-node->hiccup "FRAME" 175 | [{:keys [children] :as element}] 176 | (let [constraints (-constraints->helper-attrs (:constraints element)) 177 | attrs (select-keys element [:backgroundColor 178 | :opacity 179 | :absoluteBoundingBox 180 | :effects]) 181 | attrs (-> (figma-styles->css attrs) 182 | (assoc-in [:style :position] "relative") 183 | (merge constraints) 184 | -render-css)] 185 | `[:div.figma-frame ~attrs 186 | ~@(map figma-node->hiccup children)])) 187 | 188 | (defmethod figma-node->hiccup "GROUP" [{:keys [children] :as element}] 189 | (let [attrs (select-keys element [:backgroundColor 190 | :absoluteBoundingBox 191 | :effects]) 192 | attrs (-render-css (figma-styles->css attrs))] 193 | `[:div.figma-group ~attrs 194 | ~@(map figma-node->hiccup children)])) 195 | 196 | (defmethod figma-node->hiccup "VECTOR" [{:keys [children] :as element}] 197 | (let [attrs (select-keys element [:opacity 198 | :absoluteBoundingBox 199 | :effects 200 | :fills 201 | :strokes 202 | :strokeWeight]) 203 | attrs (-render-css (figma-styles->css attrs))] 204 | `[:div.figma-vector ~attrs 205 | ~@(map figma-node->hiccup children)])) 206 | 207 | (defmethod figma-node->hiccup "RECTANGLE" [element] 208 | (let [attrs (select-keys element [:opacity 209 | :absoluteBoundingBox 210 | :effects 211 | :fills 212 | :strokes 213 | :strokeWeight 214 | :cornerRadius 215 | :constraints]) 216 | tag-name (some->> (:name element) 217 | (re-find #"\[(.*)\]") 218 | second 219 | keyword) 220 | tag-name (or tag-name :div) 221 | default-tag-styles (get css-reset tag-name nil) 222 | styles (merge default-tag-styles 223 | (:style (figma-styles->css attrs))) 224 | attrs (-render-css {:class "figma-rect" :style styles})] 225 | [tag-name attrs])) 226 | 227 | (defmethod figma-node->hiccup "ELLIPSE" [element] 228 | (->> (assoc element :type "RECTANGLE" :cornerRadius "50%") 229 | figma-node->hiccup)) 230 | 231 | (defmethod figma-node->hiccup "TEXT" 232 | [{:keys [characters style opacity effects fills]}] 233 | (let [attrs (figma-styles->css {:opacity opacity 234 | :font-type-style style 235 | :text-effects effects 236 | :text-fills fills}) 237 | attrs (-render-css attrs)] 238 | [:div.figma-text attrs characters])) 239 | 240 | (defmethod figma-node->hiccup "COMPONENT" [{:keys [name] :as element}] 241 | (let [element (->> (assoc element :type "FRAME") 242 | figma-node->hiccup)] 243 | (with-meta element {:figma/type :figma/component 244 | :figma/name name}))) 245 | 246 | (defmethod figma-node->hiccup "INSTANCE" [{:keys [name] :as element}] 247 | (let [element (->> (assoc element :type "FRAME") 248 | figma-node->hiccup)] 249 | (with-meta element {:figma/type :figma/instance 250 | :figma/name name}))) 251 | 252 | 253 | (defn figma->hiccup [document] 254 | (figma-node->hiccup document)) 255 | 256 | 257 | ;; ========================================== 258 | 259 | (def components* (atom '())) 260 | 261 | (defn -hiccup->components [element cc] 262 | (if (or (string? element) (number? element)) 263 | element 264 | (let [[tag attrs & children] element 265 | {:figma/keys [type name]} (meta element)] 266 | (cond 267 | (and (= type :figma/canvas) (= name cc)) 268 | (doseq [element children] 269 | (-hiccup->components element cc)) 270 | 271 | (= type :figma/component) 272 | (let [component `(~'rum/defc ~(symbol name) [] 273 | [~tag ~attrs ~@(map #(-hiccup->components % cc) children)])] 274 | (swap! components* conj component) 275 | nil) 276 | 277 | (= type :figma/instance) 278 | (list (symbol name)) 279 | 280 | (not (empty? children)) 281 | `[~tag ~attrs ~@(map #(-hiccup->components % cc) children)] 282 | 283 | :else 284 | [tag attrs])))) 285 | 286 | (defn hiccup->components [element cc] 287 | (reset! components* '()) 288 | (let [document (-hiccup->components element cc)] 289 | {:document document 290 | :components @components*})) 291 | -------------------------------------------------------------------------------- /src/figma/specs.clj: -------------------------------------------------------------------------------- 1 | (ns figma.specs 2 | (:require [clojure.spec.alpha :as s])) 3 | 4 | (def color-chan 5 | (s/and number? #(<= 0 % 1))) 6 | 7 | (def alpha-chan 8 | (s/and number? #(<= 0 % 1))) 9 | 10 | ;;============================================= 11 | ;; File Format Types 12 | ;;============================================= 13 | 14 | ;; Color 15 | (s/def :figma.types.color/r color-chan) 16 | (s/def :figma.types.color/g color-chan) 17 | (s/def :figma.types.color/b color-chan) 18 | (s/def :figma.types.color/a alpha-chan) 19 | 20 | (s/def :figma.types/color 21 | (s/keys :req-un [:figma.types.color/r 22 | :figma.types.color/g 23 | :figma.types.color/b 24 | :figma.types.color/a])) 25 | 26 | ;; Rectangle 27 | (s/def :figma.types.rect/x int?) 28 | (s/def :figma.types.rect/y int?) 29 | (s/def :figma.types.rect/width int?) 30 | (s/def :figma.types.rect/height int?) 31 | 32 | (s/def :figma.types/rect 33 | (s/keys :req-un [:figma.types.rect/x 34 | :figma.types.rect/y 35 | :figma.types.rect/width 36 | :figma.types.rect/height])) 37 | 38 | ;; Vector 39 | (s/def :figma.types.vector/x int?) 40 | (s/def :figma.types.vector/y int?) 41 | 42 | (s/def :figma.types/vector 43 | (s/keys :req-un [:figma.types.vector/x 44 | :figma.types.vector/y])) 45 | 46 | ;; ColorStop 47 | (s/def :figma.types.color-stop/position 48 | (s/and number? #(<= 0 % 1))) 49 | 50 | (s/def :figma.types.color-stop/color 51 | :figma.types/color) 52 | 53 | (s/def :figma.types/color-stop 54 | (s/keys :req-un [:figma.types.color-stop/position 55 | :figma.types.color-stop/color])) 56 | 57 | ;; Effect 58 | (s/def :figma.types.effect/type #{"INNER_SHADOW" "DROP_SHADOW"}) 59 | (s/def :figma.types.effect/visible boolean?) 60 | (s/def :figma.types.effect/radius int?) 61 | (s/def :figma.types.effect/color :figma.types/color) 62 | (s/def :figma.types.effect/offset :figma.types/vector) 63 | 64 | (s/def :figma.types/effect 65 | (s/keys :req-un [:figma.types.effect/type 66 | :figma.types.effect/visible 67 | :figma.types.effect/radius 68 | :figma.types.effect/color 69 | :figma.types.effect/offset])) 70 | 71 | ;; Paint 72 | (s/def :figma.types.paint/type #{"SOLID" "GRADIENT_LINEAR"}) 73 | (s/def :figma.types.paint/visible boolean?) 74 | (s/def :figma.types.paint/opacity (s/and number? #(<= 0 % 1))) 75 | (s/def :figma.types.paint/color :figma.types/color) 76 | 77 | (s/def :figma.types.paint/gradientHandlePositions 78 | (s/coll-of :figma.types/vector)) 79 | 80 | (s/def :figma.types.paint/gradientStops 81 | (s/coll-of :figma.types/color-stop)) 82 | 83 | (s/def :figma.types/paint 84 | (s/keys :req-un [:figma.types.paint/type 85 | :figma.types.paint/visible 86 | :figma.types.paint/opacity 87 | :figma.types.paint/color 88 | :figma.types.paint/gradientHandlePositions 89 | :figma.types.paint/gradientStops])) 90 | 91 | ;; TypeStyle 92 | (s/def :figma.types.type-style/fontFamily string?) 93 | (s/def :figma.types.type-style/italic boolean?) 94 | (s/def :figma.types.type-style/fontWeight pos-int?) 95 | (s/def :figma.types.type-style/fontSize pos-int?) 96 | (s/def :figma.types.type-style/textAlignHorizontal #{"LEFT" "RIGHT" "CENTER" "JUSTIFIED"}) 97 | (s/def :figma.types.type-style/letterSpacing int?) 98 | 99 | (s/def :figma.types.type-style/fills 100 | (s/coll-of :figma.types/paint)) 101 | 102 | (s/def :figma.types.type-style/lineHeightPx int?) 103 | 104 | (s/def :figma.types/type-style 105 | (s/keys :req-un [:figma.types.type-style/fontFamily 106 | :figma.types.type-style/italic 107 | :figma.types.type-style/fontWeight 108 | :figma.types.type-style/fontSize 109 | :figma.types.type-style/textAlignHorizontal 110 | :figma.types.type-style/letterSpacing 111 | :figma.types.type-style/fills 112 | :figma.types.type-style/lineHeightPx])) 113 | 114 | ;; Component 115 | (s/def :figma.types.component/name string?) 116 | (s/def :figma.types.component/description string?) 117 | 118 | (s/def :figma.types/component 119 | (s/keys :req-un [:figma.types.component/name 120 | :figma.types.component/description])) 121 | 122 | ;;============================================= 123 | ;; JSON File Format Types / Node Properties 124 | ;;============================================= 125 | 126 | (s/def :figma.types/children 127 | (s/coll-of :figma.nodes/node)) 128 | 129 | (s/def :figma.types/backgroundColor 130 | :figma.types/color) 131 | 132 | (s/def :figma.types/opacity 133 | (s/and int? #(<= 0 % 1))) 134 | 135 | (s/def :figma.types/absoluteBoundingBox 136 | :figma.types/rect) 137 | 138 | (s/def :figma.types/effects 139 | (s/coll-of :figma.types/effect)) 140 | 141 | (s/def :figma.types/fills 142 | (s/coll-of :figma.types/paint)) 143 | 144 | (s/def :figma.types/strokes 145 | (s/coll-of :figma.types/paint)) 146 | 147 | (s/def :figma.types/strokeWeight pos-int?) 148 | (s/def :figma.types/cornerRadius pos-int?) 149 | (s/def :figma.types/characters string?) 150 | (s/def :figma.types/style :figma.types/type-style) 151 | (s/def :figma.types/componentId string?) 152 | 153 | (s/def :figma.layout-constraint/vertical 154 | #{"TOP" "BOTTOM" "CENTER" "TOP_BOTTOM" "SCALE"}) 155 | 156 | (s/def :figma.layout-constraint/horizontal 157 | #{"LEFT" "RIGHT" "CENTER" "LEFT_RIGHT" "SCALE"}) 158 | 159 | (s/def :figma.types/layout-constraint 160 | (s/keys :req-un [:figma.layout-constraint/vertical :figma.layout-constraint/horizontal])) 161 | 162 | (s/def :figma.types/constraints 163 | (s/coll-of :figma.types/layout-constraint)) 164 | 165 | ;; Node 166 | (s/def :figma.nodes.node/id string?) 167 | (s/def :figma.nodes.node/name string?) 168 | (s/def :figma.nodes.node/visible boolean?) 169 | (s/def :figma.nodes.node/type 170 | #{"DOCUMENT" "CANVAS" "FRAME" "GROUP" "VECTOR" 171 | "ELLIPSE" "RECTANGLE" "TEXT" "COMPONENT" "INSTANCE"}) 172 | 173 | (s/def :figma.nodes/node 174 | (s/keys :req-un [:figma.nodes.node/id 175 | :figma.nodes.node/name 176 | :figma.nodes.node/type] 177 | :opt-un [:figma.nodes.node/visible])) 178 | 179 | ;; Document 180 | (s/def :figma.nodes/document 181 | (s/keys :req-un [:figma.types/children])) 182 | 183 | ;; Canvas 184 | (s/def :figma.nodes/canvas 185 | (s/keys :req-un [:figma.types/children 186 | :figma.types/backgroundColor])) 187 | 188 | ;; Frame 189 | (s/def :figma.nodes/frame 190 | (s/keys :req-un [:figma.types/children 191 | :figma.types/backgroundColor 192 | :figma.types/absoluteBoundingBox 193 | :figma.types/constraints] 194 | :opt-un [:figma.types/opacity 195 | :figma.types/effects])) 196 | 197 | ;; Group 198 | (s/def :figma.nodes/group 199 | :figma.nodes/frame) 200 | 201 | ;; Vector 202 | (s/def :figma.nodes/vector 203 | (s/keys :req-un [:figma.types/absoluteBoundingBox 204 | :figma.types/strokeWeight] 205 | :opt-un [:figma.types/opacity 206 | :figma.types/effects 207 | :figma.types/fills 208 | :figma.types/strokes])) 209 | 210 | ;; Rectangle 211 | (s/def :figma.nodes/rect 212 | (s/merge :figma.nodes/vector 213 | (s/keys :req-un [:figma.types/cornerRadius]))) 214 | 215 | ;; Ellipse 216 | (s/def :figma.nodes/ellipse 217 | :figma.nodes/vector) 218 | 219 | ;; Text 220 | (s/def :figma.nodes/text 221 | (s/merge :figma.nodes/vector 222 | (s/keys :req-un [:figma.types/characters 223 | :figma.types/style]))) 224 | 225 | ;; Component 226 | (s/def :figma.nodes/component 227 | :figma.nodes/frame) 228 | 229 | ;; Instance 230 | (s/def :figma.nodes/instance 231 | (s/merge :figma.nodes/frame 232 | (s/keys :req-un [:figma.types/componentId]))) 233 | 234 | ;; Generic Node 235 | (defmulti figma-node :type) 236 | 237 | (defmethod figma-node "DOCUMENT" [_] 238 | :figma.nodes/document) 239 | 240 | (defmethod figma-node "CANVAS" [_] 241 | :figma.nodes/canvas) 242 | 243 | (defmethod figma-node "FRAME" [_] 244 | :figma.nodes/frame) 245 | 246 | (defmethod figma-node "GROUP" [_] 247 | :figma.nodes/group) 248 | 249 | (defmethod figma-node "VECTOR" [_] 250 | :figma.nodes/vector) 251 | 252 | (defmethod figma-node "RECTANGLE" [_] 253 | :figma.nodes/rect) 254 | 255 | (defmethod figma-node "ELLIPSE" [_] 256 | :figma.nodes/ellipse) 257 | 258 | (defmethod figma-node "TEXT" [_] 259 | :figma.nodes/text) 260 | 261 | (defmethod figma-node "COMPONENT" [_] 262 | :figma.nodes/component) 263 | 264 | (defmethod figma-node "INSTANCE" [_] 265 | :figma.nodes/instance) 266 | 267 | (s/def :figma/node 268 | (s/multi-spec figma-node :figma/node)) 269 | --------------------------------------------------------------------------------